Pystysuora menu sivuston muodossa haitarin kanssa jQuery

Valikon, kuten tiedätte - olennainen osa sivuston. Mielenkiintoisia navigoida verkossa resurssi pystyy kiinnostusta vierailijoille. Lisäksi tärkeä ominaisuus tahansa valikosta - sen tiiviyttä. Yksinkertainen pystysuora valikosta helposti luotu käyttämällä HTML ja CSS. Mutta me mennä pidemmälle: Oppikaamme luomaan menu "haitari" avulla jQuery.

Luo valikko- "haitari"

Mikä on vertikaalinen valikko muodossa haitarin? Tämä on pudotusvalikosta, joka luo helppo navigoida ja antaa tyylikkään sivuston. Valikosta suoritetaan tällä tavalla, voit poistaa paljon osa-kohteita. Niille pääsyä tapahtuu, kun klikkaat hiirellä haluttuun kohtaan. Joku voi sanoa, että se on mahdollista tehdä yksinkertainen valikko tällä tavalla ilman jQuery. Kyllä, se on. Mutta tämä kohde ei olisi erittäin hyödyllistä omistajille älypuhelimet tai tabletteja. Tehdään pystysuora valikosta vetoaa kaikkiin. Sitten muuttaa väriä tyyli navigointi, on mahdollista säätää suunnittelu mihin tahansa sivustoon.

HTML

Joten, luoda toimialaosaamistamme valikosta valitaan ensin HTML-koodia, joka sisältää seuraavat rivit:

Tallentaa tämän koodin tiedostoon nimeltä Accord_menu.html.

Kuten näette, olemme luoneet Järjestämätön lista. Se koostuu 3 pääkohdat:

- kuvat;

- elokuvia;

- kirjoja.

Jokaisella kohteella on muutaman kappaleen. Missä #, sinun täytyy lisätä linkkejä. Nyt on tärkeää kuvata tyyliin. Kaikki riippuu ulkonäköä Internet resurssi. Pystysuora menu sivuston on sisällytettävä harmonisesti sen suunnitteluun.

CSS-koodi

Tyylit sinun ei pitäisi olla vaikeaa. Toteamme vain, että tässä esimerkissä käytetään liukuväritäyttöä. Tässä on CSS-koodi:

väri on määritelty CSS-tiedostoa, kokomarkkereita poistetaan luettelon kohteet vasemmalla. Se määrittää, miten käyttäytyä kunkin kohteen ja osa-valikosta, kun viet sen yli. Esimerkiksi:

# E1fee2 - tämä vaalean vihreä väri sub.

# C4f0f7 -golubovaty sävy sub kun viet yli.

Näyttö omaisuus pyytää lohkon arvon säätämiseen tarvittavat pehmusteet ja kokoa. Värin, koon, fontin tyypin, sijainnin - kaikki on kuin kuvata CSS-tiedostoa. Kutsuvat, esimerkiksi accordionmenu_my1.css.

Yhdistäminen jQuery valikko parannuksia

Kuten ehkä muistatte, tavoitteemme - luoda pystysuora valikosta jQuery. Jos et ole perehtynyt tähän teknologiaan, älä huoli. Käytämme Googlen tietovarasto ja kytke jQuery käsikirjoituksen. Tämä tekee siitä houkuttelevamman valikosta. jQuery on JavaScript-kirjasto perustuu vuorovaikutukseen Hypertext Markup HTML ja JavaScript. jQuery voit käyttää sisältöä ja ominaisuuksia elementtejä.

Joten, liitä tarvittavat skripti kehossa HTML-tiedosto ja määritä säännöt varastointia 2 muuttujia, paitsi raviurheilu elementtejä. Edistävät koodia, sulje muut välilehdet avajaisissa se, josta on hiiren napsautuksella. Näin se näyttää:

Tallenna kaikki muutokset, mitä se näyttää selaimen valikossa. Se on yhteinen seurausta: Tämän seurauksena olemme päässeet houkutteleva menu, että voit aina muuttaa, riippuen heidän mieltymyksiään. Ja hankkimaan uutta tietoa alan jQuery, CSS, luot yksittäisiä alueita sivuston, parantaa taitojaan.