Hvordan lage en Venstre Vertical Drop-Down Meny i HTML

April 6

HTML sorterte lister - ofte brukes for å vise enkle lister - også vises på Web-sider rundt om i verden i form av menyer. En meny kan vises øverst på siden horisontalt eller vertikalt langs sidene av arket. Du ofte finne navigasjonsmenyer til venstre. Ved å legge en liten Javascript-funksjonalitet til en vertikal meny, kan du lage en drop down effekt. Besøkende kan deretter klikke en kobling for å åpne og lukke menyen når de vil.

Bruksanvisning

1 Start din tekstbehandler eller et HTML-redigeringsprogram.

2 Åpne et HTML-dokument og finne sin hoveddel. Lim inn koden vist nedenfor i denne delen:

<a href="javascript:manageMenu('menuContainer')"> Toggle Menu </a>

<Ul id = "menu1">
<Li> <a href="Add Link Here"> Produkter </a> </ li>
<Li> <a href="Add Link Here"> Downloads </a> </ li>
<Li> <a href="Add Link Here"> Hjelp </a> </ li>
</ Ul>

</ Div>

Den første uttalelsen skaper en kobling. Denne koblingen utfører en Javascript-funksjon som slår den venstre vertikale menyen på og av. Legg merke til at uttalelsen passerer ID menyens div container. Den neste setningen skaper div beholder som inneholder menyen. Div ID verdien er "menuContainer." De endelige uttalelser lage sorterte liste. Hvert element i listen, li, i listen inneholder en ankerkode som skaper en kobling. Erstatt "Legg til Link Here" med nettadressene til sider som finnes på nettstedet ditt eller et annet sted på nettet.

3 Legg CSS-koden nedenfor i dokumentet stil seksjon:

menuContainer

{
display: none;
}

ul # meny
{
width: 100px; margin-left: 10px; border-style: prikket; border-width: 2 piksler; border-color: Maroon;
}

menu1 li

{
display: block; list-style-type: none; Farge: Blå;
}

menu1 et {

text-decoration: none;
}

menu1 a: hover {

text-decoration: underline; background-color: Gul;
}

Den første CSS velgeren setter beholderen display eiendom til "ingen". Dette gjør menyen usynlig når nettsiden lastes. Den ul # menyvelger definerer hvordan du ønsker at menyen skal se ut. I dette eksempelet attributtene satt menyen margin, kantlinjestil og kantfarge til verdien som vises. The # menu1 li velgeren setter skjermen egenskap av listeelementene til "block". Å gjøre dette gjør dem vises vertikalt ned på siden. Hvis du ikke inkluderer denne verdien, vil menyelementene vises horisontalt over på siden. The list-style-type attributt 'verdi er "ingen". Dette fjerner kulene som vanligvis vises på begynnelsen av listeelementer. Den Farge: Blå attributt setter farge på menypunktene til blått. Endre denne fargen til noe du liker. Den neste CSS selector, # menu1 en, fjerner understrekingen som vises under koblinger som standard. Den endelige velgeren gjør understreking vises og endrer et element bakgrunnsfarge til gult når du beveger musen over elementet.

4 Lim inn følgende Javascript-funksjonen under koden du la i forrige trinn ::

funksjon manageMenu (menuID) {
Var menuObject = document.getElementById (menuID);

if (menuObject.style.display == "ingen" || menuObject.style.display == "")
menuObject.style.display = "block";

annet menuObject.style.display = "ingen";
}

Denne funksjonen henter ID av beholderen sendes til funksjonen når du klikker på linken "Toggle Menu" linken. Koden deretter setter beholderen display stil til "block" hvis det er "ingen" og "ingen" hvis det er "block". Dette føre til menyen for å slippe ned og skjule når du klikker på linken.

5 Lagre HTML-dokumentet og åpne den i nettleseren din. Klikk på "Vis menyelementer" linken. Koden kjøres og viser rullegardinmenyen til venstre.

Hint

Når du bygger din egen venstre vertikale rullegardinmenyer, erstatte linkene vist i dette eksemplet med dine egne URLer, som peker til steder på nettet som er relevante for deg. Du kan også prøve ut forskjellige listestiler ved hjelp av ulike verdier for farge, padding, marger, skrift grensen og andre attributter i CSS stil-delen.