Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

jQuery & CSS3 меню аккордеон с помощью CSS Menu Maker

Еще совсем недавно, работая над очередным шаблоном, мне приходилось перелопачивать кучу кода, подбирать цветовую гамму, чтобы сделать оригинальное навигации. Уверен, вы проделывали тужу работу и не раз. Сейчас, на просторах глобальной сети появляются различные онлайн-генераторы и целые конструкторы, с помощью которых можно за несколько минут забабахать вполне себе достойное любого типа, горизонтальное, вертикальное, многоуровневое и полностью адаптивное.

Какие-то сервисы предлагают работать с чистого листа, предоставляя лишь выбор различных инструментов и визуальный предпросмотр результата, а более продвинутые, предлагают готовые шаблоны менюшек, которые вы с легкость можете подстроить в соответствии вашему вкусу и требованиям дизайна вашего проекта.
CSS Menu Maker как раз и является таким онлайн-конструктором, загляните на досуге, и я уверен, ваша обойма инструментов, обязательно пополнится.
В подтверждение всему вышеизложенному, хочу продемонстрировать вам меню созданное с помощью этого онлайн-конструктора.

 

CSS & jQuery Меню Аккордеон

 

Если вы дорожите каждым пикселем свободного места в боковой колонке своего сайта, то это компактное меню стиле «» именно для вас! Посмотрите живой пример работы этого замечательного меню, а затем без суеты, разберём его на составляющие.

CSS Menu Maker отлично справляется со своим делом, на выхлопе мы получаем прилично структуированную разметку HTML и хорошо читаемый, упорядоченный код css, все необходимые библиотеки подключены, расклад предельно ясен и понятен.

HTML Разметка

<ul id="menu">
<ul>
   <li><a href="#"><i class="fa fa-home fa-fw"></i>&nbsp;<span>Главная</span></a></li>
   <li class="active has-sub"><a href="#"><i class="fa fa-sitemap"></i>&nbsp; <span>Категории</span></a>
      <ul>
         <li class="has-sub"><a href="#"><span>Категория 1</span></a>
            <ul>
               <li><a href="#"><span>Подкатегория 1</span></a></li>
               <li><a href="#"><span>Подкатегория 2</span></a></li>
               <li class="last"><a href="#"><span>Подкатегория 3</span></a></li> 
            </ul>
         </li>
         <li class="has-sub"><a href="#"><span>Категория 2</span></a>
            <ul>
               <li><a href="#"><span>Подкатегория 1</span></a></li>
               <li class="last"><a href="#"><span>Подкатегория 2</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href="#"><i class="fa fa-life-ring"></i>&nbsp; <span>О Сайте</span></a></li>
   <li class="last"><a href="#"><i class="fa fa-envelope"></i>&nbsp; <span>
       Контакты</span></a></li>
</ul>
</ul>

Как видите, меню построено в виде неупорядоченного списка с вложениями. Основным пунктам добавлены иконки из коллекции Font Awesome, <i> тэг с названием значка в конкретном CSS классе:

<i class="fa fa-home fa-fw">

Иконки подгружаются из библиотеки Bootstrap, которую мы заблаговременно подключили в разделе <head>...</head> нашего документа:

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

Возникнет потребность изменить иконки, узнать класс той или иной шрифт-иконки, можно непосредственно на сайте разработчика: Тынц>>.
Каркас выстроен, осталось самое интересное, сформировать стили CSS, чтобы наш «аккордеон», визуально выглядел, как надо.

Стили CSS

