Erstellen einer Navigation mit Hover

Biernase · 14.07.2010

Ich habe bereits gegoogelt, wie eine solche Hover-Navigation zu programmieren ist. Nun ist es so, dass ich diese Praktiken nicht anwenden kann.

Normalerweise ist es so, dass man eine Hintergrundgrafik für das Navigationsmenü definiert und die Schrift als Text festlegt. Da ich die Beschriftungen der Navigationselemente gespiegelt haben wollte, mußte ich die Schrift als festen Baustein in die Grafiken der Navigationselemente einarbeiten.

Normalerweise definiert man für den Normalzustand eine Hintergrundgrafik und wählt für den Hover-Status einen anderen Background - was aber für alle Navigationselemente gilt. In meinem Fall existiert z.B. für den Navigationspunkt "Home" eine Grafik home.jpg und eine home_hover.jpg. Dieses Prinzip setzt sich über alle Navigationselemente fort.

Wie kann man soetwas realisieren?

cebito · 14.07.2010

AW: Erstellen einer Navigation mit Hover

gib "home", "über mich", "irgendwas" usw. ne Klasse und definier die entsprechenden BG's

HTML:

<a class="home" href="#">home</a>

Code:

a.home{Background:url(home.jpg);}
a.home:hover{Background:url(homehover.jpg);}

usw.

Biernase · 14.07.2010

AW: Erstellen einer Navigation mit Hover

cebito schrieb:
gib "home", "über mich", "irgendwas" usw. ne Klasse und definier die entsprechenden BG's

HTML:

<a class="home" href="#">home</a>

Code:

a.home{Background:url(home.jpg);} a.home:hover{Background:url(homehover.jpg);}

usw.

Damit werden mir gar keine Grafiken mehr angezeigt.

Mein CSS-Code

Code:

a.home {
  background:url(../images/design/navigation/home.jpg);
  display:block;
  }
  
a.home:hover {
  background:url(../images/design/navigation/home_hover.jpg);
  display:block;
  }

Meine navigation.php

Code:

<div id="nav">
  <ul class="nav ul">
	  <li class="nav li"><a class="home" href="index.php?page=home" target="_self"></a></li>
          ...
          ...
  </ul>
</div>


<div class="clear"></div>

@ alexanderhey
Die Seite kenne ich bereits. In diesem Fall konnte sie mir jedoch nicht helfen. Beziehungsweise lag es an meiner Idee. Denn <a> war bereits eine Klasse zugewiesen. Das mußte ich jetzt ändern.

fexx · 15.07.2010

AW: Erstellen einer Navigation mit Hover

nimm noch das target aus deinem <a>-tag ... ist nicht valide, und "_self" ist sowieso die standard einstellung

auserdem sollte der <a>-tag auch nicht leer bleiben.

vanilladragon · 15.07.2010

AW: Erstellen einer Navigation mit Hover

Es muss so funktionieren, wie es cebito geschrieben hat.

Benutzt du den Internet-Explorer? Wenn ja solltest du width und height immer mit angeben, ansonsten weiß IE nicht, wo er es "positionieren" soll.

vanilla

fexx · 15.07.2010

AW: Erstellen einer Navigation mit Hover

width und height würde ich auf jeden fall angeben. und wenn man es ganz korrekt machen will, verwendet man keine zwei bilder sondern vereint sie zu einem um verschiebt dieses bild dann im :hover state per "background-position"

Biernase · 15.07.2010

AW: Erstellen einer Navigation mit Hover

Zuerst einmal Danke für die rege Teilnahme.

fexx schrieb:
nimm noch das target aus deinem <a>-tag ... ist nicht valide, und "_self" ist sowieso die standard einstellung auserdem sollte der <a>-tag auch nicht leer bleiben.

Erledigt.
Es ist kompliziert, dem <a>-Tag einen Inhalt zu verleihen. Denn ich kann keine Beschriftungen der einzelnen Navigationselemente verwenden, da die Beschriftung der Navigationselemente gespielt sind.

