HTML kode for flere IRLS i en rullegardinmeny
Opprette en rullegardinnavigasjonsmeny for et nettsted innebærer lime HTML-koder i HTML-dokumentet for siden der du vil at menyen skal vises. Legge til flere webadresser til menyen, som gir besøkende som klikker hver opsjon flere navigeringsalternativer, innebærer en enkel manipulering av den grunnleggende HTML-kode som består av sidene i menyen.
Grunnleggende HTML-kode
Den grunnleggende HTML-kode for en rullegardinmenyen bruker "List" og "uordnet liste" HTML-koder, noe som skaper en hierarkisk ordning av koblinger delt inn i hoved "foreldre" og gjemt "barn" alternativer bare vises når du klikker den overordnede valget . Et eksempel HTML-kode for en drop-down menyen er som følger:
<Ul id = "nav">
<Li>
<a href="#"> første rullegardin Tab </a>
<Ul>
<Li> <a href="/index.html"> Hjemmeside </a> </ li>
<li><a href="photography.html">Photography</a></li>
</ Ul>
</ Li>
</ Ul>
Den overordnede alternativet vises bare bak "List" eller <li> tag, mens barn alternativer vises i "List" koder i "uordnet liste" eller <ul> -elementer.
Legge til flere nettadresser og Tabs
For å legge til en ekstra menykategori, bare lage en ny forelder <li> element, som i dette eksempelet:
<Ul id = "nav">
<Li>
<a href="#"> første rullegardin Tab </a>
<Ul>
<Li> <a href="/index.html"> Hjemmeside </a> </ li>
<li><a href="photography.html">Photography</a></li>
</ Ul>
</ Li>
<Li>
<a href="#"> andre rullegardin Tab </a>
<Ul>
<Li> <a href="/contact.html"> Kontakt </a> </ li>
<li><a href="testimonials.html">Testimonials</a></li>
</ Ul>
</ Li>
</ Ul>
For å legge til tillegg elementer til en eksisterende fane, legge til et nytt barn <li> element til kategorien, som så:
<Li>
<a href="#"> første rullegardin Tab </a>
<Ul>
<Li> <a href="/index.html"> Hjemmeside </a> </ li>
<li><a href="photography.html">Photography</a></li>
<li><a href="/contact.html">Contact</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
</ Ul>
</ Li>
Hvor du lime inn koden
Når du har samlet inn koden for menyen og webadressene som du vil at den skal koble i en tekst eller kode editor, limer den inn i HTML eller PHP dokument for siden der du vil legge til det. Koden skal gå like bak <head> -taggen slik at den vises i websiden. Innhold du limer innenfor eller før <head> -taggen ikke vises på siden, men bare i HTML selv. Lagre HTML-dokumentet, men ikke forhåndsvise websiden ennå.
Endre Meny Utseende
Endre menyen utseende innebærer å bruke stilark eller "CSS" kode for å endre farge, skrift den bruker og, faktisk, for å gi menyen - som ellers ville fremstå som en datatabell - rullegardinmenyen funksjonalitet . Et eksempel på CSS-kode for å bruke, som du limer inn i style.css dokumentet for siden din, vises nedenfor som det gjør på nettet høflighet av koding ressurs CSS Wizardry:
/
------------------------------------ \
NAV
* ------------------------------------ * /
nav {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
/ Clear flyter /
float: left;
width: 100%;
/ Bring nav over alt annet - uncomment hvis nødvendig.
position: relative;
z-index: 5;
/
}
nav li {
float: left;
margin-right: 10px;
position: relative;
}
nav et {
display: block;
padding: 5px;
farge: #fff;
bakgrunn: # 333;
text-decoration: none;
}
nav a: hover {
farge: #fff;
bakgrunn: # 6b0c36;
text-decoration: underline;
}
/ --- DROPDOWN --- /
nav ul {
bakgrunn: #fff; / Legge til en bakgrunn som gjør dropdown arbeidet skikkelig i IE7 +. Gjør dette så nær siden din bakgrunn som mulig (dvs. hvit side == hvit bakgrunn). /
bakgrunn: RGBA (255,255,255,0); / Men! La oss gjøre bakgrunnen helt transparent der vi kan, vi ikke egentlig ønsker å se det hvis vi kan hjelpe det ... /
list-style: none;
position: absolute;
venstre: -9999px; / Skjul off-screen når du ikke trenger (dette er mer tilgjengelig enn display: none;) /
}
nav ul li {
padding-top: 1px; / Presenterer en padding mellom li og en gi illusjon fordelt elementer /
float: none;
}
nav ul et {
white-space: NOWRAP; / Stopp tekstbryting og skape flere linjer dropdown elementer /
}
nav li: hover ul {/ Vis dropdown på hover /
venstre: 0; / Bring tilbake på skjermen ved behov /
}
nav li: hover et {/ Disse skaper vedvarende hover statene, noe som betyr at den øverste linken forblir "svevet" selv når markøren har flyttet ned på listen /. bakgrunn: # 6b0c36;
text-decoration: underline;
} nav li: hover ul et {/
Den vedvarende hover Staten har imidlertid skape en global stil for linker selv før de svevde. Her angre vi disse effektene. /
text-decoration: none;
}
nav li: hover ul li a: hover {/ Her vi definere de mest eksplisitte hover stater - hva skjer når du holder hver enkelt link /. bakgrunn: # 333;
}
Endre farge, skrift og bilde verdier innenfor denne eksempelkoden for å tilskrive ønskede stilistiske egenskaper til rullegardinmenyen på siden din. Lagre CSS dokumentet, og deretter åpne siden i en ny fane eller et vindu for å forhåndsvise det.