В оформлении внешнего вида задействованы современные свойства , лёгкая наружная тень с помощью box-shadow, мягкий налёт градиента через background: linear-gradient и добавим чуточку тени для текста. Как вы понимаете, в старых версиях браузера IE, наш замечательный аккордеон, будет выглядеть, мягко говоря, немного иначе (((.

/*
 * Стили для меню аккордеон
 */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic);
#menu,
#menu ul,
#menu ul li,
#menu ul li a {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
}
#menu {margin: 0 auto;
  width: 200px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-family: 'Open Sans', Calibri, Arial, sans-serif;
}    
#menu ul ul {
  display: none;
}
.align-right {
  float: right;
}
#menu > ul > li > a {
  z-index: 2;
  padding: 15px 20px;
  border-top: 1px solid #1682ba;
  border-right: 1px solid #1682ba;
  border-left: 1px solid #1682ba;
  background: #36aae7;
  background: -webkit-linear-gradient(#36aae7, #1fa0e4);
  background: -moz-linear-gradient(#36aae7, #1fa0e4);
  background: -o-linear-gradient(#36aae7, #1fa0e4);
  background: -ms-linear-gradient(#36aae7, #1fa0e4);
  background: linear-gradient(#36aae7, #1fa0e4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}
#menu > ul > li > a:hover,
#menu > ul > li.active > a,
#menu > ul > li.open > a {
  background: #1fa0e4;
  background: -webkit-linear-gradient(#1fa0e4, #1992d1);
  background: -moz-linear-gradient(#1fa0e4, #1992d1);
  background: -o-linear-gradient(#1fa0e4, #1992d1);
  background: -ms-linear-gradient(#1fa0e4, #1992d1);
  background: linear-gradient(#1fa0e4, #1992d1);
  color: #eeeeee;
}
#menu > ul > li.open > a {
  border-bottom: 1px solid #1682ba;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
}
#menu > ul > li:last-child > a,
#menu > ul > li.last > a {
  border-bottom: 1px solid #1682ba;
}
.holder {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
}
.holder::after,
.holder::before {
  position: absolute;
  right: 20px;
  z-index: 10;
  display: block;
  width: 6px;
  height: 6px;
  content: "";
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#menu > ul > li > a:hover > span::after,
#menu > ul > li.active > a > span::after,
#menu > ul > li.open > a > span::after {
  border-color: #eeeeee;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-top-color: inherit;
  border-left: 2px solid;
  border-left-color: inherit;
}
#menu ul ul li a {
  z-index: 1;
  padding: 10px 20px;
  border-right: 1px solid #32373e;
  border-bottom: 1px solid #32373e;
  border-left: 1px solid #32373e;
  background: #49505a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  color: #eeeeee;
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
}
#menu ul ul li:hover > a,
#menu ul ul li.open > a,
#menu ul ul li.active > a {
  background: #424852;
  color: #fff;
}
#menu ul ul li:first-child > a {
  box-shadow: none;
}
#menu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#menu ul ul ul li a {
  padding-left: 30px;
}
#menu > ul > li > ul > li:last-child > a,
#menu > ul > li > ul > li.last > a {
  border-bottom: 0;
}
#menu > ul > li > ul > li.open:last-child > a,
#menu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#menu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#menu ul ul li.has-sub > a::after {
  position: absolute;
  top: 11.5px;
  right: 20px;
  z-index: 10;
  display: block;
  width: 5px;
  height: 5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  content: "";
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#menu ul ul li.active > a::after,
#menu ul ul li.open > a::after,
#menu ul ul li > a:hover::after {
  border-color: #ffffff;
}

Шрифт текста пунктов меню, используем из семейства Open Sans с поддержкой кирилицы, подключив его к CSS через @import, напрямую из огромной библиотеки шрифтов Google. Вам ничто не мешает использовать любой другой шрифт, лишь бы в радость и на пользу дела.

Вот и всё! Мы построили каркас, обернули его в красивую обёртку, теперь необходимо «ударить по мехам», завести наш аккордеон. Для этого нам понадобится помощь . Если у вас ещё не подключена актуальная версия этой популярнейшей javscript библиотеки, смело подключайте, добавив в конец документа, пред тегом следующее:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

И тут же след за этой строчкой, остаётся подключить сам исполняющий плагин, заблаговременно упакованный в отдельный файл и помещенный в папочку с js.

<script src="js/script.js"></script>

Хотите посмотреть на js в развёрнутом виде? Пожалуйста:

( function( $ ) {
$( document ).ready(function() {
$('#menu 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();
                }
        });
 
        $('#menu>ul>li.has-sub>a').append('<span class="holder"></span>');
 
        (function getColor() {
                var r, g, b;
                var textColor = $('#menu').css('color');
                textColor = textColor.slice(4);
                r = textColor.slice(0, textColor.indexOf(','));
                textColor = textColor.slice(textColor.indexOf(' ') + 1);
                g = textColor.slice(0, textColor.indexOf(','));
                textColor = textColor.slice(textColor.indexOf(' ') + 1);
                b = textColor.slice(0, textColor.indexOf(')'));
                var l = rgbToHsl(r, g, b);
                if (l > 0.7) {
                        $('#menu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
                        $('#menu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
                }
                else
                {
                        $('#menu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
                        $('#menu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
                }
        })();
 
        function rgbToHsl(r, g, b) {
            r /= 255, g /= 255, b /= 255;
            var max = Math.max(r, g, b), min = Math.min(r, g, b);
            var h, s, l = (max + min) / 2;
 
            if(max == min){
                h = s = 0;
            }
            else {
                var d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch(max){
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h /= 6;
            }
            return l;
        }
});

Наличием большого количества настраиваемых параметров плагин не блещет, но всё то под что он заточен, выполняет исправно. При желании, вы сможете поэкспериментировать с некоторыми значениями, главное не переусердствовать. )))

Вот тетерь уж, точно всё. Компактное меню в стиле «аккордеон», полностью готово к работе. Это был всего лишь маленький пример того, какие горизонты и возможности открывают нам современные веб-инструменты. А в связке с неуёмной фантазией и огромным желанием, можно творить, творить и творить…

С уважением, Андрей.

Удачи! Буду очень благодарен, если поделитесь ссылкой на запись в своих соц. сетях:

Всего комментариев: 9

  • Oleg: 5 октября, 2014 в 14:27

    При переходе на другую страницу сайта закрывается.
    Как устранить.
    Так не удобно работать.

    Ответить
    • driver: 5 октября, 2014 в 22:15

      Это лишь рабочий пример формирования меню с помощью jQuery и CSS3, чтобы при обновлении страницы открытый пункт меню оставался открытым подключите jQuery Cookie, если не знаете что это такое, воспользуйтесь готовым решениями

      Ответить
      • Oleg: 8 октября, 2014 в 22:11

        Большое спасибо за помощь.
        К сожалению пока не получилось.
        Меню мелькает в определенном ему месте и исчезает.
        Может не поверите но мне 67 годиков и уже тяжеловато угнаться за новым, например с php пока трудновато.
        Меню очень понравилось.
        Понимаю что в этом случае Вы мне ничем не поможете но всеравно спасибо.
        С уважением Оле,г Ковальчук.

        Ответить
      • Oleg: 11 октября, 2014 в 21:27

        Добился. Меню заработало но искажает шрифты на сайте.
        Если можно подскажите как побороть.

        Ответить
      • Rud0y: 23 декабря, 2018 в 16:21

        если открыть пункт меню и закрыть, ссылка исчезает, как убрать это, подскажите пожалуйста

        Ответить
  • vvv: 25 июля, 2016 в 12:22

    Добрый день!
    Подскажите пожалуйста как сделать все пункты сразу раскрытыми?!

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>