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

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

ОБСУЖДЕНИЕ

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

Прозрачный аккордеон с помощью css и jquery
Просмотров: 2386  Скачан: 207 раз  Комментариев в теме: 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, хорошо подойдёт сайту информационного характера......

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

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

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

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

Вертикальное многоуровневое меню на css и JQueryВертикальное многоуровневое меню на css ...

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

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

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

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

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

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

Меню довольно простое, весит очень мало, подойдёт сайту любой тематики......
Интересные публикации:

Good Inc v1.2.1Good Inc v1.2.1

Стильный журнальный шаблон для WordPress в светлом минималистском стиле....

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

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

Форма обратной связи с админкой PHP, JS, CSS, MySQL, AJAXФорма обратной связи с админкой PHP, JS,...

Универсальная форма обратной связи написанная на PHP, JS, CSS, MySQL, AJAX. Форма довольно гибкая в возможностях, с помощью админки......

Горизонтальное анимированное меню на css3Горизонтальное анимированное меню на css...

Горизонтальное меню на css3 с замечательным эффектом....

TanyaCMS 1.0TanyaCMS 1.0

TanyaCMS - это довольно не плохой скрипт вопросов - ответов, скрипт отвечает всем современным требованиям....

ZeniZeni

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

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

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

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

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

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


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