Hvordan bygge en nettside med undermeny programvare
Bygge en web-menyen er enkel og krever minimalt med programmering kompetanse. Dette er mulig på grunn av innsatsen til mennesker som har delt sine løsninger i artikler og gratis programvarepakker. Det er mange alternativer tilgjengelig, vanligvis stole på standard tekstbasert web HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), oppmerking og styling.
Bruksanvisning
Bygg ditt menyer og undermenyer
1 Opprett en HTML-side for innholdet. Du gjør dette ved å lage en enkel tekstside med en .html, som gir den grunnleggende strukturen for et dokument med HTML markup:
<Html>
<head>
& Lt; / head>
& Lt; body>
& Lt; body>
<Html>
2 Skriv en disposisjon for nettstedet ditt innhold. Start med å liste opp de viktigste delene som vises på det første nivået av nettstedets navigeringsmenyen. Så for hver av elementene i hovedliste, opprette en undermeny med de viktigste temaene som skal vises under den. Du kan fortsette denne prosessen for så mange nivåer som du vil.
3 Lag en liste element for hvert semester som vises i oversikten. Du gjør dette ved å sette HTML-listepunkt tags (<li>) rundt ordene som brukeren kan velge. For eksempel, "<li> Om oss </ li>" skaper et menyelement.
4 Legg inn et hovedmenyen til kroppen av html dokumentet, ved hjelp av en uordnet liste (<ul>) med en id-attributt som angir at vedlagte innholdet skal presenteres som en meny.
<Html>
<head>
& Lt; / head>
& Lt; body>
& Lt; ul id = "nav">
& Lt; / ul>
& Lt; body>
<Html>
5 Plasser listeelementene for hovedmenyen mellom sine ul tags:
<Ul id = "nav">
<li>Home</li>
& Lt; li> Artikler & lt; / li>
& Lt; li> Blogg & lt; / li>
& Lt; li> Foto & lt; / li>
& Lt; li> Om oss & lt; / li>
</ Ul>
6 Lag lister for hver undermeny som HTML-sorterte lister (<ul>) og plassere den aktuelle listeelementene innenfor hver enkelt. For eksempel undermenyen for en typisk "Om oss" -delen er:
<Ul>
<li>Our People</li>
& Lt; li> Vår historie & lt; / li>
& Lt; li> Kontakt oss & lt; / li>
</ Ul>
7 Legg linkene til menysystemet ved å plassere HTML ankerkoder (<a>) rundt hvert av ordene fra listeelementet koder. Du angir "#" (den gjeldende siden) som URL å besøke når brukeren klikker. For eksempel markeringen for "Om oss" element blir: "<li> <a href="#"> Om oss </a> </ li>". Koblingen til den gjeldende siden vil produsere noen synlige tiltak uten mer koding innsats.
8 Lag meny- og undermeny relasjoner ved å plassere undermeny lister innsiden av ankerkoder for de aktuelle overordnede vilkår. Dette angir undermenyvalg skal vises når koblingen er klikket. For eksempel angir følgende sidene som gir informasjon "Om oss":
<li><a href="#">About Us
& Lt; ul>
& Lt; li> & lt; a href = "#"> Våre People & lt; / a> & lt; / li>
& Lt; li> & lt; a href = "#"> Vår historie & lt; / a> & lt; / li>
& Lt; li> & lt; a href = "#"> Kontakt oss & lt; / a> & lt; / li>
& Lt; / ul>
& Lt; / a> & lt; / li>
Style Drop-Down Menu
9 Opprett en gjennomgripende stilark (CSS) for å angi utseendet på menyen. Du gjør dette ved å lage en enkel tekstside med en "Css" forlengelse, for eksempel "menu.css". Inkluder stilark i HTML-dokumentet ved å sette inn en link tag i hodet av dokumentet:
<head>
& Lt; link href = "menu.css" rel = "stylesheet" type = "text / css">
& Lt; / head>
10 Angi stiler for hovedmenyen (#nav) og alle undermenyene (UL) vedlagt i den. Følgende innstillinger fjerne standard padding, marger og styling fra listeelementene som brukes i menyen. Dette skaper et rent rulleblad for å bruke den valgte menyen stil.
nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
11 Angi stiler for alle hyperkoblinger (a) vedlagt i menyen (#nav).
Følgende kode instruerer nettleseren for å vise koblingen som en blokk i en bestemt bredde.
I dette tilfellet er bredden angitt i "em" enheter som angir enheter i forhold til dagens standard skriftstørrelse (1em). Innstillingen av 10em er ti ganger størrelsen på standardskriften.
nav et {
display: block;
width: 10em;
}
12 Angi stiler for alle meny- og undermeny elementer vedlagt i menyen. Følgende kode etablerer bredden av blokken som inneholder menyen linken og instruerer nettleseren for å vise menyen så langt til venstre som mulig før den treffer tidligere vist innhold grenser.
nav li {
float: left;
width: 10em;
}
1. 3 Angi stiler som er spesifikke for undermenyer (ul) i hovedmenyen (#nav). Følgende kode er hva skjuler undermenyene til brukeren svever over moder sikt. Øverst til venstre i det synlige området av et HTML-element har koordinatene "0,0". Ved hjelp av en stor negativ koordinere for venstre kant av undermenyene effektivt skjuler dem når de ikke er i bruk.
nav li ul {
position: absolute;
width: 10em;
venstre: -999em;
}
14 Re-sette den tilhørende undermenyen til standardposisjon når brukeren svever over et menyelement. Dette vil føre til undermenyen til "magisk" dukke opp igjen på et synlig sted og forsvinner når brukeren beveger seg på.
nav li: hover ul {
left: auto;
}
Forbedre ditt Meny
15 Legg til ekstra styling å støtte logikk nestet undermenyer. Du må lage regler som spesifikt gjenspeiler hver dybde av HTML-element hekkende. Følgende kode håndterer tre nivåer av hekkende. Hvert nivå blir stadig mer komplisert:
nav li: hover ul ul, #nav li: hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
nav li: hover ul, #nav li li: hover ul, #nav li li li: hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
16 Velg et meny løsning som enkelt kan tilpasses din søknad med minimal endring. En løsning vil inkludere CSS stilark som adresserer estetiske kvaliteter, for eksempel farge og font utseende. Enda viktigere, bør den inneholde Javascript-kode som implementerer sofistikerte atferd og justerer for spesifikke nettleseren har begrensninger og bugs.
17 Følg instruksjonene for den pakken du har valgt for å angi URL-adresser for laveste nivå menyelementer. En Javascript-basert løsning krever hooking håndterer funksjoner til dine ankere. Hvis du ikke bruker Javascript, må du bytte ut # i anker href attributtene med nettadressen til destinasjonssiden.
Hint
- Animerte menyer som glir åpen er et eksempel på effekter som kan oppnås med en Javascript-pakken.
- Angi dimensjoner ved bruk av konstant pikselstørrelser (PX) - i stedet for em enheter - er sannsynlig å degradere menyen utseende og oppførsel for brukere som har satt sine nettlesere for å vise større skrift.