Hvordan skrive HTML eller Javascript for Drop-Down Tabs for nettsider

March 9

Drop-down kategoriene er menyer på en webside som utvides for å vise undermenyene når en mus svever over et element på hovedmenyen. Denne funksjonaliteten er vanligvis bygget ved hjelp av en Javascript-rammeverk bibliotek som gir avansert GUI (Graphical User Interface) anlegg ved hjelp av CSS (Cascading Style Sheets) og XML-håndtering funksjoner kjent som AJAX (Asynchronous Javascript XML). De tre viktigste Javascript rammeverk bibliotekene er jQuery, MooTools og Scriptaculous. Fordelen med å bruke Javascript rammeverk bibliotekene er at de er kryss-nettleser kompatibel og åpen kildekode og mulig for utviklere å bygge avanserte websider raskere ved bruk av standardiserte forhåndsbygde komponenter. Den Javascript gjør det også raskere gjengivelse av websider fordi javascript er behandlet i en nettleser, i stedet for på en webserver.

Det finnes utvidelser til disse rammene som gir spesielle funksjoner til rullegardinfanen. Disse er tilgjengelige fra nettsteder som Knallgrau, LWIS, Droppy, og Superfish.

Bygge en enkel HTML / Javascript nettside for rulle faner med jQuery rammeverket kan gjennomføres raskt. En grunnleggende forståelse for HTML og Javascript koding er nødvendig.

Bruksanvisning

1 Åpne nettleseren på JQuery nedlastingssiden (se Ressurser nedenfor). Se etter "Current Slipp" -delen, og høyreklikk på "minified" linken. Velg "Lagre som ..." og lagre Javascript-fil som heter "jquery-1.4.2.js" til din lokale C: \ mappe.

2 Åpne din tekst editor, og kopier og lim inn følgende kode i en fil som heter C: \ mydropdownmenu.html. Lagre filen.

<Html>

<Body>

DDT {margin: 0; padding: 0; list-style: none;} ddt li {float: left; width: 100px; bakgrunn: # EFEEA0; position: relative; } DDT li a {display: block; padding: 10px 10px 0px 10px; height: 40px;

text-decoration:none; color:#444444; text-align:center; } ddt ul {venstre: 0; display: none; padding: 0; list-style: none;} ddt ul li {width: 100px; float: left; border-top: 2px solid #ffffff;} ddt ul a {display: block; height: 40px; padding: 8px 5px; color: # 333333}

</ Style>

<Script type = "text / javascript" rel = "nofollow" target = "_blank"> http://www.example.com '> Hoved Alternativ A </a>

<Ul>

<Li> <a href='Submenu" rel="nofollow" target="_blank"> http://www.example.com '> Undermeny Alternativ A1 </a> </ li>

</ Ul>

<Li> <a href='Main" rel="nofollow" target="_blank"> http://www.example.com '> Hoved Alternativ B </a>

<Ul>

<Li> <a href='Submenu" rel="nofollow" target="_blank"> http://www.example.com '> Undermeny Alternativ B1 </a> </ li>

</ Ul>

</ Body>

</ Html>

3 Åpne nettleseren på C: \ mydropdownmenu.html. Hold musen over menyelementer "Hoved Alternativ A" og "Hoved Alternativ B" for å vise rullegardinundermenyer.

4 Trykk "Alt + Tab" for å gå tilbake til tekstredigering. Nær bunnen av filen, kopier og lim inn følgende kode over streken "</ body>". Dette vil skape et tredje alternativ i hovedmenyen med to undermenyer. Deretter lagre filen.

<Li> <a href='Main" rel="nofollow" target="_blank"> http://www.example.com '> Hoved Alternativ C </a>

<Ul>

<Li> <a href='Submenu" rel="nofollow" target="_blank"> http://www.example.com '> Undermeny Alternativ C1 </a> </ li>

<Li> <a href='Submenu" rel="nofollow" target="_blank"> http://www.example.com '> Undermeny Alternativ C2 </a> </ li>

</ Ul>

5 Trykk "Alt + Tab" for å gå tilbake til nettleseren. Trykk F5 for å oppdatere siden. Det vil nå vise "Hoved Alternativ C" med to undermenyer, C1 og C2.