Inhalt

• Ze trëppelen
• Deel 1 vun 2: HTML schreiwen
• Deel 2 vun 2: Schreiwen vum CSS
• Tipps

Mat engem Dropdown-Menü erstellt Dir e kloren an hierarcheschen Iwwerbléck vun alle wichtegen Deeler op der Säit an den Ënnersektiounen déi d'Säit enthält. Dir musst just Är Maus iwwer d'Haaptabschnitte réckelen fir datt d'Sub Sektiounen erschéngen. Dir kënnt en Dropdown-Menü erstellen mat nëmmen HTML an CSS.

Ze trëppelen

Deel 1 vun 2: HTML schreiwen

1. Erstellt Är Navigatioun Sektioun. Normalerweis benotzt Dir nav> fir d'Websäitebreet Navigatiounsbar, Header> fir méi kleng Linksektiounen déi Säitebundet sinn, oder div> wa keng aner Optioun schéngt ze passen. Setzt dëst an engem Div> Element fir datt Dir de Stil vum Container an dem Menu selwer upasse kënnt.
   • div>
   • nav>
   • / nav>
   • / div>
2. Gitt all Sektioun e Klassattribut. Mir benotzen d'Klassattribut méi spéit fir de Stil vun dësen Elementer mam CSS z'änneren. Gitt esouwuel de Container wéi och de Menü en eegent Klassattrib.
   • div>
   • nav>
   • / nav>
   • / div>
3. Füügt eng Lëscht mat Menüartikelen derbäi. Déi onbestellten Lëscht (ul>) enthält d'Elementer vum Haaptmenu (Lëschtelementer li>), wann de Benotzer seng Maus driwwer réckelt, da gesäit hien / si d'Dropdown-Menüen. Füügt d'Klass "clearfix" an Äert Lëschtelement bäi; mir komme méi spéit dozou an der CSS Tabelle.
   • div>
   • nav>
   •       ul>
   •          li> Heem / li>
   •          li> Mataarbechter
   •          li> Kontakt
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Links bäisetzen Wann dës Top-Niveau Menüelementer och op hir eege Säiten verknäppt sinn, kënnt Dir elo d'Links setzen. Link op en net existent Anker (sou wéi "#!") Och wann se näischt matenee verbannen, sou datt de Cursor vum Benotzer anescht ausgesäit. An dësem Beispill féiert de Kontakt néierens, awer déi aner zwee Menüelementer maachen:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Doheem/ a>/ li>
   • li>a href = "/ Mataarbechter">Mataarbechter/ a>
   • / li>
   • li>a href = "#!">Kontakt/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
5. Erstellt Ënnelëschte fir d'Dropdown Elementer. Nodeems de Stil erstallt gouf, bilden dës Lëschten den Dropdown Menu. Setzt d'Lëscht an d'Lëschtartikel op déi de Benotzer d'Maus maust. Füügt e Klassenattrib an e Link bäi wéi fréier.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Home / a> / li>
   • li> a href = "/ Mataarbechter"> Mataarbechter / a>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Kontakt / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Rapport e Problem / a> / li>
   •             li> a href = "/ support"> Clientssupport / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

Deel 2 vun 2: Schreiwen vum CSS

1. Öffnet Äert CSS Stylblatt. Post e Link op Äert CSS Stylesheet an der Head Sektioun vun Ärem HTML Dokument wann de Link net schonn do ass. An dësem Artikel wäerte mir d'Basis vun CSS net behandelen, wéi zum Beispill eng Schrëft an Hannergrondfaarf setzen.
2. Füügt Clearfix Code bäi. Denkt drun datt Dir de "clearfix" Klass an d'Menüslëscht bäigefüügt hutt? Normalerweis hunn d'Elementer vum Dropdown-Menü en transparenten Hannergrond, wat et erlaabt aner Elementer ze réckelen. Eng einfach Upassung un d'CSS kann dëse Problem léisen. Hei ass eng flott, séier Léisung, och wann et am Internet Explorer 7 a fréiere net funktionnéiert:
   • .clearfix: no {
   • Inhalt: "";
   • uweisen: Dësch;
   • }
3. Erstellt de Basis Design. Mat dësem Code kënnt Dir Äre Menü uewen op der Säit plazéieren an d'Dropdown Elementer verstoppen. Dëst ass ganz einfach am Zweck, sou datt mir eis op de relevante Code konzentréiere kënnen. Dir kënnt et spéider mat zousätzlechem CSS Code änneren, wéi Padding a Margin.
   • .nav-Wéckler {
   • Breet: 100%;
   • Hannergrond: # 008B8B;
   • }
   •  
   • .nav Menü {
   • Positioun: relativ;
   • uweisen: inline-block;
   • }
   •  
   • .submenü {
   • Positioun: absolut;
   • uweisen: keen;
   • Hannergrond: # 555;
   • }
4. Maacht d'Dropdown Elementer erschéngen wann Dir Är Maus iwwer hinnen hält. D'Elementer an der Dropdown Lëscht sinn elo gesat sou datt se net gewise ginn. Hei ass wéi Dir eng ganz Ënnerlëscht erschénge kënnt soubal Dir iwwer den "Elterendeel" schwieft:
   • .nav-Menu ul li: hover> ul {
   • uweisen: blockéieren;
   • }
   • Notiz - wann zousätzlech Menüen an de Menüelementer am Dropdown-Menü verstoppt sinn, gëllen d'Eegeschafte déi hei bäigesat ginn op all Menüen. Wann Dir nëmmen de Stil op den éischten Niveau vun den Ausklappmenüe gëlle wëllt, benotzt ".nav-menu> ul" amplaz.
5. Gitt mat engem Pfeil un datt et en Dropdown Menu gëtt. Webdesigner weisen normalerweis mat engem Down Pfeil datt en Element en Dropdown Menu opmaacht. Dëse Code füügt dee Pfeil zu all Element an Ärem Menü bäi:
   • .nav Menu> ul> li: no {
   • Inhalt: " 25BC"; / * entkomm unicode fir de Pfeil erof * /
   • Schrëftgréisst: .5em;
   • uweisen: blockéieren;
   • Positioun: absolut;
   •    }
   • Notiz - Ajustéiert d'Positioun vum Pfeil mat den Eegeschaften uewen, ënnen, riets oder lénks.
   • Opgepasst - Wann net all Är Menüelementer Dropdown hunn, ännert net d'Erscheinung vum ganze Klass nav Menu. Amplaz, füügt eng aner Klass (wéi zB Dropdown) bei all Li Element bäi, wou Dir e Pfeil wëllt. Kuckt dës Klass am Code hei uewen.
6. Ajustéiert d'Polsterung, den Hannergrond an aner Eegeschaften. De Menu soll elo funktionnéieren, awer et ass nach net ganz schéin. Mat den Eegeschaften am CSS kënnt Dir personaliséiere wéi all Klass oder Element ausgesäit a wou se sinn.

Tipps

• Wann Dir en Dropdown Menu zu enger Form wëllt addéieren, ass et ganz einfach an HTML5 mam Element wielt>.
• De Link a href = "#"> scrollt uewen op der Säit, an e Link deen op en net existent Anker weist, wéi en href = "#!">, Scrollt net. Wann dat ze schlëmm fillt, kënnt Dir änneren wéi de Cursor mat CSS ausgesäit.
• Wann Dir de Proufcode kopéiert a pecht, da gitt all Kugelen ewech.