background
ПОСЛЕДНИЕ ПУБЛИКАЦИИ
ПОДПИСКА
Будь В Курсе
Подпишись, и получай эксклюзивные обновления на свой E-Mail:

Ваш E-Mail полностью защищён

ОБСУЖДЕНИЕ

Разноцветное меню Аккордеон

Вертикальное разноцветное меню Аккордеон
Просмотров: 1676  Скачан: 218 раз  Комментариев в теме: 0

Красивое вертикальное разноцветное меню Аккордеон, меню довольно простое, но благодаря красивому эффекту плагина Easing, меню стаёт ещё краше. Такой эффект происходит именно тогда, когда вы переходите по навигации, нижняя часть меню как бы подскакивает, смотриться такой эффект довольно красиво.

Шаг 1 - создание разметки

 

HTML

<ul class="container">
    <li class="menu">      
        <ul>
            <li class="button"><a href="#" class="green">Kiwis <span></span></a></li>
            <li class="dropdown">
                <ul>
                    <li><a href="#">Open Grapes Section</a></li>
                    <li><a href="#">Close This Section</a></li>
                    <li><a href="#">Read on Wikipedia</a></li>
                    <li><a href="#">Flickr Stream</a></li>
                </ul>
            </li>
        </ul>         
    </li>      
    <li class="menu">     
        <ul>
            <li class="button"><a href="#" class="orange">Oranges <span></span></a></li>          
            <li class="dropdown">
                <ul>
                    <li><a href="#">Open Last Section</a></li>
                    <li><a href="#">Wikipedia Page</a></li>
                    <li><a href="#">Flickr Photos</a></li>
                </ul>
            </li>
        </ul>         
    </li>     
    <li class="menu">     
        <ul>
            <li class="button"><a href="#" class="blue">Grapes <span></span></a></li>
            <li class="dropdown">
                <ul>
                    <li><a href="#">Wiki page</a></li>
                    <li>Text label 1</li>
                    <li>Text label 2</li>
                    <li><a href="#">Flickr Stream</a></li>
                </ul>
            </li>
        </ul>         
    </li>    
    <li class="menu">      
        <ul>
            <li class="button"><a href="#" class="red">Strawberries <span></span></a></li>
            <li class="dropdown">
                <ul>
                    <li><a href="#">Wiki page</a></li>
                    <li><a href="#">Strawberry Pie</a></li>
                    <li><a href="#">Photo Stream</a></li>
                </ul>
            </li>
        </ul>          
    </li>
</ul>

Шаг 2 - подключение стилей

 

CSS

<link rel="stylesheet" type="text/css" href="css/style.css" >

Шаг 3 - подключение JavaScript

 

JS

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.easing.def = "easeOutBounce";
    $('li.button a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.dropdown').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});
</script>
Материалы по теме:

Вертикальное меню с прокруткойВертикальное меню с прокруткой

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......

Фиксированое меню (вертикальное и горизонтальное)Фиксированое меню (вертикальное и горизо...

Неплохое фиксированное меню для вашего сайта, меню может быть горизонтальным и вертикальным......

Прозрачный аккордеон с помощью css и jqueryПрозрачный аккордеон с помощью css и jqu...

Прозрачный вертикальный аккордеон, с плавным эффектом раскрытия......

Вертикальное мульти менюВертикальное мульти меню

Вертикальное мульти-меню неплохое решение если вам нужно вывести на сайте огромного количества пунктов......

Креативное анимированое меню с помощью css3Креативное анимированое меню с помощью c...

Вертикальное меню на css3 с применением иконических шрифтов......

Вертикальное разноцветное меню АккордеонВертикальное разноцветное меню Аккордеон

Красивое разноцветное меню (Аккордеон.

Вертикальное меню с прокруткой на JQueryВертикальное меню с прокруткой на JQuery

Меню с прокруткой, реализованое с помощью jquery, главная особенность такого меню......
Интересные публикации:

Слайд эффект с помощью JavaScriptСлайд эффект с помощью JavaScript

Эффект в виде слайда, реализован с помощью javascript...

Sngine v1.6 и v1.8Sngine v1.6 и v1.8

Sngine - это движок социальной платформы, с помощью его вы можете создать социальный сайт или же онлайн сообщество....

Adams v1.2.0Adams v1.2.0

Журнальная тема для WordPress с современным дизайном и отличным функционалом....

Карусель изображений «Feature Carousel»Карусель изображений «Feature Carousel»

Стильная карусель изображений с подписями к изображению, если быть точнее, то это плагин «Feature Carousel», плагин довольно полезен, с его помощью мо...

3D галерея3D галерея

Красивая 3D галерея реализована с помощью JS, картинки хаотично раскиданы, при нажатии на картинку, происходит......

ZeniZeni

Красивый шаблон построенный на html5 для блога или портфолио, на главной странице расположен привлекательный слайдер......

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......
  • Текущий 1.89/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 1.9/5( Голосов 9 )

Комментариев в теме: (0)

Авторизация:
YandexGoogleVKMail.ruTwitterFacebookOdnoklassniki


Ваше имя:
Сайт:
Ваша почта:
RSS
Комментарий:
Введите символы:
captcha
Обновить