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

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

ОБСУЖДЕНИЕ

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

Прозрачный аккордеон с помощью css и jquery
Просмотров: 2607  Скачан: 226 раз  Комментариев в теме: 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 (Аккордеон)Вертикальное меню на css (Аккордеон)

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

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

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

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

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

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

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

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

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

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

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

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

Вертикальное меню на css3 с применением иконических шрифтов......
Интересные публикации:

Kenburner слайдерKenburner слайдер v1.1

Сочетание в слайдере красивого дизайна, анимации текста и различных эффектов, приятно выделяет его среди подобных плагинов....

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

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

DeTube v1.3DeTube v1.3

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

Форма регистрации html с валидациейФорма регистрации html с валидацией

Форма регистрации на сайте это неотъемлемая его часть, но ведь не менее важен и дизайна формы, в данном примере......

Шаблон Dual FlowШаблон Dual Flow

Отличный шаблон построенный на HTML5, на главной странице располагается слайдер, есть галерея, выпадающее меню, форма обратной связи с Google Maps......

GridoGrido

Много функциональный шаблон Grido, шаблон обладает огромным набором возможностей его настройки....

стильные кнопки css3Стильные кнопки css3

В данном примере представлены красивые кнопки для сайта реализованные на чистом css3....
  • Текущий 1.78/5
  • 1
  • 2
  • 3
  • 4
  • 5

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

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

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


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