Menú vertical per al lloc en forma d'un acordió amb jQuery

El menú, com saben - una part integral del lloc. recurs en línia navegar interessant és capaç de visitants d'interès. A més, una propietat important de qualsevol menú - la seva compacitat. Un menú vertical senzilla facilitat ha creat fent servir HTML i CSS. Però anem més enllà: Anem a aprendre a crear menú, "acordió" amb l'ajuda de jQuery.

Crear un "acordió" menú-

Què és un menú vertical en forma d'un acordió? Aquesta és una llista desplegable, el que crea un fàcil navegar i dóna un lloc elegant. Menú, realitzat d'aquesta manera, li permet convertir una gran quantitat de subtemes. L'accés a elles es produeix quan es fa clic amb el ratolí sobre l'element desitjat. Algú pot dir que és possible fer un menú senzill d'aquesta manera sense l'ús de jQuery. Sí, ho és. Però aquest objecte no seria molt útil per als propietaris de telèfons intel·ligents o tauletes. Anem a crear un menú vertical, apel·lant a tots. Llavors, canviant el color llaurar una navegació, serà possible ajustar el disseny a qualsevol lloc.

codi HTML

Per tant, per crear el nostre menú vertical, haurà de marcar primer el codi HTML, que contindrà les següents línies:

Guardeu aquest codi en un arxiu anomenat Accord_menu.html.

Com es pot veure, hem creat una llista desordenada. Consta de 3 punts principals:

- fotos;

- pel·lícules;

- llibres.

Cada element té un parell de paràgrafs. On són #, haurà d'afegir enllaços. Ara bé, és important descriure l'estil. Tot depèn de la mirada del seu recurs d'Internet. menú vertical per al lloc ha d'integrar harmònicament en el seu disseny.

CSS-codi

Amb estils que no hauria de ser difícil. Observem només que en aquest exemple s'utilitza un farciment de degradat. Aquí està el codi CSS:

color s'especifica a l'arxiu CSS, marcadors de mida s'eliminen dels elements de la llista de l'esquerra. Es determina com comportar-se en cada tema i sub-menú quan es passa sobre ella. Per exemple:

# E1fee2 - aquest color verd pàl·lid sub.

# C4f0f7 -golubovaty ombra sub quan es passa sobre ells.

propietat de presentació pregunti valor de bloqueig per ajustar el farciment i la mida necessari. El color, mida, tipus de lletra, la ubicació - tot és com es descriu a l'arxiu CSS. Anomenar-lo, per exemple, accordionmenu_my1.css.

Connexió millores menú jQuery

Com es recordarà, la nostra meta - per crear un menú vertical jQuery. Si no està familiaritzat amb aquesta tecnologia, no es preocupi. Fem servir el repositori de Google i el connectem guió jQuery. Això farà que sigui més atractiu menú. jQuery és una biblioteca JavaScript basat en la interacció de marcat d'hipertext HTML i JavaScript. jQuery li permet accedir als continguts i atributs dels elements.

Per tant, connecti el guió necessària en el cos de l'arxiu HTML i establir les normes per a l'emmagatzematge de 2 variables, a excepció dels elements de curses de cavalls. Contribuir amb codi, el tancament d'altres fitxes en l'obertura d'aquella en la qual existeix un clic del ratolí. Així és com es veu:

Desar tots els canvis, veure com es veu en el menú del navegador. Això és un resultat comú de: Com a resultat, hem arribat un atractiu menú que sempre es pot alterar, en funció de les seves preferències. I l'adquisició de nous coneixements en el camp de jQuery, CSS, crearà els elements únics del lloc, millorant les seves habilitats.