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

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

ОБСУЖДЕНИЕ

Аккордеон на jquery

Прозрачный аккордеон с помощью css и jquery
Просмотров: 2442  Скачан: 212 раз  Комментариев в теме: 0

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

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

 

HTML

<ul class="container">
    <li class="menu">      
        <ul>
            <li class="button"><a href="#" class="box1">ГЛАВНАЯ</a></li>
            <li class="dropdown">
                <ul>
                    <li><a href="#">Пункт1</a></li>
                    <li><a href="#">Пункт2</a></li>
                    <li><a href="#">Пункт3</a></li>
                    <li><a href="#">Пункт4</a></li>
                </ul>
            </li>
        </ul>          
    </li>      
    <li class="menu">      
        <ul>
            <li class="button"><a href="#" class="box2">ФОТО</a></li>          
            <li class="dropdown">
                <ul>
                    <li><a href="#">Пункт1</a></li>
                    <li><a href="#">Пункт2</a></li>
                    <li><a href="#">Пункт3</a></li>
                </ul>
            </li>
        </ul>          
    </li>      
    <li class="menu">      
        <ul>
            <li class="button"><a href="#" class="box3">ВИДЕО</a></li>
            <li class="dropdown">
                <ul>
                    <li><a href="#">Пункт1</a></li>
                    <li><a href="#">Пункт2</a></li>
                    <li><a href="#">Пункт3</a></li>
                    <li><a href="#">Пункт4</a></li>
                </ul>
            </li>
        </ul>          
    </li>   
    <li class="menu">     
        <ul>
            <li class="button"><a href="#" class="box4">БЛОГИ</a></li>
            <li class="dropdown">
                <ul>
                    <li><a href="#">Пункт1</a></li>
                    <li><a href="#">Пункт2</a></li>
                    <li><a href="#">Пункт3</a></li>
                </ul>
            </li>
        </ul>         
    </li>
    <li class="menu">     
        <ul>
            <li class="button"><a href="#" class="box5">ИГРЫ</a></li>
            <li class="dropdown">
                <ul>
                    <li><a href="#">Пункт1</a></li>
                    <li><a href="#">Пункт2</a></li>
                    <li><a href="#">Пункт3</a></li>
                    <li><a href="#">Пункт4</a></li>
                    <li><a href="#">Пункт5</a></li>
                    <li><a href="#">Пункт6</a></li>
                </ul>
            </li>
        </ul>         
    </li>
    <li class="menu">     
        <ul>
            <li class="button"><a href="#" class="box6">КОНТАКТЫ</a></li>
            <li class="dropdown">
                <ul>
                    <li><a href="#">Пункт1</a></li>
                    <li><a href="#">Пункт2</a></li>
                    <li><a href="#">Пункт3</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-2.0.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.easing.def = "easeInOutQuad";
    $('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 ...

Вертикальное многоуровневое меню с неограниченной вложенностью на основе jQuery....

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

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

Вертикальное меню с плавным увеличением значковВертикальное меню с плавным увеличением ...

Красивое вертикальное меню, реализованное с помощью JavaScript...

Вертикальное меню на css (Аккордеон)Вертикальное меню на css (Аккордеон)

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

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

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

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

Креативное вертикальное меню на css3 и JQuery
Интересные публикации:

Резиновые кнопки на css3 (Checkbox)Резиновые кнопки на css3 (Checkbox)

Ещё один красивый чекбокс, который реалистично имитирует резиновые кнопки, ну или мягкие как их ещё называют....

ClockerClocker

Универсальный html шаблон Clocker, на главной странице располагается слайдер, есть портфолио, выпадающее меню, заготовка контактной формы......

Прозрачная контактная форма на css3Прозрачная контактная форма на css3

Прозрачная контактная форма на CSS3 в тёмном стиле. В форме реализована проверка полей......

The SameThe Same

Шикарный профессиональный html шаблон имеющий два стиля (светлый и тёмный), на главной странице используется стильный слайдер......

Раскрывающиеся кнопка с текстом на css3Раскрывающиеся кнопка с текстом на css3

Очень красивая и главное удобная кнопка на css3, при наведении курсора на кнопку, она......

Новостной слайдер «Lof JSliderNews 2.0»Новостной слайдер «Lof JSliderNews 2.0»

Неплохой новостной слайдер, отлично подойдёт для вывода последних новостей на сайте, в слайдере есть дополнительная панель с миниатюрами......

Sell v1.4.1Sell v1.4.1

Sell - это ещё одна довольно гибкая универсальная тема для создания интернет магазина на WordPress с использованием WooCommerce....
  • Текущий 1.88/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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