Падащи менюта Superfish
Представеното меню е изградено с използване на CSS, а за специални ефекти
се грижи JavaScript - библиотеката JQuery и plug-in към нея, наречен Superfish.
Менюто е напълно фукнционално и кликване на коя да е хипервръзка от него ще Ви отведе
към реална страница от www.parvisait.com.
Основните категории (Първи стъпки, Основни понятия, HTML уроци, Екстри) са
елементи на неподреден списък. Всяко подменю с хипервръзките към съответните
страници представлява отделен неподреден списък, който е вложен в елемента на
своята категория. Забележете как включването на неподредения списък на подменюто
разтяга елемента, описващ основна категория: тагът за край на елемент ()
е изнесен чак след края на вложения неподреден списък ().
Не забравяйте да добавите class="sf-menu" в тага за начало на неподредения списък:
това е необходимо за разпознаване на списъка от CSS и JavaScript файловете.
Ето и самия HTML код, който е използван за създаване на горното меню:
Следва точният HTML код, използван в настоящата страница за
включване на CSS и JavaScript файловете. jquery-1.3.2.min.js е името на
библиотечния файл JQuery, който съм си свалил отделно от страницата на JQuery,
но няма проблем да ползвате малко по-старата версия, която е включена в архивния
файл на Superfish. При всички положения, използвайте за указване името на JQuery файла,
който реално използвате. Извикването на функцията superfish е направено с някои
допълнителни параметри, чиято употреба е обяснена малко по-долу.
Ето и малко по-подробно указание как да настроите някои параметри:
- delay: задава времето в милисекунди, което се изчаква преди подменю да се покаже
(при поставяне на курсора на мишката върху категорията) или да се скрие (след
отдръпване на курсора). Това забавяне е едно от съществените предимства на JavaScript
пред чисто CSS-изградените менюта. Без подобно забавяне и най-малкото отместване на
курсора извън полето на категорията ще скрие подменюто, което може да е доста досадно.
- animation: указва дали да се използва анимирания ефект на постепенна поява на
подменюто
- speed: с това се задава скоростта на анимацията (разгръщане на подменютата).
Можете да избирате между normal, slow и fast.
- autoArrows: определя се дали да се използва образа на стрелкичка в менюто.
Ако искате такъв образ, напишете true, в противен случай - false.
- dropShadows: с тази опция избирате дали подменютата да хвърлят сенки (true)
или не (false).
Настройката за цвят на менюто и подменютата се прави в CSS файла superfish.css:
- Цвят на хипервръзките: намерете .sf-menu a, .sf-menu a:visited и след color
въведете кода на желания цвят.
- Цвят на меню и подменю: непосредствено под указанието за цвят на хипервръзките
се намира това за цвят на менюто:.sf-menu li {background: #BDD2FF;}. Сменете
стойността #BDD2FF с тази, която предпочитате. По същия начин променете и цвета
за подменю, указано с .sf-menu li li.
- Цвят при поставяне на курсора върху елемента: групата .sf-menu li:hover...
определя този цвят.
- Адрес на файловете-стреличка и сянка. Ако сте си свалили архивния файл
superfish.zip, файловете-изображения се намират в своя отделна папка. В случай
че смените положението им (напр. като мен запишете всички файлове в една папка),
трябва да отразите това в CSS файла: адреса на стреличката е указан в елемента
.sf-sub-indicator {... background:url()},а този за изображението-сянка е почти
в края на файла: .sf-shadow ul {background:url()}. В скобките след url сложете
правилния път към файловете и техните имена. Не забравяйте, че за настояща се
приема папката, в която е записан CSS файла!
Можете да подредите менюто и вертикално. За целта трябва да добавите class sf-vertical
към главния неподреден списък (