Menú vertical para o sitio na forma dun acordeón con jQuery

O menú, como vostede sabe - parte do sitio web. recurso en liña navegar interesante é capaz de visitantes de interese. Ademais, unha propiedade importante de calquera menú - súa compacidade. Un menú vertical simple facilmente creados usando HTML e CSS. Pero imos máis aló: Imos aprender a crear "acordeón" menú- coa axuda jQuery.

Crear un "acordeón" menú-

¿Que é un menú vertical en forma de acordeón? Esta é unha lista desplegable, o que crea un doado de navegar e dá un lugar elegante. Menú, realizada deste xeito, permítelle conectar unha morea de sub-elementos. Acceso a eles ocorre cando premer o rato sobre o elemento. Alguén pode dicir que é posible facer un menú sinxelo deste xeito sen o uso de jQuery. Si, é. Pero ese obxecto non sería moi útil para os propietarios de teléfonos intelixentes ou tabletas. Imos crear un menú vertical, apelando a todos. Entón, cambiando a cor denominar unha navegación, será posible axustar o proxecto a todo o sitio.

código HTML

Así, para crear o noso menú vertical, primeiro ten que chamar o código HTML, que pode conter as seguintes liñas:

Salva este código nun ficheiro chamado Accord_menu.html.

Como verás, creamos unha lista desordenada. Componse de 3 puntos principais:

- fotos;

- películas;

- libros.

Cada elemento ten algúns parágrafos. Onde están #, vai ter engadir ligazóns. Agora é importante para describir o estilo. Todo depende da aparencia do seu recurso de Internet. menú vertical para o sitio web debe integrar harmoniosamente na súa concepción.

CSS-code

Con estilos que non debe ser difícil. Notamos única que neste exemplo usa un recheo de gradiente. Aquí está o código CSS:

cor especifícase no arquivo CSS, marcadores de tamaño son eliminados dos elementos da lista da esquerda. É determinada como comportarse en cada elemento e submenú cando pasa o rato sobre el. Por exemplo:

# E1fee2 - este verde pálido cor sub.

# C4f0f7 sombra sub -golubovaty cando pasa o rato sobre eles.

propiedade Mostrar preguntar valor bloque para axustar o recheo e tamaño necesario. A cor, tamaño, tipo de letra, a localización - todo é como describir o arquivo CSS. Chamalo, por exemplo, accordionmenu_my1.css.

Conectar jQuery melloras do menú

Como pode lembrar, o noso obxectivo - para crear un jQuery menú vertical. Se vostede non está familiarizado con esta tecnoloxía, non se preocupe. Usamos o repositorio Google e conectar guión jQuery. Isto fará máis de menú máis atractivo. jQuery é unha biblioteca JavaScript baseado na interacción de hipertexto Markup HTML e JavaScript. jQuery permite acceder ao contido e atributos de elementos.

Entón, conectar o script necesario no corpo dun ficheiro HTML e establecer as regras para o almacenamento de 2 variables, excepto para elementos de carreiras de cabalos. Contribuír código, pechando outras pestanas na apertura do un no que hai un clic do rato. Vexa como se parece:

Salva todos os cambios, ver o que parece no menú do seu navegador. Isto é un resultado común de: Como resultado, temos que chegou un menú atractivo que sempre pode cambiar dependendo das súas preferencias. E adquisición de novos coñecementos no campo da jQuery, CSS, que creará os elementos exclusivos da web, mellorar as súas habilidades.