• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Drop Down Navi mit Bildern

D

Darkness

Neues Mitglied
Hi,

ich hab vor eine Drop Down Navi zu machen (mit :hover und JavaScript-Stück für IE6). Allerdings würde ich gerne Bilder anstatt Text (oder sogar beides) verwenden.

Meine Idee war es nun dazu mit :hover jeweils den Hintergund von Tabellen zu ändern. Das funktioniert bei meinen Veruschen auch soweit, allerdings muss ich nun für jeden EIntrag im Menü eine eigene Tabelle und ne zugehörige Klasse/ID anlegen.

Hat jemand eine Idee wie es einfacher geht (am liebsten mit CSS)? Danke schon mal!
 
Normalerweise verwendet man für ein Dropdown eine Liste und keine Tabelle.

Wenn du für jeden Link die gleiche Hintergrundgrafik verwendest (bzw. je eine für a:link und eine für a:hover) und diese mit unterschiedlichem Text versiehst, dann geht das einheitlich für alle Links.

Verwendest du dagegen für jeden Link eine gesonderte Grafiki, dann wist du um eine entsprechende Anzahl von Klassen wohl nicht umhin kommen.

Weitere Möglichkeit:
Du verzichtest auf eine gesonderte Hover-Darstellung und bindest die Grafiken in den Link ein.
 
Hi,

danke schon mal, hab mich aber etwas schlecht ausgedrück fällt mir grad auf...;-)

ich benutzte natürlich schon Listen für das Menü, und in jeden Listenpunkt hab ich dann eine Tabelle eingefügt um den Hintergrund zu ändern. Das mit der Hintergrundgrafik für die Links direkt ändern hätte aber das Problem, dass die aufklappenden Menüpunkte jeweils nur so groß wären wie der Text, oder? Daher hab ich nehm Tabellen verwendet, weil ich bei denen gleich die Größe angeben kann.

Wenn ich die Grafik in den Link direkt einfüge habe ich aber keinen mouseover-effekt, oder?

Gruß
Darkness
 
Danke, hat schon mal geholfen :-)

nur hab ich jetzt ein leicht anderes Problem. Ich möchte mit "height" die Höhe des Hauptnavigationseintrags bestimmen, dachte ich mach das so:

Code: 
<style type="text/css">
 
   .navi, .navi ul { list-style-type:none; margin:0; padding:0; text-align: center;}
   .navi li { width:128px; float:left; background-color:yellow;}
   .navi li ul { display:none; }
     .navi li:hover ul { display:block; }
     .navi ul li {height:100px;}
 
</style>


Code: 
<table align="center"><tr><td>
   <ul class="navi">
      <li><a href="#">Thema1</a>
     <ul>
      <li><a href="#">Menü1</a></li>
      <li><a href="#">Menü2</a></li>
      <li><a href="#">Menü3</a></li>
     </ul>
    </li>
    <li><a href="#">Thema2</a>
     <ul>
      <li><a href="#">Menü1</a></li>
      <li><a href="#">Menü2</a></li>
      <li><a href="#">Menü3</a></li>
     </ul>
    </li>
    <li><a href="#">Thema3</a>
     <ul>
      <li><a href="#">Menü1</a></li>
      <li><a href="#">Menü2</a></li>
      <li><a href="#">Menü3</a></li>
     </ul>
    </li>
   </ul>
  </td></tr></table>



Mein Problem ist jetzt aber, dass durch den letzten css-Eintrag (.navi ul li {height:100px;}) anstatt des Hauptpunktes jeweils die Unterpunkte (also das aufklappende Menü) diese Höhe haben.

Wo liegt mein Denkfehler?
 
Danke :-)

hab jetzt noch zwei weitere Fragen:

1. warum funktioniert das nicht mit
Code: 
.navi ul li {height:100px;}
? Ist eigentlich nur für mein Verständnis die Frage.

