Hvordan lage en rullegardinmeny med to kolonner
Drop-down menyer har blitt et fast innslag i Web-design, gir en ryddig måte å presentere store mengder navigasjonsmuligheter i en kompakt horisontal eller vertikal plass. Det er flere grunner til at du ønsker å bryte nedtrekkslistene i flere kolonner. Hvis din link listene vokser for lang og skjule andre designelementer, eller hvis du ønsker å legge til bilder eller underoverskrifter, flere kolonner er en perfekt løsning. Denne teknikken kan gjennomføres uten bruk av ekstra skript, men det krever en grunnleggende forståelse av HTML og CSS.
Bruksanvisning
1 Lag en beholder for menyen din ved hjelp av en DIV og gi den en spesiell klasse. For eksempel:
<Div class = "meny">
<! - UL går her ->
</ Div>
Klassen av "menyen" skal brukes til å kontrollere hvordan beholderen vises, og for å style den sorterte listen du vil lage neste.
2 Sett inn en uordnet liste (UL) mellom DIV-koder der "<! - UL går her ->" vises i det siste eksempelet. Listen skal inneholde de viktigste navigasjonskoblinger som, når den klikkes, vil produsere rullegardinmenyene. For eksempel:
<Div class = "meny">
<Ul>
<li><a href="link1.html" target="_self">Main Link 1</a></li>
<li><a href="link2.html" target="_self">Main Link 2</a>
<!-- Sub menu goes here -->
</li>
<li><a href="#" target="_self" >Main Item 1</a></li>
</ Ul>
</ Div>
Legg merke til at den andre listepunkt (LI) inneholder en kommentar som indikerer hvor undermeny skal settes inn. Plassere undermenyen liste inni hoved lenken element liste tag vil tillate deg å kontrollere sin synlighet og dele det opp i kolonner.
3 Erstatte "<! - Sub menyen går her ->" kommentere med en uordnet liste med dine undermeny lenker. For eksempel:
<Div class = "meny">
<Ul>
<li><a href="link1.html" target="_self">Main Link 1</a></li>
<li><a href="link2.html" target="_self">Main Link 2</a>
<ul>
<li><a href="sub1.html" target="_self">Sub Link 1</a></li>
<li><a href="sub2.html" target="_self">Sub Link 2</a></li>
<li><a href="sub3.html" target="_self">Sub Link 3</a></li>
<li><a href="sub4.html" target="_self">Sub Link 4</a></li>
<li><a href="sub5.html" target="_self">Sub Link 5</a></li>
<li><a href="sub6.html" target="_self">Sub Link 6</a></li>
</ul>
</li>
<li><a href="#" target="_self" >Main Item 1</a></li>
</ Ul>
</ Div>
4 Legg stiler til stilarket for "meny" klasse eller sette dem inn i dokumentet hodet med "<style>" tags. Din første stil bør definere det generelle utseendet på navigasjonslinjen og font. For eksempel:
.meny{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family: 'Arial', sans-serif;
font-size:16px;
font-weight:bold;
}
5 Gi "ul" style en "list-style" fra ingen til å opprette en vannrett linje. Du må også definere en høyde:
.Menyen ul {
height:35px;
list-style:none;
}
Gi hver main "li" til venstre float:
.Menyen li {
float:left;
}
Ferdig med å legge stiler for hoved navigasjonsmenyen ved å legge en link definisjon. Som et minimum bør din link egenskaper inkluderer følgende:
.Menyen li a {
line-height: 35px;
display:block;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
Den line-height eiendom sentrerer teksten vertikalt i baren mens utfyllingen skaper god plass i mellom hvert ledd. Displayet eiendom "blokk" snur "klikkbare" delen av koblingen i en rektangulær plass for bedre brukeropplevelse.
6 Lag en stil for undermenyen "ul" og gi den følgende egenskaper:
.Menyen li ul {
display:none;
height:auto;
padding:0px;
margin:0px;
position:absolute;
width:450px;
z-index:200;
}
Den absolutte posisjon og z-index er avgjørende for at undermenyen til å vises under hovednavigasjonsfeltet og over toppen av andre designelementer. Ved å definere en bredde, holde deg menyen fra kvalte innholdet.
7 Legg stiler for undermenyen "li" som holder hver undermeny link. Definer en bredde på "50%" for å la dine listeelementer å strømme inn i to kolonner. Husk å gi hver en skjerm eiendom "blokk" så hele raden kan klikkes snarere enn bare tekst.
.Menyen li li {
display:block;
float:left;
margin:0px;
padding:0px;
width:50%;
}
Avslutt med å legge en stil for undermeny liste for å definere font, størrelse, farge, hover atferd og en visning av "blokk".
Hint
- Forbedre menyen ved å bruke en jQuery meny script for å legge grasiøs forsinkelser og hover effekter på menyen.