vanilladragon schrieb:
Es muss so funktionieren, wie es cebito geschrieben hat.

Benutzt du den Internet-Explorer? Wenn ja solltest du width und height immer mit angeben, ansonsten weiß IE nicht, wo er es "positionieren" soll.

Leider werden die Grafiken damit nicht angezeigt. Mir ist bis dato noch schleierhaft, weshalb.
Ich verwende Safari 5.

fexx schrieb:
width und height würde ich auf jeden fall angeben. und wenn man es ganz korrekt machen will, verwendet man keine zwei bilder sondern vereint sie zu einem um verschiebt dieses bild dann im :hover state per "background-position"

Dieses Navigationsmenü ist mein erstes mit Hover-Effekt. Dazu habe ich mir im Vorfeld die zwei folgenden Artikel durchgelesen.

Die von dir angesprochene Technik wird auch in Teil 2 erläutert. Allerdings hatte das bei mir nicht funktioniert. Bei mir verhielt es sich so, dass die Grafiken beide komplett angezeigt wurden. Soll heißen, die Grafiken (welche ja eigentlich doppelt so hoch sind), wurden um die Hälfte gestaucht.

Der folgende Code ist der gesammte CSS-Code meiner Navigation.

Code:

#nav_box {
  width:auto;
  height:43px;
  background-image:url(../images/design/navigation/nav_bgr.jpg);
	background-repeat:repeat-x;
  }

#nav {
  float:left;
  position:relative;
  top:125px;
  padding:0 0 0 5px;
  width:1000px;
  height:43px;
  }

#nav ul {
  margin:0;
  padding:0;
  list-style:none;
  }
  
#nav li {
  float:left;
  position:top;
  margin:0;
  padding:0;
  }
  
#nav a {
  display:block;
  }
  
#nav li:hover, #nav li:hover a {
  background-position:0% -43px;
  }
  
#nav li:hover a {
  background-position:100% -43px;
  }

Und das ist der Code meiner navigation.php.

Code:

<div id="nav">
  <ul class="nav ul">
    <li class="nav li"><a class="nav a" href="index.php?page=home"><img src="http://www.psd-tutorials.de/modules/Forum/images/design/navigation/home.jpg" width="163" height="43" border="0" alt="home"></a></li>
    <li class="nav li"><a class="nav a" href="index.php?page=community"><img src="http://www.psd-tutorials.de/modules/Forum/images/design/navigation/group.jpg" width="161" height="43" border="0" alt="das sind wir"></a></li>
    <li class="nav li"><a class="nav a" href="index.php?page=galery"><img src="http://www.psd-tutorials.de/modules/Forum/images/design/navigation/galery.jpg" width="161" height="43" border="0" alt="galerie"></a></li>
    <li class="nav li"><a class="nav a" href="index.php?page=events"><img src="http://www.psd-tutorials.de/modules/Forum/images/design/navigation/open airs.jpg" width="161" height="43" border="0" alt="open airs"></a></li>
    <li class="nav li"><a class="nav a" href="index.php?page=guestbook"><img src="http://www.psd-tutorials.de/modules/Forum/images/design/navigation/guestbook.jpg" width="161" height="43" border="0" alt="g&auml;stebuch"></a></li>
    <li class="nav li"><a class="nav a" href="index.php?page=contact"><img src="http://www.psd-tutorials.de/modules/Forum/images/design/navigation/contact.jpg" width="157" height="43" border="0" alt="kontakt"></a></li>
  </ul>
</div>


<div class="clear"></div>

fexx · 15.07.2010

AW: Erstellen einer Navigation mit Hover

Biernase schrieb:
Allerdings hatte das bei mir nicht funktioniert. Bei mir verhielt es sich so, dass die Grafiken beide komplett angezeigt wurden. Soll heißen, die Grafiken (welche ja eigentlich doppelt so hoch sind), wurden um die Hälfte gestaucht.