2. Jetzt habe ich das Problem, dass das aufklappende Menü im Hauptmenüpunkt selbst drin liegt. Wie verschiebe ich das aufklappende Menü nach unten? Habe es mit top, und margin-top probiert:
Code: 
.navi li ul li {height:auto; top:120px;}
hat aber nicht funktioniert...
 
muss meine 2. Frage nochmal korrigieren ;-)

margin-top funktioniert doch, wenn die Liste dadurch aber außerhalb der height liegt wird sie nicht mehr dargestellt. WIe kann ich sie trotzdem anzeigen lassen? Danke schon mal!
 
Du willst etwas darstellen das größer ist als das Elternelement?

Dann musst du folgendes ins CSS machen.

Code: 
Elementdaszukleinist
{
overflow:visible;
}
MfG
 
funktioniert leider nicht. Mein css sieht momentan so aus:

Code: 
.navi, .navi ul { list-style-type:none; margin:0; padding:0; text-align: center;}
   .navi li { width:128px; float:left; background-color:yellow; margin-right:32px;}
   .navi li ul { display:none; }
     .navi li:hover ul { display:block;}
     .navi li {height: 100px; overflow:visible;}
     .navi li ul li {height:auto; margin-top:70px; overflow:visible;}

(hab den overflow in den letzten beiden anweisungen dazugemacht, hatte aber leider keine auswirkung auf die seite...)
 
Ich hab jetzt alles hinbekommen, nur schaff ich es nicht für jeden unterlistenpunkt (ul li ul li) einen eigenen hover-Hintergrund zu machen. Mein Ansatz war:

css:
Code: 
.navi1 li ul li {height:auto; background-image:url(neu1u.jpg);background-repeat:no-repeat; float:left;}
.navi2 li ul li {height:auto; background-image:url(neu2u.jpg);background-repeat:no-repeat; float:left;}
.navi3 li ul li {height:auto; background-image:url(neu3u.jpg);background-repeat:no-repeat; float:left;}
.navi1 li ul li:hover {height:auto; background-image:url(neu1m.jpg);background-repeat:no-repeat; float:left;}
.navi2 li ul li:hover {height:auto; background-image:url(neu2m.jpg);background-repeat:no-repeat; float:left;}
.navi3 li ul li:hover {height:auto; background-image:url(neu3m.jpg);background-repeat:no-repeat; float:left;}


html:
HTML: 
<ul class="navi">
      <li><a href="#"><br><br><br><br>Thema1</a>
     <ul>
      <li class="navi1"><a href="#">Menü1</a></li>
      <li class="navi2"><a href="#">Menü2</a></li>
      <li class="navi3"><a href="#">Menü3</a></li>
     </ul>
    </li>
    <li><a href="#"><br><br><br><br>Thema2</a>
     <ul>
      <li style="margin-top:5px;"><a href="#">Menü1</a></li>
      <li><a href="#">Menü2</a></li>
      <li><a href="#">Menü3</a></li>
     </ul>
    </li>
    <li><a href="#"><br><br><br><br>Thema3</a>
     <ul>
      <li style="margin-top:5px;"><a href="#">Menü1</a></li>
      <li><a href="#">Menü2</a></li>
      <li><a href="#">Menü3</a></li>
     </ul>
    </li>
   </ul>


(Die navi-Klasse hab ich der Übersichtlichkeit jetzt nicht mithingeschrieben.)

wo liegt mein Fehler? So wird nur der Hintergund vom navi-Teil angezeigt. Mach ich keine Extraklassen navi1/2/3 sondern nur
Code: 
li ul li {height:auto; background-image:url(neu1u.jpg);background-repeat:no-repeat; float:left;}
   li ul li:hover {height:auto; background-image:url(neu1m.jpg);background-repeat:no-repeat; float:left;}
funktioniert es, aber ich bekomme für jeden Listenpunkt natürlich den selben Hintergund... Kann mir jemand helfen?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben