Падащи менюта

Какво представляват падащите менюта

Изграждането на подходяща навигация за сайта Ви позволява потребителите бързо и лесно да достигат до страниците, които търсят. Най-простият начин за изграждане на менюта е да включите в тях хипервръзки към всяка една страница. Ако обаче страниците на сайта Ви са много на брой, подобни менюта ще бъдат твърде големи, тромави и трудни за ориентиране.Един подходящ начин да се справите с такъв проблем е да обедините сходните по тематика страници в отделни категории.

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

Как се изграждат падащи менюта

Има няколко известни стратегии за изграждане на едно падащо меню. Единият способ използва CSS, а другия - само JavaScript. Нека разгледаме предимствата и недостатъците на всеки от двата основни метода.

Изграждане на падащо меню с CSS

Основната идея зад падащите менюта, изградени с CSS, е извикване на съответните подменюта само когато показалеца на мишката застава върху някоя от основните категории. Използва се командата hover, която обикновено играе роля в смяна на цвета текста или на фона при посочване на някой елемент в HTML страницата (най-често хипервръзка).

За разлика от повечето други браузъри, Internet Explorer не поддържа такава употреба на hover, но Pattrick Griffiths и Dan Web намират начин да заобиколят проблема и публикуват статията Suckerfish Dropdowns, която става много известна и влиятелна. Името, което авторите избират за този вид меню - Suckerfish, става нещо като стандарт в областта на вертикалните менюта и често можете да го срещнете в различни варианти. Например новата, подобрена версия, се казва Son of Suckerfish и работи без трикове и за браузърите Opera и Safari.

Предимството на падащите менюта, изградени само със CSS, е независимостта от JavaScript, която не всички потребители са разрешили за използване от браузърите си. Недостатък е липсата на всички специални ефекти, които може да даде JavaScript

Падащи менюта с JavaScript

JavaScript може да се използва за създаване на падащи менюта с най-различни ефекти, които не могат да се постигнат само с CSS: ефектно разгръщане на подменютата, забавеното им скриване при отдръпване на курсора от полето-главна категория и др.

Недостатък на падащи менюта, изградени само с JavaScript, е че потребители, които не ползват JavaScript, няма да имат достъп до хипервръзките в подменютата. Ако връзките към останалите страници от сайта Ви се намират само в такива менюта, голяма част от сайта Ви ще бъде недостъпен за такива потребители!

Изграждане на падащо меню с предимствата на CSS и JavaScript: Superfish

Двете технологии - CSS и JavaScript, са напълно съвместими една с друга и нищо не пречи да се комбинират техните предимства. Точно това е направено с падащите менюта Superfish. Основата на менютата е изградена на CSS и следователно менютата ще работят дори и за потребители, които не ползват JavaScript. Над тази основа обаче за изградени ефекти, които само JavaScript може да даде. Superfish е изграден на основата на JavaScript библиотеката JQuery, която трябва да си свалите допълнително.Следват инструкции за създаване на падащи менюта тип Superfish.

• Създайте менюто като неподреден списък: всяка главна категория направете елемент на основния списък, а всички страници от дадено подменю включете като елементи на отделен, подчинен на главната категория неподреден списък. За да може списъка да бъде разпознат от JavaScript кода, трябва да добавите име на клас за неподредения списък: class="sf-menu". Ето как изглежда едно сравнително простичко меню с 4 категории, всяка от които има по 0 (т.е. без подменю), 2 или 3 страници като подменюта. Обърнете внимание и на това как са вместени указанията за създаване на хипервръзки: <ul class="sf-menu"> <li><a href="/">Животни</a> <ul> <li><a href="/">Орел</a></li> <li><a href="/">Рак</a></li> <li><a href="/">Щука</a></li> </ul> </li> <li><a href="/">Човек</a></li> <li><a href="/">Растения</a> <ul> <li><a href="/">Кокиче</a></li> <li><a href="/">Зюмбюл</a></li> <li><a href="/">Хвощ</a></li> </ul> </li> <li><a href="/">Гъби</a> <ul> <li><a href="/">Сърнела</a></li> <li><a href="/">Печурка</a></li> <li><a href="/">Припънка</a></li> </ul> </li> </ul> Можете да проверите и как изглежда кода, използван в примерната страница.
• Свалете си библиотеката JQuery: оставете избора по подразбиране на Production и просто натиснете Download (един съвсем малък файл: 19 kB).
• Свалете си и файловете за менюто Superfish. Може би най-лесно е да си свалите всички файлове като архивния zip файл, който да разархивирате до отделните файлове.
• Качете JQuery и Superfish файловете в една и съща папка със страницата, на която ще слагате падащото меню.
• В head частта на HTML страницата укажете използването на библиотечния файл JQuery, както и файловете за Superfish - CSS файла и тези JavaScript файлове, с които искате да създадете менюто. Ето как би изглеждал кода в най-простия случай: <head> //хипервръзка към CSS файла за менюто <link rel="stylesheet" type="text/css" media="screen" href="/superfish.css" /> // хипервръзка към Jquery JavaScript библиотеката <script type="text/javascript" src="/jquery.js"> // хипервръзка към JavaScript файловете (hoverIntent може и да се изпусне) <script type="text/javascript" src="/hoverIntent.js"></script> <script type="text/javascript" src="/superfish.js"></script> //извикване на фукнцията Superfish <script type="text/javascript"> $(document).ready(function(){ $("ul.sf-menu").superfish(); }); </script> </head>
• Вижте как работи менюто и евентуално променете параметрите: скорост на разгръщане на менютата, цвят на меню и подменю и т.н. На примерната страница е дадено по-подробно описание какви натройки можете да променяте.