dann ist irgendwas flasch gelaufen ;o) wenn du mir einen link schickst, könnte ich mal drüber schauen

das mit dem leer lassen ist halt so eine sache und kommt ganz darauf an, wie wichtig dir suchmaschinenoptimierung ist.

Biernase schrieb:
Leider werden die Grafiken damit nicht angezeigt. Mir ist bis dato noch schleierhaft, weshalb.

das display:block ist schon richtig, was du eingebaut hast, da ein link standardmäßg ein inline element ist.

Biernase · 15.07.2010

AW: Erstellen einer Navigation mit Hover

fexx schrieb:
dann ist irgendwas flasch gelaufen ;o) wenn du mir einen link schickst, könnte ich mal drüber schauen

das mit dem leer lassen ist halt so eine sache und kommt ganz darauf an, wie wichtig dir suchmaschinenoptimierung ist.

Suchmaschinenoptimierung ist bei meiner Seite nicht so bedeutsam. Sollte mir in naher oder ferner Zukunft eine andere optische Idee hinsichtlich der Navigation einfallen, kann ich das dann ändern.

vanilladragon · 15.07.2010

AW: Erstellen einer Navigation mit Hover

Biernase schrieb:

Der folgende Code ist der gesammte CSS-Code meiner Navigation.

Code:

#nav_box {
  width:auto;
  height:43px;
  background-image:url(../images/design/navigation/nav_bgr.jpg);
    background-repeat:repeat-x;
  }

#nav {
  float:left;
  position:relative;
  top:125px;
  padding:0 0 0 5px;
  width:1000px;
  height:43px;
  }

#nav ul {
  margin:0;
  padding:0;
  list-style:none;
  }
  
#nav li {
  float:left;
  position:top;
  margin:0;
  padding:0;
  }
  
#nav a {
  display:block;
  }
  
#nav li:hover, [COLOR=Red]#nav li:hover a {
  background-position:0% -43px;
  }
  
#nav li:hover a {
  background-position:100% -43px;
  }[/COLOR]

du widersprichst dir teilweise selbst.

mal schauen ob ichs mal schnell hinbekomm ein script zu machen....

vanilla

cebito · 15.07.2010

AW: Erstellen einer Navigation mit Hover

Laut deinem obigen code ist dein a-tag leer, warum sollte er sich also breit machen? Irgendwelche Dimensionen sind ja auch nicht explizit angegeben. Dementsprechend ist es auch verständlich, wenn du nix siehst.
Dann ein paar Fragen:

Warum unterscheiden sich von dir hier geposteter und aus deinem Link entnommener code so stark, das ist absolut kontraproduktiv für die Lösung deines Problems!
class=nav a - was soll das für ne Klasse sein? Dann
class="nav a" class="nav li:hover" class="nav li:hover a" - was du da als class angibst schreibst du normal so in der css, die weiß dann schon, das nav li:hover ein li in einem element mit der class oder id nav ist - richtige schreibweise in der css wäre allerdings .nav li:hover bzw. #nav li:hover und
wenn ein Element mehrere Klassen besitzen soll, dann bitte so: class="class1 class2 class3 classX"
Die W3C-Banner da auf die Seite zu setzen ist ja wohl ziemlich anmaßend angesichts der Fehler in der Seite, aber den Links kannst ruhig mal folgen...

fexx · 15.07.2010

AW: Erstellen einer Navigation mit Hover

ja dein problem ist, dass du im link einen <img> ... du musst das wenn dann über den link als background-image machen ... so wie weiter oben schon beschrieben

vanilladragon · 15.07.2010

AW: Erstellen einer Navigation mit Hover

Also... ich hab mal ein Schulprojekt rausgesucht, wo ich genau das umgesetzt habe... hier der Code:

HTML:

Code:

<ul id="navi">
     <li> <a class="button1" href="index.html"></a>  </li>
     <li> <a class="button2"  href="zoo-geschichte.html"></a> 
        <ul>
         <li> <a class="button21"  href="zoo-geschichte.html">  </a> </li>
         <li> <a class="button22" href="afrika.html">  </a> </li>
         <li> <a class="button23" href="asien.html">  </a> </li>
         <li> <a class="button24" href="suedamerika.html">  </a> </li>
         <li> <a class="button25"  href="gruendergarten.html"> </a> </li>
         <li> <a class="button26" href="pongoland.html">  </a> </li>
         <li> <a class="button27" href="gondwanaland.html">  </a> </li>
        </ul>
    </li>
     <li> <a class="button3" href="events.html"></a>  </li>
     <li> <a class="button4" href="shop.html"></a>  </li>
     <li> <a class="button5" href="service.html"></a> 
         <ul>
         <li> <a class="button51" href="preise.html">  </a> </li>
         <li> <a class="button52"  href="oeffnung.html"></a> </li>
         <li> <a class="button53"  href="*********html"></a> </li>
        </ul>
    </li>
     <li> <a class="button6" href="kontakt.html"></a>  </li>
</ul>

CSS:

Code:

/*  *********************************************************************************************  */
/* Navigation */


ul#navi        { width: 900px; height: 70px; }
ul#navi li        { width: 150px; height: 70px; float: left; }
ul#navi a        { display: block; width: 150px; height: 70px; }


/*  *********************************************************************************************  */
/* Buttons first Level */


a.button1:link, a.button1:visited    { background-image:  url(img/menu-pic/home.jpg); }
a.button1:hover                        { background-image:  url(img/menu-pic/home2.jpg); }

a.button2:link, a.button2:visited    { background-image:  url(img/menu-pic/zoo.jpg); }
a.button2:hover                        { background-image:  url(img/menu-pic/zoo2.jpg); }

a.button3:link, a.button3:visited    { background-image:  url(img/menu-pic/events.jpg); }
a.button3:hover                        { background-image:  url(img/menu-pic/events2.jpg); }

a.button4:link, a.button4:visited    { background-image:  url(img/menu-pic/shop.jpg); }
a.button4:hover                        { background-image:  url(img/menu-pic/shop2.jpg); }

a.button5:link, a.button5:visited    { background-image:  url(img/menu-pic/service.jpg); }
a.button5:hover                        { background-image:  url(img/menu-pic/service2.jpg); }

a.button6:link, a.button6:visited    { background-image:  url(img/menu-pic/kontakt.jpg); }
a.button6:hover                        { background-image:  url(img/menu-pic/kontakt2.jpg); }


/*  *********************************************************************************************  */
/* Dropdown */


ul#navi li ul                 { display: none; top: auto; left: auto; }
ul#navi li ul li                { width: 150px; z-index:10;  position:relative; }
ul#navi li:hover ul            { display: block; width: 150px;  position:relative; }


/*  *********************************************************************************************  */
/* Dropdown Buttons second Level*/

/* Menupunkt 2 Dropdown */

a.button21:link, a.button21:visited    { background-image:  url(img/menu-pic/liste/geschichte.jpg); }
a.button21:hover                    { background-image:  url(img/menu-pic/liste/geschichte2.jpg); }

a.button22:link, a.button22:visited    { background-image:  url(img/menu-pic/liste/afrika.jpg); }
a.button22:hover                    { background-image:  url(img/menu-pic/liste/afrika2.jpg); }

a.button23:link, a.button23:visited    { background-image:  url(img/menu-pic/liste/asien.jpg); }
a.button23:hover                    { background-image:  url(img/menu-pic/liste/asien2.jpg); }

a.button24:link, a.button24:visited    { background-image:  url(img/menu-pic/liste/suedamerika.jpg); }
a.button24:hover                    { background-image:  url(img/menu-pic/liste/suedamerika2.jpg); }

