WEB лаборатория DLE » Другое для WEB » jQuery и JavaScript » Аккордеон в стиле Metro
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 3
    Пользователей: 0
    Гостей: 3


    Последние комментарии
    ...
    HI-tech:
    0

    Аккордеон в стиле Metro

    Автор: Robot_DLElabкатегория: Другое для WEB » jQuery и JavaScriptдата: 8-02-2013, 14:20
    Аккордеон в стиле Metro


    В данном уроке мы сделаем аккордеон в стиле Metro. Меню будет использовать jQuery и jQueryUI.

    Разметка HTML
    Структура меню достаточно простая. Мы используем только элементы ul и li для построения аккордеона и тег ссылки после каждого элемента li первого уровня.

    Также мы установили класс .close для каждого элемента ul первого уровня, а также используем тег i для установки иконки для каждой категории. В конце импортируется минимизированные варианты jQuery и jQueryUI, а также наш скрипт.
    <ul>
    <li>
    <a href="#"><i></i>Друзья</a>
    <ul class="closed">
    <li>Петя Мешкофф</li>
    <li>Инна Выкрутасова</li>
    <li>Моня Фельдман</li>
    <li>Иван Балан</li>
    <li>Грицько Забейкопыто</li>
    <li>Марио Итальянцев</li>
    </ul>
    </li>
    <li>
    <a href="#"><i></i>Видео</a>
    <ul class="closed">
    <li>Рай</li>
    <li>Время пришло</li>
    <li>Оторвусь!</li>
    <li>Зажигаем!</li>
    <li>Первый раз...</li>
    <li>Мимоходом</li>
    <li>Баллады коричневых куч</li>
    <li>Как молоды мы были</li>
    </ul>
    </li>
    <li>
    <a href="#"><i></i>Галерии</a>
    <ul class="closed">
    <li>Манга</li>
    <li>Аниме</li>
    <li>Скайрим</li>
    </ul>
    </li>
    <li>
    <a href="#"><i></i>Подкасты</a>
    <ul class="closed">
    <li>То, что нужно знать</li>
    <li>За пределами</li>
    <li>Глупости</li>
    <li>Текила</li>
    </ul>
    </li>
    <li>
    <a href="#"><i></i>Супер</a>
    <ul class="closed">
    <li>Супер_1</li>
    <li>Супер_2</li>
    <li>Последний супер</li>
    </ul>
    </li>
    </ul>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script src="js/functions.js"></script>

    CSS
    Большинство строк использует оператор >. Например, когда встречается такой код body > ul > li, то он означает элемент li, который является потомком элемента ul, являющегося потомком элемента body .

    Мы импортируем шрифт Didact Gothic из коллекции Google Fonts.

    Для указания категорий используется метод nth-child(*) для установки соответствующих иконок ( body > ul > li:nth-child(*) > a > i). Для подсчета элементов используются счетчики CSS.

    Также у нас есть два класса: .active и .closed. Данные классы используются для реализации функционала аккордеона. Класс .active формирует цвет фона активной категории, а класс .closed помогает организовать открытие и закрытие категорий. Высота устанавливается равной 0px, что сворачивает панель во время закрытия.
    @import url(http://fonts.googleapis.com/css?family=Didact+Gothic&subset=latin,cyrillic);

    body{
    max-width: 240px;
    margin: 100px auto 50px auto;
    background: #1f1f1f;
    text-align: center;
    }
    ul{
    list-style:none;
    margin:0;
    padding:0;
    text-align:left;
    font-family: Helvetica;
    }
    body > ul{
    margin-bottom:200px;
    border:1px solid #222;
    }
    body > ul > li{
    position:relative;
    }
    body > ul > li > a{
    display:block;
    outline:0;
    height:20px;
    padding:10px;
    text-decoration:none;
    color:#fff;
    background:#ea2d49;
    border-bottom:1px solid #222;
    font-family:'Didact Gothic';
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    text-transform:uppercase;
    font-size:14px;
    }
    body > ul > li > a > i{
    display:block;
    width:45px;
    height:30px;
    float:left;
    }
    body > ul > li:nth-child(1) > a > i{
    background:url(http://web-gate.fr/images/republicof3/icon_friend.png)no-repeat top left;
    -webkit-background-size:50%;
    -moz-background-size:50%;
    -o-background-size:50%;
    background-size:50%;
    background-position:5px 3px;
    }
    body > ul > li:nth-child(2) > a > i{
    background:url(http://web-gate.fr/images/republicof3/icon_video.png)no-repeat top left;
    -webkit-background-size:45%;
    -moz-background-size:45%;
    -o-background-size:45%;
    background-size:45%;
    background-position:5px 3px;
    }
    body > ul > li:nth-child(3) > a > i{
    background:url(http://web-gate.fr/images/republicof3/icon_gallery.png)no-repeat top left;
    -webkit-background-size:45%;
    -moz-background-size:45%;
    -o-background-size:45%;
    background-size:45%;
    background-position:5px 3px;
    }
    body > ul > li:nth-child(4) > a > i{
    background:url(http://web-gate.fr/images/republicof3/icon_podcast.png)no-repeat top left;
    -webkit-background-size:45%;
    -moz-background-size:45%;
    -o-background-size:45%;
    background-size:45%;
    background-position:5px 3px;
    }
    body > ul > li:nth-child(5) > a > i{
    background:url(http://web-gate.fr/images/republicof3/icon_bolt.png)no-repeat top left;
    -webkit-background-size:25%;
    -moz-background-size:25%;
    -o-background-size:25%;
    background-size:25%;
    background-position:10px 0px;
    }
    body > ul > li > ul{
    counter-reset:items;
    height:auto;
    overflow:hidden;
    background:#fff;
    color:#ec2b48;
    width:100%;
    }
    body > ul > li > ul > li{
    counter-increment:items;
    padding:1em 1.3em;
    border-bottom:1px solid #DDD;
    font-size:12px;
    cursor:pointer;
    }
    body > ul > li > ul > li:hover{
    background:#f4F4F4;
    }
    body > ul > li:after{
    content:counter(items);
    font-size:14px;
    position:absolute;
    right:10px;
    top:15px;
    background:#c0273c;
    height:30px;
    padding:5px 20px;
    margin:-15px -10px;
    color:white;
    text-indent:0;
    text-align:center;
    line-height:2;
    -webkit-box-shadow:inset 4px 0 8px rgba();
    -moz-box-shadow:inset 4px 0 8px rgba();
    box-shadow:inset 4px 0 8px rgba();
    }
    body > ul > li > ul > li:after{
    content:counter(items);
    font-size:0.857em;
    background:#f4f5f4;
    height:100%;
    margin:-27px 174px;
    display:block;
    float:left;
    color:#c0273c;
    text-indent:0;
    text-align:center;
    font-size:14px;
    line-height:2.5;
    border-top:1px solid #DDD;
    height:38px;
    width:48px;
    }
    .active{
    background:#c0273c;
    }
    .closed{
    height:0;
    }

    javascript
    javascript реализует весь функционал нашего аккордеона.

    У нас есть функция, которая при нажатии на тег a добавляет к нему класс .toggleClass(), за чем следует установка цвета фона с задержкой _this.toggleClass('active', 5);.

    Затем мы удаляем класс .close, чтобы открыть панель с задержкой. А остальные панели закрываем.
    $(function() {
    $("a").bind('click',function() {
    var _this = $(this);

    // Раскрываем текущую ссылку
    _this.toggleClass('active', 5);
    _this.next().toggleClass('closed', 500);
    // Проходим по другим ссылкам и выключаем активное состояние
    $("a").not(_this).each(function() {
    $(this).next().addClass('closed', 500);
    $(this).removeClass('active', 5);
    });
    });
    });



    Скачать бесплатно

    Теги: jQuery, Аккордеон

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.