Horinzontales Dropdown Menu

kenodrum · 02.12.2013

Guten Morgen alle zusammen.
Ich probiere vergeblich ein drop down zu basteln.

Sowohl das Main als auch das Submenu soll Horinzontal angeordnet sein,
Das Submenu soll erscheinen und erst wieder verschwinden wenn man im Main Menu einen anderen Punkt ANKLICKT.

Hier mal ein Beispiel wie ich es mir vom aufbau hervorstelle:
http://www.youtube.com/watch?v=aaDrX6EeBs8

Auf folgender Seite soll es zum einsatz kommen.

<body>
<ul id="navmenu">
<li><a href="#">%main%</a>
<ul class="sub1">
<a href="index.php?site=news">%news%</a>
<a href="index.php?site=news&action=archive">%archives%</a>
<a href="index.php?site=calendar">%calendar%</a>
</ul>
</li>
<li><a href="#">%clan%</a>
<ul class="sub1">
<a href="index.php?site=about">%about_us%</a>
<a href="index.php?site=members">%members%</a>
<a href="index.php?site=clanwars">%matches%</a>
<a href="index.php?site=awards">%awards%</a>
</ul>
</li>
<li><a href="#">%community%</a>
<ul class="sub1">
<a href="index.php?site=forum">%forums%</a>
<a href="index.php?site=guestbook">%guestbook%</a>
<a href="index.php?site=registered_users">%registered_users%</a>
<a href="index.php?site=whoisonline">%who_is_online%</a>
<a href="index.php?site=polls">%polls%</a>
<a href="index.php?site=server">%servers%</a>
</ul>
</li>
<li><a href="#">%media%</a>
<ul class="sub1">
<a href="index.php?site=files">%downloads%</a>
<a href="index.php?site=demos">%demos%</a>
<a href="index.php?site=links">%links%</a>
<a href="index.php?site=gallery">%gallery%</a>
<a href="index.php?site=linkus">%links_us%</a>
</ul>
</li>
<li><a href="#">%miscellaneous%</a>
<ul class="sub1">
<a href="index.php?site=sponsors">%sponsors%</a>
<a href="index.php?site=contact">%contact%</a>
<a href="index.php?site=challenge">%fight_us%</a>
<a href="index.php?site=joinus">%join_us%</a>
<a href="index.php?site=imprint">%imprint%</a>
</ul>
</li>
</ul>
</body>

<style>
* {
margin: 0px;
padding: 0px;
}

ul#navmenu, ul.sub1, {
list-style-type: none;
font-size: 9pt;
}

ul#navmenu li {
width: 125px;
text-align: center;
margin-left: 5px;
margin-top:5px;
margin-bot:5px;
position: relative;
float: left;
margin-right: 4px;
}

ul#navmenu a {
text-decoration: none;
display: block;
width: 125px;
height: 25px;
line-height: 25px;

}

ul#navmenu .sub1 li {
}

ul#navmenu .sub1 a {
margin-top: 5px;
}

ul#navmenu li:hover > a {
background-color:#333;
}

ul#navmenu li:hover a:hover {
background-color:#F60;
color:#FFF;
}

ul#navmenu ul.sub1 {
display:block;
position: absolute;
top: 26px;
left: 0px;
}

ul#navmenu li:hover .sub1 {
display:block;
}

.darrow {
font-size: 11pt;
position: absolute;
top: 5px;
right: 4px;
}

.rarrow {
font-size: 13pt;
position: absolute;
top: 6px;
right: 4px;
}

</style>

Myhar · 02.12.2013

AW: Horinzontales Dropdown Menu

Wenn du möchtest, dass der Menüpunkt bei einem Klick erscheint/verschwindet, musst du das mit JS lösen. Du hast allerdings kein JS gepostet, wie schaut denn dein JS bis jetzt aus? Was hast du schon versucht?

Isometric · 02.12.2013

AW: Horinzontales Dropdown Menu

Eine Lösung ohne JS findest du hier:

Myhar · 02.12.2013

AW: Horinzontales Dropdown Menu

Da ist aber zu sagen, dass das nicht auf klick, wie vom Threadersteller extra betont, funktioniert.

kenodrum · 02.12.2013

AW: Horinzontales Dropdown Menu

jave möchte ich nicht verwenden.
also werde ich auf das mouseover zurückgreifen.

Eine Lösung ohne JS findest du hier:

das sieht garnicht so schlecht aus

Curanai · 02.12.2013

AW: Horinzontales Dropdown Menu

kenodrum schrieb:
jave möchte ich nicht verwenden.
also werde ich auf das mouseover zurückgreifen.

You made my day! :lol:

cebito · 02.12.2013

AW: Horinzontales Dropdown Menu

Curanai schrieb:
You made my day! :lol:

Curanai schrieb:
Menschen sind wie Schnitzel - nicht so lecker, aber manchmal beidseitig bekloppt.

Dem kann ich nur zustimmen. Statt aufzuklären versuchst du ihn lächerlich zu machen. Aber du machst dich damit selbst lächerlich! Guten Morgen Schnitzel!

kenodrum · 02.12.2013

AW: Horinzontales Dropdown Menu

könnte mich vielleicht jemand aufklären... ich bin echt ein neuling in der materie...
ich habe nun mehrere versuche gestartet und ich komme nie zu meinem ergebnis.

P.s. danke das du dich über mich lächerlich machst... für jemanden der scheinbar älter ist als 12 ist dein benehmen echt zweifelhaft... sorry

und danke an alle anderen

Curanai · 02.12.2013

AW: Horinzontales Dropdown Menu

cebito, mein Lieber, vielleicht einfach nicht so maßlos übertreiben, da "lächerlich machen" (selbst der Versuch) schlichtweg viel zu weit weg ist und noch weniger meine Intention war. Von daher wäre ich Dir sehr verbunden, persönliche Anfeindung bitte zu unterlassen - allein schon im Interesse des Forenbetriebs.

Was mein "Benehmen" anbelangt, kenodrum, solltest Du Dir aufgrund "eines Satzes" gar kein Bild aneignen können. Ich erlaube mir aufgrund Deiner Präsentation auch kein "Bild" ... demnach: ruhig und besonnen sein!

Zu obigem ...

- UL richtig benutzen (valider Quellcode ist für die Ausführung im Browser schon nicht unerheblich)
- "mouseover" ist ein Gestaltungselement auf Internetseiten. Ein in HTML-Quellcode integriertes JavaScript-Element bewirkt, dass sich ein bestimmtes Element auf einer Website (meistens grafisch) verändert, falls der Benutzer mit der Maus über das Objekt fährt.
- Java != Javascript (s. hier)

Nachdem Du, kenodrum, also Deine ULs korrigiert und formatiert hast, helfe ich Dir auch gern weiter ...

Allen einen angenehmen Abend.