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

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

ОБСУЖДЕНИЕ

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

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

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

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

Слайд меню с помощью css3 и JQueryСлайд меню с помощью css3 и JQuery

Креативное вертикальное меню на css3 и JQuery

Вертикальное меню аккордеон на css и JQueryВертикальное меню аккордеон на css и JQu...

Стильное вертикальное меню аккордеон.

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

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

Социальные кнопки с помощью cssСоциальные кнопки с помощью css

Социальные кнопки с применением иконического шрифта....

ConsultingConsulting

Красивый html шаблон с прекрасной графикой, иконками и меню, хорошо подойдёт для бизнес проекта, в шаблоне имеется необычный слайдер......

Галерея на PHP и JqueryГалерея на PHP и Jquery

Галерея на php и jquery. PHP даёт некие привилегии перед обычным html кодом, например вам как правило приходиться...

WebDesignWebDesign

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

Круглая кнопка с анимационным фоном на css3Круглая кнопка с анимационным фоном на c...

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

Вертикальное многоуровневое меню следующее за курсоромВертикальное многоуровневое меню следующ...

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

Меню с фоновым изображением «Tab Menu»Меню с фоновым изображением «Tab Menu»

Меню с фоновым изображением, при переходе по разделам меню, выбранный вами раздел......
  • Текущий 1.80/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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