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

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

ОБСУЖДЕНИЕ

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

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

Вертикальное меню аккордеон на css, хорошо подойдёт сайту информационного характера......

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

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

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

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

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

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

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

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

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

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

Функциональное вертикальное меню «Tab Menu»Функциональное вертикальное меню «Tab Me...

Отличное вертикальное меню, хорошо подойдёт к блогу или информационному сайту......

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

Commentics v2.4 - это превосходный скрипт комментариев написанный на языке PHP в связке с базой данных MYSQL....

DeTube v1.3DeTube v1.3

DeTube - отличная wordpress тема для тех кто хочет сделать видео-портал, блог или журнал видео новостей....

Оригинальные кнопки с помощью css3Оригинальные кнопки с помощью css3

Оригинальные кнопки на css3, при наведении курсора на кнопку, она изменяет свой вид (растягивается, округляется, перекручивается)....

SonjaSonja

Шаблон Sonja построенный на HTML5, в шаблоне красиво реализована главная страница, имеется оригинальная галерея, стрелка вверх, видео проигрыватель......

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

Красивое разноцветное меню (Аккордеон.
  • Текущий 1.80/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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