Antworten auf deine Fragen:
Neues Thema erstellen

Horinzontales Dropdown Menu

kenodrum

Noch nicht viel geschrieben

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&amp;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

Hat es drauf

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?
 

Myhar

Hat es drauf

AW: Horinzontales Dropdown Menu

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

kenodrum

Noch nicht viel geschrieben

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

Aktives Mitglied

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.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben