Webmaster & Internet

Erstellen einer Social Bookmark Bar

von Momo95

Artikel bewerten

Hervorragend
Gut
Durchschnittlich
Schlecht
Schrecklich

Veröffentlicht: 24.03.11 22:40 Seitenaufrufe: 5039

11 Kommentare

Ich habe bis jetzt nur aus den Tutorials profitiert und möchte nun auch mal etwas dazu beitragen: Es geht um eine "Social Bookmark Bar" und so solls am ende aussehen: Demo

Zunächst brauchen wir natürlich die Icons bzw. Grafiken. Die habe ich hier her. (Downloadlink)

Dann benötigt man noch jQuery.

Bei den Icons habe ich die 48px auf 48px großen genommen. Die eigene Auswahl wird dann in einem Ordner namens Dateien gespeichert, genau so wie die jQuery.js Datei.

Nun noch eine ganz normale *.html-Datei.

In den Head muss folgendes rein:

Code :

<script type="text/javascript" src="Dateien/jquery.js"></script>
    <script type="text/javascript">
        $(function() {
            $('ul.icon li').hover(function(){
                $(this).find('img').animate({top:'-20px'},{queue:false,duration:300});
            }, function(){
                $(this).find('img').animate({top:'0px'},{queue:false,duration:500});
            });
        });
        </script>
<style media="screen">
ul.icon {position: relative; top: 20px; left: 0px; margin: 0px; padding: 0px; height: 68px; z-index: 1;}
ul.icon li {list-style:none; padding: 0px 10px 0px 10px; margin: 0px; width:48px; height: 68px; display: inline;}
ul.icon li img {position: relative; top: 0; left: 0; border: 0;}
#holder {position: absolute; top: 200px; left: 300px; margin: 0px; padding: 0px; height: 68px;}
#layer  {position: absolute; top: 45px; margin: 0px; padding: 0px; height: 29px; width:100%; background: url(Dateien/layer.png); z-index: 2;}
</style>

Und in den Body kommt folgende Liste:

HTML-Code:

<div id="holder">
		<div id="layer">
		</div>
			<ul class="icon">
				<li><a href="http://www.facebook.com" target="blank"><img style="top: 0px;" src="dateien/facebook.png" /></a></li>
				<li><a href="http://www.twitter.com" target="blank"><img style="top: 0px;" src="dateien/twitter.png" /></a></li>
				<li><a href="http://www.google.de" target="blank"><img style="top: 0px;" src="dateien/google.png" /></a></li>
				<li><a href="http://www.myspace.com" target="blank"><img style="top: 0px;" src="dateien/myspace.png" /></a></li>
				<li><a href="http://www.msn.com" target="blank"><img style="top: 0px;" src="dateien/msn.png" /></a></li>
				<li><a href="http://www.rss.com" target="blank"><img style="top: 0px;" src="dateien/rss.png" /></a></li>
				<li><a href="http://www.skype.de" target="blank"><img style="top: 0px;" src="dateien/skype.png" /></a></li>
			</ul>
	</div>

Die ganze Seite sieht dann so aus:

HTML-Code:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Translation//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Social Bookmark</title>
	<script type="text/javascript" src="Dateien/jquery.js"></script>
	<script type="text/javascript">
		$(function() {
			$('ul.icon li').hover(function(){
				$(this).find('img').animate({top:'-20px'},{queue:false,duration:300});
			}, function(){
				$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
			});
		});
		</script>
<style media="screen">
ul.icon {position: relative; top: 20px; left: 0px; margin: 0px; padding: 0px; height: 68px; z-index: 1;}
ul.icon li {list-style:none; padding: 0px 10px 0px 10px; margin: 0px; width:48px; height: 68px; display: inline;}
ul.icon li img {position: relative; top: 0; left: 0; border: 0;}
#holder	{position: absolute; top: 200px; left: 300px; margin: 0px; padding: 0px; height: 68px;}
#layer	{position: absolute; top: 45px; margin: 0px; padding: 0px; height: 29px; width:100%; background: url(Dateien/layer.png); z-index: 2;}
</style>
</head>
<body>
	<div id="holder">
		<div id="layer">
		</div>
			<ul class="icon">
				<li><a href="http://www.facebook.com" target="blank"><img style="top: 0px;" src="dateien/facebook.png" /></a></li>
				<li><a href="http://www.twitter.com" target="blank"><img style="top: 0px;" src="dateien/twitter.png" /></a></li>
				<li><a href="http://www.google.de" target="blank"><img style="top: 0px;" src="dateien/google.png" /></a></li>
				<li><a href="http://www.myspace.com" target="blank"><img style="top: 0px;" src="dateien/myspace.png" /></a></li>
				<li><a href="http://www.msn.com" target="blank"><img style="top: 0px;" src="dateien/msn.png" /></a></li>
				<li><a href="http://www.rss.com" target="blank"><img style="top: 0px;" src="dateien/rss.png" /></a></li>
				<li><a href="http://www.skype.de" target="blank"><img style="top: 0px;" src="dateien/skype.png" /></a></li>
			</ul>
	</div>
</body>
</html>

Jetzt braucht ihr noch die angehängte Grafik und das wars eigentlich.
Es können so viele Icons eingefügt und natürlich auch ausgestauscht werden wie ihr wollt.

Die Links müssen natürlich auch geändert werden.

matth-ee, Tim Bureck, ComFreek und 2 weitere bedanken sich.

Angehängte Grafiken

Kategorien:

Stichworte :

11 Kommentare

zer0 - 25.03.11, 18:57

Sehr schön! Vielen Dank

Antworten

Matthias Reitinger - 27.03.11, 20:34

Dein Quellcode enthält ein paar kleine Fehler, die du noch ausbessern könntest: http://www.validome.org/validate/?ur.../bookmark.html

Ansonsten wären von technischer Seite noch ein paar Verbesserungen möglich: Verwendung von CSS-Sprites für die Icons, Verbessern der Zugänglichkeit durch Setzen des alt-Attributs bei den Bildern, Vermeiden des semantisch bedeutungslosen <div id="layer">.

Ich werde mal versuchen diese Punkte selbst umzusetzen und melde mich bei Erfolg nochmal hier.

Grüße,
Matthias

Antworten

Matthias Reitinger - 27.03.11, 22:54

Hier mal meine Alternative: Demo

Quelltext:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Social Bookmark</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $('ul.icon li a').hover(function(){
        $(this).animate({bottom:'20px',height:'45px'},{queue:false,duration:300});
      }, function(){
        $(this).animate({bottom:'0px',height:'25px'},{queue:false,duration:500});
      });
    });
    </script>
    <style type="text/css" media="screen">
      #holder {
        position: relative;
        top: 200px;
        left: 50%;
        margin-left: -238px;
        padding: 0px;
        width: 476px;
        height: 50px;
      }

      ul.icon {
        margin: 0px;
        padding: 0px;
      }

      ul.icon li {
        list-style: none;
        display: block;
        height: 50px;
        float: left;
        position: relative;
        bottom: 0px;
        padding: 0 10px;
        background: url('dateien/layer.png') repeat-x bottom;
      }

      ul.icon li a {
        text-indent: -10000px;
        display: block;
        width: 48px;
        height: 25px;
        position: relative;
        bottom: 0px;
        margin-top: 20px;
        background: url('dateien/icons.png') no-repeat;
      }

      ul.icon li.facebook a { background-position: 0px 0px; }
      ul.icon li.twitter a  { background-position: 0px -48px; }
      ul.icon li.google a   { background-position: 0px -96px; }
      ul.icon li.myspace a  { background-position: 0px -144px; }
      ul.icon li.msn a      { background-position: 0px -192px; }
      ul.icon li.rss a      { background-position: 0px -240px; }
      ul.icon li.skype a    { background-position: 0px -288px; }
  </style>
</head>
<body>
  <div id="holder">
    <ul class="icon">
      <li class="facebook"><a href="http://www.facebook.com">Facebook</a></li>
      <li class="twitter"><a href="http://www.twitter.com">Twitter</a></li>
      <li class="google"><a href="http://www.google.de">Google</a></li>
      <li class="myspace"><a href="http://www.myspace.com">MySpace</a></li>
      <li class="msn"><a href="http://www.msn.com">MSN</a></li>
      <li class="rss"><a href="http://www.rss.com">RSS</a></li>
      <li class="skype"><a href="http://www.skype.de">Skype</a></li>
    </ul>
  </div>
</body>
</html>

Die icons.png enthält alle verwendeten Icons untereinander, die layer.png habe ich etwas zurechtgestutzt.

Grüße,
Matthias

Antworten

Tragg0r - 29.03.11, 15:20

Wäre das auch irgendwie möglich, das die Buttons erst alle die gleiche Farbe haben z.b. grau und per Mouseover der jeweilige Button seine richtige Farbe bekommt und (dann) hochfährt?

Hoffe es ist verständlich.

Antworten

Chef_De_Loup - 29.03.11, 15:27

@Tragg0r: Binde neben den Originalbildern die monochrome Version in die Spritedatei. Bei der Positionierung nimmst du dann die Position des monochromen Bildes und wechselst bei der hover()-Funktion auf die Position des Originalbildes.

Antworten

Tragg0r - 29.03.11, 15:37

Sry die doofe Frage aber was ist die Spritedatei? Bin noch nicht wirklich im Thema aber würde das gerne mal basteln.

Antworten

radazong - 29.03.11, 21:25

Hallo,
sieht ja wirklich super aus die Leiste. Was vielleicht auch noch gut aussehen würde wäre, wenn das "gehoverte" Symbol vielleicht etwas größer erscheint und die anderen etwas an die Seite drängt.

Antworten

Chef_De_Loup - 30.03.11, 12:01

Spritedatei = Alle Bilder die du verwendest in eine Datei. Wenn du also 6 Bilder hast, die jeweils 50x50 Pixel einnehmen, dann kannst du ein Bild erstellen in denen du die einzelnen Bilder reinpackst (nebeneinander/untereinander) und am Ende dieses Bild referenzieren.
Siehe auch: http://css-tricks.com/css-sprites/

