Вертикална мени за сајт во форма на хармоника со jQuery

Менито, како што знаете - составен дел од сајтот. Интересно навигација онлајн ресурс може да интерес посетители. Покрај тоа, важна сопственост на било кое мени - својата компактност. А едноставен вертикална мени лесно да се создаде со употреба на HTML и CSS. Но, ние одиме понатаму: Да научат да се создаде menu- "хармоника", со помош на jQuery.

Креирај menu- "хармоника"

Што е вертикална мени во форма на хармоника? Ова е паѓачката листа, со што се создава лесно да се движите и дава стилски сајт. Мени, извршено на тој начин, овозможува да се вклучи голем број на под-ставки. Пристап до нив се случува кога ќе кликнете на глувчето на саканиот објект. Некој може да каже дека тоа е можно да се направи едноставна мени во оваа мода, без употреба на jQuery. Да, тоа е. Но, овој објект не ќе биде многу корисно за сопствениците на паметни телефони или таблети. Ајде да се создаде вертикална мени, апелирајќи до сите. Потоа, промена на бојата стајлинг за навигација, тоа ќе биде можно да се прилагоди на дизајнот на секоја страница.

HTML кодот

Значи, да се создаде нашиот вертикална мени, прво мора да го бирате HTML-кодот, кој ќе ги содржи следниве линии:

Зачувај го овој код во датотека наречена Accord_menu.html.

Како што можете да видите, ние направивме неподреден список. Се состои од 3 главни точки:

- фотографии;

- филмови;

- книги.

Секој елемент има неколку параграфи. Каде што се #, ќе треба да додаваат линкови. Сега е важно да се опише стилот. Сето тоа зависи од изгледот на вашиот интернет ресурси. Вертикална мени за сајт мора да се интегрираат хармонично во неговиот дизајн.

CSS-код

Со стилови не треба да биде тешко. Ние само се напомене дека во овој пример користи пополни градиент. Тука е CSS код:

боја е наведен во CSS-фајл, маркери големина се отстранети од ставките во листата на левата страна. Се утврди како да се однесуваат во секоја точка и под-менито кога ќе лебди над неа. На пример:

# E1fee2 - ова бледо зелена боја под.

# C4f0f7 -golubovaty под сенка кога ќе лебдат над нив.

Покажи имот побара блок вредност да се прилагоди потребните баласт и големина. Боја, големина, фонт тип, локација - сè е како што ја опишуваат во CSS датотека. Наречи го тоа, на пример, accordionmenu_my1.css.

Поврзување подобрувања jQuery мени

Како што може да се потсетиме, нашата цел - да се создаде вертикална jQuery мени. Ако не сте запознаени со оваа технологија, не се грижи. Ние ги користиме на складиштето на Google и да ги поврзете JQuery скрипта. Ова ќе го прави повеќе привлечни менито се направи. jQuery е библиотека го вклучите Javascript-врз основа на интеракцијата на Хипертекст маркирачки HTML и JavaScript. jQuery ви овозможува да пристапите на содржини и атрибути на елементи.

Значи, се поврзете потребните скрипта во телото на HTML-датотека и да го поставите правила за чување на 2 променливи, освен за коњ тркачки елементи. Придонесе код, затворање на другите ливчиња на отворањето на оној на кој постои клик на глувчето. Еве како тоа изгледа:

Ги зачувате сите промени, да видиме што тоа изгледа како во менито на прелистувачот. Тоа е заеднички резултат на: Како резултат на тоа, ние се дојде атрактивна менито што секогаш може да се менуваат, во зависност од нивните преференции. И стекнување на нови знаења од областа на jQuery, CSS, ќе се создаде единствена елементи на сајт, подобрување на нивните вештини.