/ Ваше резрешение экрана: px / Ваш Ip адрес: {ip}

Shop Scripts

s1962.ru - Максимальная раскрутка Вашего проекта! TriStroy - Магазин цифровых товаров! bonuswm.org - сервис раздачи бонусов WM Лото PayBons Дешевый хостинг vipip Реклама в системе обмена посетителями и обмена письмами 1traf BonusBox Автоматический серфинг Ремонт офисных кресел, доставка питьевой воды FreeViral.ru - система бесплатной раскрутки и продвижения сайтов autodengi ledlive.by - Максимальная раскрутка и продвижение сайтов! SEOBudget GO-links Система обмена посещениями, бесплатная раскрутка сайтов free-kassa redsurf Доставка питьевой воды Королевская Коллекция скриптов Hi-Board - максимальная раскрутка сайтов! Белый каталог сайтов Программа для раскрутки сайта HazardCD Std ANONIM - Сервис Анонимных и Коротких ссылок

Вертикальное Accordion меню

14-07-2018, 09:46
Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.


HTML
active - класс для пункта, который будет подсвечен - его можно не указывать.
has-sub- класс добавляем к тем, пунктам, у которых есть дочерние элементы.
<div id='cssmenu'>
    <ul>
       <li class='active'><a href='index.html'><span>Главная</span></a></li>
       <li class='has-sub'><a href='#'><span>Каталог</span></a>
          <ul>
             <li class='has-sub'><a href='#'><span>Смартфоны</span></a>
                <ul>
                   <li><a href='#'><span>Samsung</span></a></li>
                   <li><a href='#'><span>Sony</span></a></li>
                </ul>
             </li>
             <li class='has-sub'><a href='#'><span>Планшеты</span></a>
                <ul>
                   <li><a href='#'><span>Asus</span></a></li>
                   <li><a href='#'><span>Lenovo</span></a></li>
                </ul>
             </li>
          </ul>
       </li>
       <li><a href='#'><span>О магазине</span></a></li>
       <li><a href='#'><span>Контакты</span></a></li>
    </ul>
</div>
CSS
#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a {
    border: 0 none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    line-height: 1;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
#cssmenu {
    color: #ffffff;
    font-family: Helvetica,Arial,sans-serif;
    width: 200px;
}
#cssmenu ul ul {
    display: none;
}
#cssmenu > ul > li > a {
    background: rgb(54,170,231); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(54,170,231,1) 0%, rgba(31,160,228,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(54,170,231,1)), color-stop(100%,rgba(31,160,228,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(54,170,231,1) 0%,rgba(31,160,228,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36aae7', endColorstr='#1fa0e4',GradientType=0 ); /* IE6-9 */
    border-left: 1px solid #1682ba;
    border-right: 1px solid #1682ba;
    border-top: 1px solid #1682ba;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 20px;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    z-index: 2;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
    background: rgb(31,160,228); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(31,160,228,1) 0%, rgba(25,146,209,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(31,160,228,1)), color-stop(100%,rgba(25,146,209,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(31,160,228,1) 0%,rgba(25,146,209,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1fa0e4', endColorstr='#1992d1',GradientType=0 ); /* IE6-9 */
    color: #eeeeee;
}
#cssmenu > ul > li.open > a {
    border-bottom: 1px solid #1682ba;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 1px rgba(0, 0, 0, 0.15);
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
    border-bottom: 1px solid #1682ba;
}
.holder {
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
}
.holder:after, .holder:before {
    content: "";
    display: block;
    height: 6px;
    position: absolute;
    right: 20px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
    width: 6px;
    z-index: 10;
}
.holder:after {
    border-left: 2px solid #ffffff;
    border-top: 2px solid #ffffff;
    top: 17px;
}
#cssmenu > ul > li > a:hover > span:after,
#cssmenu > ul > li.active > a > span:after,
#cssmenu > ul > li.open > a > span:after {
    border-color: #eeeeee;
}
.holder:before {
    border-left-color: inherit;
    border-left-style: solid;
    border-left-width: 2px;
    border-top-color: inherit;
    border-top-style: solid;
    border-top-width: 2px;
    top: 18px;
}
#cssmenu ul ul li a {
    background:#49505a;
    border-bottom: 1px solid #32373e;
    border-left: 1px solid #32373e;
    border-right: 1px solid #32373e;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    color: #eeeeee;
    cursor: pointer;
    font-size: 13px;
    padding: 10px 20px;
    text-decoration: none;
    z-index: 1;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
    background: none repeat scroll 0 0 #424852;
    color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
    -webkit-box-shadow: none;
    box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
}
#cssmenu ul ul ul li a {
    padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
    border-bottom: 0 none;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
    border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
    border-bottom: 0 none;
}
#cssmenu ul ul li.has-sub > a:after {
    border-left: 2px solid #eeeeee;
    border-top: 2px solid #eeeeee;
    content: "";
    display: block;
    height: 5px;
    position: absolute;
    right: 20px;
    top: 11.5px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
    width: 5px;
    z-index: 10;
}
#cssmenu ul ul li.active > a:after,
#cssmenu ul ul li.open > a:after,
#cssmenu ul ul li > a:hover:after {
    border-color: #ffffff;
}

jQuery

Подключаем jQueryбиблиотеку следующим скриптом:
$(document).ready(function () {
    $('#cssmenu li.has-sub > a').on('click', function(){
        $(this).removeAttr('href');
        var element = $(this).parent('li');
        if (element.hasClass('open')) {
            element.removeClass('open');
            element.find('li').removeClass('open');
            element.find('ul').slideUp();
        }
        else {
            element.addClass('open');
            element.children('ul').slideDown();
            element.siblings('li').children('ul').slideUp();
            element.siblings('li').removeClass('open');
            element.siblings('li').find('li').removeClass('open');
            element.siblings('li').find('ul').slideUp();
        }
    });
 
    $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');
});


Нашли ошибку?
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Рекомендуем Вам зарегистрироваться или войти на сайт под своим логином, чтобы полноправно пользоваться сайтом и иметь доступ ко всем материалам.

Важно: если не отображается страница новости или ее часть просьба отключить блокировщик рекламы. Проблема может возникать из-за того что скрипт сайта реагирует на программы подобного типа.
Также Вы можете сообщить о проблеме или ошибке и ознакомиться с ответами пользователей.

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Введите два слова, показанных на изображении: *
Это интересно
Поиск и оплата штрафов ГИБДД/Налогов/Исполнительных производств
Новости Портала

Продвижение на YouTube (2019) PCRec

Знакомимся с видами и возможностями продвижения на YouTube. Автор рассказывает о своем опыте на примере реальных кейсов. А также разбираем рекламу вашего канала через YouTube. -Изучаем ...

“WEB МАШИНА” с Нуля до Эксперта! (2019) PCRec

Вы с полного нуля изучите профессиональную верстку и овладеете навыками разработки на PHP и WordPress. Вы постепенно ознакомитесь с пассивным фрилансом и начнете более углубленно изучать разработку ...

Снимай как Боженька (2019) PCRec

4 урока, после которых вы узнаете как делать БОМБИЧЕСКИЕ фотки где угодно. - Перестанете наконец удалять 100 фотографий и оставлять одну — потому что опять не так встали, не туда повернулись и на ...
Реклама Партнеров
Поддержите проект
Статистика

 
Скрипт социальных кнопок