30.12.2008, 13:26
|
|||
|
|||
Css Tree Fly Menu
Hallo, Leute
Euch allen erstmal ein nachträgliches Frohes Weihnachtsfest und eine ein vorträgliches Frohes Neues  Ich habe da ein kleines GROSSES Problem mit einem Css Menu welches ich gerne erstellen möchte. Ich habe erstmal eine Tabelle mit einer Spalte und 10 Zeilen. In jeder dieser Zeilen habe ich ein Rollover Bild gesetzt. Das Funktioniert auch super. Dann wollte ich, dass wenn mann über ein bestimmtes Rollover Bild ist, dass sich wie bei einem DropDown Menu, nur halt jetzt zur Seite ein Submenu erscheint. Ich habe schon wircklich Stunden mit Tutorials verbracht, diese sch.... hinzukriegen, aber ich hätte nie gedacht das ich so große Probleme kriegen würde  Zwei Bilder sind im Anhang, wie das ganze ohne :Hover und mit aussieht. So sieht das ganze schriftlich aus: HTML-Code:
<sub class="fly"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','pics/menu verein_over.png',1)"><img src="pics/menu/verein.png" name="Image2" width="150" height="23" border="0" id="Image2" /></a> <ul> <li><a href="#nogo">Cyclorana</a></li> <li><a href="#nogo">Litoria</a></li> <li><a href="#nogo">Nyctimystes</a></li> </ul> </sub> Code:
.fly {list-style-type:none;}
ul {display:none;}
sub:hover ul{
display:block;
}
Danke im voraus für Eure Mühe  Mfg Thiago 
|
| Sponsored Links |
|
30.12.2008, 16:27
|
|||
|
|||
Du verwendest das falsche Element. <sub> hilft Dir nicht weiter.
Verschachtelte Listen gehen so: HTML-Code:
<ul> <li><a></a></li> <li><a></a> <ul> <li><a></a></li> </ul> </li> </ul> http://www.cssplay.co.uk/menus/flyout4.html Mit dem Quelltext spielen und das Copyright beachten
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte Geändert von andir (30.12.2008 um 16:29 Uhr) Grund: Link geändert
|
| Sponsored Links |
|
30.12.2008, 17:33
|
|||
|
|||
|
Muss ich eine
Code:
<div class="menu">
|
|
30.12.2008, 20:22
|
|||
|
|||
|
Nein. Du kannst die KLasse nennen wie du willst oder auch keine Klasse vergeben. Du kannst auch ul eine Klasse vergeben.
Erst in CSS 3 wird es ein Element mit <menu> geben und das dauert noch einige Jahre.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
30.12.2008, 20:27
|
|||
|
|||
|
OKay Danke!
Ich habe jetzt das falsche <sub> durch das richtige <li> ersetzt. Nach unten wird es jetzt aufgeklappt und wieder zugeklappt. Ich möchte aber, dass das Submenu nach Rechts sich öffnet. Wie muss ich dass dann mit der position und so machen?
|
|
30.12.2008, 20:39
|
|||
|
|||
|
Lies meinen Link und schau Dir da die Auszeichnungen an.
Am besten ist, zu versuchst das Menü in einer Testseite zu übernehmen. So verstehst Du die Struktur am besten und das dauert kaum mehr als 15 Minuten. Die Menüs von Stu Nicholls sind erprobt und wenn nicht, gibt er an wo es nicht funktioniert.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
30.12.2008, 20:46
|
|||
|
|||
|
Danke, bin sehr weiter gekommen. Danke
Aber ich habe glaube ich noch einen kleinen Fehler, nur wo? Vielleicht liegt das daran, weil ich ja in einer Tabelle arbeite. HTML-Code:
<td align="middle" valign="top"><li class="fly"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','pics/menu/verein_over.png',1)"><img src="pics/menu/verein.png" name="Image2" width="150" height="23" border="0" id="Image2" /></a> <ul> <li><a href="#nogo">Cyclorana</a></li> <li><a href="#nogo">Litoria</a></li> <li><a href="#nogo">Nyctimystes</a></li> </ul> </li> </td> Code:
ul {
visibility:hidden;
position:relative;
top:-27px;
left:150px;
padding:8px;
margin:0;
list-style:none;
height:auto;
background:#fff;
border:1px solid #3a93d2;
white-space:nowrap;
z-index:500;
}
li:hover ul{
visibility:visible;
height:auto;
}
Ich habe da eine riesiege große Lücke zwischen den RollOver Buttons. Woran liegt das? Geändert von thiagojonas (30.12.2008 um 20:53 Uhr)
|
|
30.12.2008, 21:10
|
|||
|
|||
|
Habe es selber gelöst.
Einfach in der Klasse "fly" "height" auf die Buttonhöhe gesetzt  Danke für die Hilfe!
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| brauche Hilfe bei Erstellung eines Menüs mit CSS | R.Carlos | CSS | 1 | 11.04.2011 23:04 |
| CSS Flyout Menu z-index Problem? | Deluxestyler | CSS | 6 | 18.05.2010 13:05 |
| Horizontales menü Nach unten aufklappbar | franjob | CSS | 3 | 24.06.2009 14:51 |
| CSS Menu - active Seite hervorheben | celine70 | CSS | 2 | 20.12.2008 00:59 |
Linear-Darstellung