a.button25:link, a.button25:visited    { background-image:  url(img/menu-pic/liste/gruendergarten.jpg); }
a.button25:hover                    { background-image:  url(img/menu-pic/liste/gruendergarten2.jpg); }

a.button26:link, a.button26:visited    { background-image:  url(img/menu-pic/liste/pongoland.jpg); }
a.button26:hover                    { background-image:  url(img/menu-pic/liste/pongoland2.jpg); }

a.button27:link, a.button27:visited    { background-image:  url(img/menu-pic/liste/gondwanaland.jpg); }
a.button27:hover                    { background-image:  url(img/menu-pic/liste/gondwanaland2.jpg); }


/* Menupunkt 5 Dropdown */

a.button51:link, a.button51:visited    { background-image:  url(img/menu-pic/liste/preise.jpg); }
a.button51:hover                    { background-image:  url(img/menu-pic/liste/preise2.jpg); }


a.button52:link, a.button52:visited    { background-image:  url(img/menu-pic/liste/oeffnungszeiten.jpg); }
a.button52:hover                    { background-image:  url(img/menu-pic/liste/oeffnungszeiten2.jpg); }


a.button53:link, a.button53:visited    { background-image:  url(img/menu-pic/liste/*********jpg); }
a.button53:hover                    { background-image:  url(img/menu-pic/liste/anfahrt2.jpg); }

Und so funktionierts!

Musst halt nur für dich abstimmen. Wenn fragen sind kannste dich ja melden.

vanilla

Biernase · 15.07.2010

AW: Erstellen einer Navigation mit Hover

cebito schrieb:
Laut deinem obigen code ist dein a-tag leer, warum sollte er sich also breit machen? Irgendwelche Dimensionen sind ja auch nicht explizit angegeben. Dementsprechend ist es auch verständlich, wenn du nix siehst.
Dann ein paar Fragen:

Warum unterscheiden sich von dir hier geposteter und aus deinem Link entnommener code so stark, das ist absolut kontraproduktiv für die Lösung deines Problems!

class=nav a - was soll das für ne Klasse sein? Dann

class="nav a" class="nav li:hover" class="nav li:hover a" - was du da als class angibst schreibst du normal so in der css, die weiß dann schon, das nav li:hover ein li in einem element mit der class oder id nav ist - richtige schreibweise in der css wäre allerdings .nav li:hover bzw. #nav li:hover und

wenn ein Element mehrere Klassen besitzen soll, dann bitte so: class="class1 class2 class3 classX"

Die W3C-Banner da auf die Seite zu setzen ist ja wohl ziemlich anmaßend angesichts der Fehler in der Seite, aber den Links kannst ruhig mal folgen...

Der Code unterschied sich deshalb so stark, da ich in der Zwischenzeit versucht hatte, das selbst in den Griff zu bekommen.

In Klasse "nav a" wurde lediglich display:block definiert.

Ob das mit mehreren Klassen falsch war oder nicht, liegt daran, dass ich das im Internet fand und das einfach ausprobieren wollte.

Störe dich nicht an den Bannern. Sicher hat die Seite derzeit noch Fehler. Aber ich bin ja noch nicht fertig.

Biernase · 15.07.2010

AW: Erstellen einer Navigation mit Hover

vanilladragon schrieb:
Und so funktionierts!

Musst halt nur für dich abstimmen. Wenn fragen sind kannste dich ja melden.

vanilla

Das funktioniert. Danke. Das einzige, was vielleicht etwas störend ist, ist die Zeitverzögerung vom wechseln der Buttons. Ich weiß, dass das nichts mit deinem Code zu tun hat. Aber kann man das irgendwie abstellen?

Und nur der Vollständigkeit halber. Da es bei mir nicht funktionierte, mich das aber interessiert. Wie müßte der Code für die background-position-Version lauten?