Vertikalni meni za spletno stran v obliki harmonike z jQuery

Meni, kot veste - sestavni del mesta. Zanimiva smer spletni vir lahko obiskovalci obresti. Poleg tega je pomembna lastnost katerega koli menija - svoje kompaktnosti. Preprosta vertikalni meni zlahka ustvarili s HTML in CSS. Ampak gremo še dlje: Naučimo ustvariti Meni- "harmoniko", s pomočjo jQuery.

Ustvari Meni- "harmonike"

Kaj je navpična meni v obliki harmonike? To je spustni seznam, ki ustvarja enostavno navigacijo in daje eleganten mestu. Meni, ki se izvaja na ta način, vam omogoča, da vključite veliko podpostavke. Dostop do njih pride, ko boste kliknili z miško na želeno točko. Nekdo lahko reče, da je mogoče, da bi preprosto meni na ta način brez uporabe jQuery. Ja, res je. Toda ta objekt ne bi bilo zelo koristno za lastnike pametnih telefonov ali tabličnih računalnikov. Oglejmo ustvariti navpično meni, privlačna za vse. Nato spreminja barvo styling navigacijo, bo mogoče prilagoditi zasnovo na katerem koli mestu.

HTML koda

Torej, da ustvarite svojo navpično meni, morate najprej poklicati HTML-kodo, ki bo vsebovala naslednje vrstice:

Shrani to kodo v datoteko z imenom Accord_menu.html.

Kot vidite, smo ustvarili neurejen seznam. Sestavljen je iz 3 glavnih točk:

- fotografije;

- filmi;

- knjige.

Vsak element ima nekaj odstavkov. Kje so #, boste morali dodati povezave. Zdaj je pomembno, da se opisati stil. Vse je odvisno od videz vašega internetnega vira. Vertikalni meni za spletno stran, mora vključevanje harmonično v svoji zasnovi.

CSS-kodo

Z stilov, da ne bi smelo biti težko. Opažamo, le da v tem primeru uporablja gradient fill. Tu je CSS-številka:

Barva je določena v CSS-datoteki, so velikost oznake odstrani iz postavk v seznamu na levi strani. To določi, kako naj se obnašajo v vsaki točki in podmeniju ko hover nad njim. Na primer:

# E1fee2 - to svetlo zelena barva sub.

# C4f0f7 -golubovaty senca sub ko hover nad njimi.

Zaslon lastnost vprašati blok vrednost prilagoditi potrebno oblazinjenje in velikost. Barva, velikost, tip pisave, lokacija - je vse, kar je, kot opisuje v datoteki CSS. Razpis, na primer, accordionmenu_my1.css.

Povezovanje izboljšave menija jQuery

Morda se spomnite, naš cilj - ustvariti navpično menija jQuery. Če niste seznanjeni s to tehnologijo, ne skrbite. Uporabljamo Google repozitorij in povezati jQuery skript. To bo bolj privlačna meni. jQuery je JavaScript knjižnico, ki temelji na interakciji Hypertext Markup HTML in JavaScript. jQuery vam omogoča dostop do vsebine in lastnosti elementov.

Torej, priključite potrebne scenarij v telesu HTML-datoteke in določi pravila za shranjevanje 2 spremenljivk, razen za konjske dirke elementov. Prispevajte kodo, zapreti druge zavihke ob odprtju enega, na katerem se je klik z miško. Tukaj je, kako to izgleda:

Shranite vse spremembe, videti, kako izgleda v meniju brskalnika. To je pogosta posledica: Kot rezultat, smo prišli privlačno meni, da lahko vedno spremeni, glede na njihove želje. In pridobivanje novega znanja na področju jQuery, CSS, boste ustvarili edinstvene elemente spletne strani, za izboljšanje svoje sposobnosti.