Вертикално плъзгащи JQuery меню (хармоника, акордеон), дизайн и разработка на сайта

Добър ден. 🙂

Почти всички сайтове имат меню. За чест, то е или вертикално или хоризонтално. Ако имате вертикална менюто и има няколко точки, те могат да бъдат поставени един върху друг, и всичко ще бъде приятен и чист. Но понякога се случва, че сайтът е много необходимо, за да се настанят такива елементи в менюто. тя може да бъде един уеб сайт или каталог е много информативна и собственика се всичко добре, изложени на рафтове и всичко е възпитан в менюто.

Ако всички тези елементи са поставени под един от друг, менюто може да стане толкова голям, че височината му надвишава височината на основното съдържание. От външната страна, че не е много хубаво, освен това, по такъв солиден списък с трудно да се намери нещо. Всички групират и да се намали необходимостта да се направи такова нещо като плъзгаща се меню.

Принципът на плъзгащата менюто е, че елементите на менюто са разделени на групи, както и тези групи са скрити, виждал само името на групата. Чрез кликване върху заглавието, оставя списък с определен брой точки.

Как да направите плъзгащи меню? Това ще ни помогне - JQuery. С него всичко ще върви гладко и красиво като в примера по-горе. Започнете да приложи плъзгащи меню и да изпълнява няколко точки.

JQuery скрипт

Както обикновено, когато се работи с JQuery, трябва да го включите в библиотека. Както обикновено, в заглавната част или мазето прави връзка, освен ако, разбира се, не сте го направили преди, за други скриптове.

След добавяне на скрипт библиотека. която ще направи animatsiyu.Skriptov е 3, всеки един от тях по различни начини прави анимацията.

HTML маркиране

Сега, на точното място на сайта си, трябва да изход HTML -razmetki. Е, или малко да се променят му, за да изглежда като, както е в примера.

Нищо сложно, всичко е организирано с помощта на - ул A-списък.

И накрая, за да зададете правилния изглед нашето меню, е необходимо да се регистрирате стилове. Ако не сте за първи път работи с CSS. лесно можете да персонализирате стила за себе си.

Не трябва нищо повече. Този метод не е много сложна и има няколко вида изпълнение, всичко зависи от избрания сценария.

Това е всичко, благодаря ви за вниманието. 🙂

Здравейте скъпи приятели

Имате AdBlock инсталирано разширение или други подобни. Добавете сайта си в белия списък, и по този начин да допринесе за vnesesh неговото развитие. Инструкции за това как да деактивирате AdBlock искат този прозорец