Antworten

VoinG - 15.05.11, 15:51

Vielen Dank erstmals.
Mit fast den selben Mitteln habe ich vor Kurzem eine vertikale Leiste auf http://www.luettelforster-muehle.de/ erstellt.

JQuery Code:
HTML-Code:
	<script type="text/javascript">
	jQuery(document).ready(function(){
	jQuery('.buttonvideo, .buttonreservierung, .buttongutscheine')
		.css( {width: "30"} )
		.mouseover(function(){
			jQuery(this).stop().animate({width:"40"}, {duration:400})
		})
		.mouseout(function(){
			jQuery(this).stop().animate({width: "30"}, {duration:400})
		});

	});
	</script>

Antworten

Fredix - 15.06.11, 10:11

Hallo
Ich habe das ganze jetzt auch mal ausprobiert nur iwie bin ich entweder gerade zu dämlich oder stehe aufm Schlauch
Wieso werden bei mir die ganzen Symbole angezeigt und diese bewegen sich nur nach oben wenn man auf sie geht?

www.n3xd.de/indexnew.html

Antworten

armbruch - 04.11.11, 11:53

Hi Momo

Das ganze sieht ziemlich hübsch aus. Danke vielmals! Ich werde am Wochenende auch mal eigene Versuche starten, das ganze vertikal darzustellen, mal sehn wie viel Zeit ich habe

Ich melde mich dann bei Erfolg/Misserfolg wieder.

@Fredix: Das ist ja das witzige an der Sache, die Dinger sollen halb versteckt sein und erst auftauchen, wenn man drüber hovert

Antworten

Kommentar schreiben

Login
- Registrieren
Bereiche
Tutorials

Bild, 3D, Video & Audio

Bildbearbeitung

Fotografie

3D-Grafik

Video

Audio

Vektorgrafik

Typografie & DTP

Inspiration

Webmaster & Internet

Web-News

CMS

Web-Entwicklung

Programming

PHP

Java

C/C++

.NET

Datenbanken & XML

Sonstige Sprachen

Computer & Devices

Betriebssysteme

Server

Software

Hardware

Buch-Empfehlungen
Kategorien

CMS-Tutorials (19)

CSS (22)

CSS-Tutorials (18)

Events & Contests (37)

Flash-Tutorials (17)

Flash/Flex/AIR (18)

HTML (26)

HTML-Tutorials (21)

Inspiration Webmaster (39)

JavaScript (49)

JavaScript-Tutorials (43)

Tutorials (763)

tutorials.de intern (69)

Videotutorials (191)

Webserver (3)

Webserver-Tutorials (3)
Forum - Webmaster & Internet
Hallo,

change wird ja bereits benutzt...

Code :

1 2
..... change: function (event, ui) {

AW: jQuery UI Autocomplete vs. Autocomplete plugin 1.1 (Jörn Zaefferer)
kenguruh2002 26.05.12, 13:03
Hi,

denke mal

Code javascript:

1 2 3
$(args.selector).autocomplete({ change: closeCallback, source: sourceCallback

AW: jQuery UI Autocomplete vs. Autocomplete plugin 1.1 (Jörn Zaefferer)
javaDeveloper2011 26.05.12, 12:21
Ach natürlich! Vielen Dank. Ist ja eigentlich sonnenklar, habe beim linken div gestern wohl etwas verquert gedacht

AW: DIVs sich überlappen lassen
aurus 26.05.12, 12:19

Hi,

sry aber wo das display:none auf welches Element anwenden**** Auf body ?
Und wie per javascript wieder auf normal setzen?

AW: Accordion mit Fallback für java****
xkoy 26.05.12, 12:15

Hi aurus,

das linke div wird (zumindest bei meinem Weg) auch größer.
Das sieht man aber nicht weil es sich unter das mittlere legt.

AW: DIVs sich überlappen lassen
javaDeveloper2011 26.05.12, 12:08
Shop @ tutorials.de
Newsletter @ tutorials.de

Sobald es etwas Interessantes - wie z.B. unsere beliebten Buch-Verschenkaktionen - gibt, erhältst du unseren regelmäßig erscheinenden Newsletter. Natürlich kostenlos und jederzeit abbestellbar!

E-Mail:

Abonnieren
Abbestellen
Nützliches

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

E-Mail:
Abonnieren Abbestellen

Webmaster & Internet

Erstellen einer Social Bookmark Bar

Artikel bewerten

tutorials.de-Systemmitteilung

Login

Bereiche

Kategorien

Forum - Webmaster & Internet

AW: jQuery UI Autocomplete vs. Autocomplete plugin 1.1 (Jörn Zaefferer)

AW: jQuery UI Autocomplete vs. Autocomplete plugin 1.1 (Jörn Zaefferer)

AW: DIVs sich überlappen lassen

AW: Accordion mit Fallback für java****

AW: DIVs sich überlappen lassen

Shop @ tutorials.de

Newsletter @ tutorials.de

Nützliches