Hvordan lage en Roll Meny
Roll menyene er en effektiv metode for å organisere innholdet på nettstedet, noe som gjør nettstedet enklere for brukere å navigere. Web design software omfatter vanligvis verktøy for å lage roll menyer, men disse menyene kan også opprettes ved hjelp av en enkel teksteditor og enten gjennomgripende stilark metoden eller tabeller metoden.
Bruksanvisning
Cascading Style Sheets
1 Sett opp den grunnleggende HTML-dokumentet rammeverk:
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
2 Sett inn følgende kode mellom <head> og </ head> taggene:
<LINK href = "rollovers.css" type = "text / css" rel = "stylesheet">
3 Lag stilarket ved å opprette et nytt tekstdokument med tittelen "rollovers.css."
4 Skriv inn følgende HTML-kode for å skape rom til å inneholde menyen og definere menyen bredde:
<Div id = "list-meny">
</ Div>
list-menyen {
width: 132px;
}
5 Lag meny linker i en uordnet HTML listen:
<Ul>
<Li> <a href="#"> Element </a> </ li>
<Li> <a href="#"> Element </a> </ li>
<Li> <a href="#"> Element </a> </ li>
</ Ul>
6 Fjern innrykk og standard kuler:
list-meny ul {
margin: 0;
padding: 0;
list-style-type: none;
}
7 Definer tekststiler ved å legge til følgende kode i den ovenfor CSS:
font-family: Verdana, arial, sanf-serif;
font-size: 12px;
8 Lag stiler for linkene i menyen:
liste-menyen {
display: block;
width: 120px;
padding: 2px 2 piksler 2 piksler 10px;
border: 1px solid # 000000;
bakgrunn: #dcdcdc;
text-decoration: none;
}
Endre bredde, padding, border, bakgrunn og tekst dekorasjon verdier tilsvarende, avhengig av dine preferanser.
9 Lag roll effekt ved å definere de besøkte, aktive og svever stater for linkene:
list-menyen: link, # liste-menyen: aktiv, # liste-menyen: visited {
color: # 000000;
}
list-menyen: hover {
border: 1px solid # 000000;
bakgrunn: # 333333;
color: # ffffff;
}
tabeller
10 Lag koblinger med hver kobling som finnes i en tabellcelle:
<Div class = "meny">
<Table summary = "" cellpadding = "1" cellspacing = "1" class = "meny">
<Tr>
<Td> <a href="#" onfocus="this.blur()"> Link 1 </a> </ td>
</ Tr>
<Tr>
<Td> <a href="#" onfocus="this.blur()"> Link to </a> </ td>
</ Tr>
<Tr>
<Td> <a href="#" onfocus="this.blur()"> Link 3 </a> </ td>
</ Tr>
<Tr>
</ Table>
</ Div>
11 Angi en stil for tabellen med ønsket bredde:
table.menu et {
width: 125px;
border: 1px solid # 333333;
display: block;
}
12 Angi grunnstil for "div" -menyen klasse:
div.menu et {
color: # 333333;
bakgrunn: #ffffff;
text-decoration: none;
font-size: 11px;
line-height: 16px;
font-family: Tahoma, Verdana, sans-serif;
padding: 2 piksler 5px;
}
Endre farge, bakgrunn, tekst dekorasjon, skriftstørrelse, linjehøyde, skrifttype og padding verdier tilsvarende, avhengig av dine preferanser.
1. 3 Angi koblingen farger og hover stiler for å skape høydepunkt effekt:
div.menu en: link {
color: # 333333;
bakgrunn: # cccc99;
}
div.menu a: active {
color: # 000000;
bakgrunn: # cccc99;
}
div.menu a: besøkte {
color: # 333333;
bakgrunn: # cccc99;
}
div.menu a: hover {
farge: #eeeeee;
bakgrunn: # 333333;
border: 1px solid # 000000;
}