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

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

ОБСУЖДЕНИЕ

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

Вертикальное разноцветное меню Аккордеон
Просмотров: 1961  Скачан: 238 раз  Комментариев в теме: 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>
Материалы по теме:

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

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

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

Вертикальное меню в разноцветном стиле, полностью на css3, имеет два стиля (плавное раскрытие и с эффектом подёргивания)....

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

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

Эффектное вертикальное менюЭффектное вертикальное меню

Креативное раскрывающиеся меню, хорошо подойдёт к нестандартному дизайну......

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

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

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

Красивое разноцветное меню (Аккордеон.
Интересные публикации:

Navigation SlaiderNavigation Slaider

Простой слайдер на jquery, имеет меню расположенное с левой стороны, также вы можете задать текст, который будет......

VIP кнопка на css3VIP кнопка на css3

Красивая анимационная кнопка с эффектом блеска, при наведении курсора на кнопку, происходит красивая анимация на фоне кнопки....

Слайдер с элементом HTML5 СаnvasСлайдер с элементом HTML5 Саnvas

Слайдер построенный с применением элемента HTML5 Саnvas, этот элемент позволяет создавать и изменять некоторую графику, так же его можно......

Кнопка Download на css3Кнопка Download на css3

Красивая кнопка на css3, при наведении курсора мыши на кнопку, она раскрывается, за тем уже виден сам подтекст....

Jquery меню горизонтальноеJquery меню горизонтальное с анимированн...

Оригинальное Jquery меню для вашего сайта с анимированным фоном, меню представлено в трёх вариантах на ваш выбор....

AirlinesAirlines

Красивый шаблон Airlines на HTML5, хорошо подойдёт для корпоративного сайта....

Скрипт комментариев на PHPСкрипт комментариев на PHP

Скрипт комментариев написанный на php и работает в связке с MYSQL....
  • Текущий 1.73/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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