Dropdown Menü only CSS

Gehe zu Seite:

Geschlossen

Di. 18.06.2013 20:01 Uhr #1

Boy83Ol Mitglied

Registriert seit
23.01.2008

Beiträge
395

Beitragswertungen

Hallo und Guten Abend !

Wie schon zu lesen ist will ich meine Navigation die mit Link und Image ist als Dropdown Menü machen in reinem CSS jemand evtl. ein kleinen Tipp wie ich das am besten umsetzen kann?

LG
Boy83Ol

verwendete ilchClan Version: 1.1 P

betroffene Homepage: xite.gameserver2go.de/ilch/

Gestern noch zu blöd, den Computer einzuschalten,
heute schon die eigene Homepage
0 Mitglieder finden den Beitrag gut.
- zitieren
Di. 18.06.2013 20:18 Uhr #2

Revolution Hall Of Fame

Registriert seit
14.08.2006

Beiträge
1.688

Beitragswertungen

Vielleicht hilft dir das
line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu
externer Link

Kreativ, modern, Conversion und Usability optimiert
individuelles Webdesign für ein optimales Erscheinungsbild
404studios
1 Mitglieder finden den Beitrag gut.
- zitieren

Mi. 19.06.2013 12:15 Uhr #3

WDTeamWarLord Mitglied

HTML-Struktur:

<ul>
<li><a href="#">Willkommen</a></li>
<li><a href="#">Über uns</a>
   <ul>
     <li><a href="#">Clan</a></li>
     <li><a href="#">History</a></li>
     <li><a href="#">Member</a></li>
   </ul>
</li>
<li><a href="#">Server</a>
   <ul>
     <li><a href="#">Eins</a></li>
     <li><a href="#">Zwei</a></li>
     <li><a href="#">Drei</a></li>
   </ul>
</li>
<li><a href="#">Impressum</a></li>
</ul>

CSS

Formatierungsmerkmale entfernen

#navi, #navi ul { list-style-type:none; margin:0; padding:0; }

Oberpunkte (Willkommen, Über uns, Server, Impressum) in Form bringen

#navi li { width:128px; float:left; }

Aufklappfunktion mit CSS

Um das Auf- und Einklappen des Menüs realisieren zu können, benutzen wir einfach die Pseudoklasse :hover.

#navi li ul { display:none; } 
#navi li:hover ul { display:block; }

Quelle:KLICK

WDesign

0 Mitglieder finden den Beitrag gut.

zitieren

Fr. 28.06.2013 13:03 Uhr #4

Kern Mitglied

Registriert seit
28.06.2013

Beiträge
1

Beitragswertungen

Hallo Boy83Ol,

habe hier auch noch zwei recht schöne Tutorials gefunden.
Werden dir hoffentlich weiterhelfen!

designyourweb.info/so-gehts-ein-schlankes-css3-dropdown-menu-erstellen/346

shailan.com/2713/create-a-dropdown-menu-using-css3-transitions/

Grüße aus Frankfurt :-)
0 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » HTML, PHP, SQL,... » Dropdown Menü only CSS