В интернете есть огромное количество вариаций на тему создания выдающих меню. Есть менюшки сделанные исключительно на CSS, HTML и с использованием других инструментов используемых в веб-разработках.
Сегодня я расскажу и покажу как сделать красивое (по-моему мнению) выпадающее меню с использованием javascript. В свою менюшку я добавил функции которые включают в себя переключение анимации, скорость переключения и развертывания, а так же удобное использование CSS стилей. Что ж, ПОЕХАЛИ 🙂
Моем меню «весит» всего лишь 1.7 Кб, гибкая стилизация с использованием CSS при желанию изменив которые, Вы легко сможете получить как горизонтальное, так и вертикальное меню.
Скрипт выполняется путем передачи объекта в функции инициализации. Пример вызова будет выглядеть следующим образом:
var dropdown=new TINY.dropdown.init("dropdown", {id:'menu', active:'menuhover', fade:true, slide:true, timeout:200});
Параметры включают (тэг — описание (тип) — по умолчанию):
id - ID of the navigation (string - required) - ''
active - CSS class for active state (string) - ''
fade - toggle fade tween (bool) - true
slide - toggle slide tween (bool) - true
speed- toggle slide tween (1-9) - 5
timeout - time in milliseconds to pause before hide on rollout (int) - 200
Этот скрипт тестировался в IE7 +, FF, Chrome, Opera, Safari и доступен для бесплатно личного использования. Я приветствую любые сообщения об ошибке.
Скачать выпадающее анимационное меню на JavaScript | Посмотреть выпадающее анимационное меню на JavaScript
Ответить | Цитировать