Главная » jQuery » jQuery & CSS3 меню аккордеон с помощью CSS Menu Maker

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;
	}
});

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

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

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

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

8 комментариев
  1. Oleg:

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

    Как устранить.

    Так не удобно работать.

    Ответить
    • driver:

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

      Ответить
      • Oleg:

        Большое спасибо за помощь.

        К сожалению пока не получилось.

        Меню мелькает в определенном ему месте и исчезает.

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

        Меню очень понравилось.

        Понимаю что в этом случае Вы мне ничем не поможете но всеравно спасибо.

        С уважением Оле,г Ковальчук.

        Ответить
      • Oleg:

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

        Если можно подскажите как побороть.

        Ответить
        • driver:

          Рад за вас) а в чём искажение шрифта выражается, извините я не заметил, если можно поясните, уверен, что всё выправим)))

        • Oleg:

          Насколько я сумел разобрался происходит борьба между CSS моего сайта и CSS вашего меню а также и других ваших разработок которые я пытался подключить к своему (Школьному) сайту.

          Когда я добавляю на сайт CSS и скрипты например для вашего меню на моем сайте кувыркаются шрифты.

          Подобное происходит и с другими вашими разработками при попытке подключить их к сайту.

          Сайты я создаю на UCOZ.

          Сам я конечно не справлюсь с проблемой но если возможно помогите деду.

          Да у Вас и наворочено поделок на сайте. Как Вы справляетесь?

          Сам я програмист. Начинал еще с машин 3-го поколения. Сколько мне годиков Вы уже знаете.

          По выходе на пенсию преподаю в школе информатику.

          Сейчас работаю в основном с Visual FoxPro 9.0.

          Так вот к чему я так хитро подвожу.

          Я разработал програмный комплекс, на платформе FoxPro, для ведения классных журналов родителям и ребятишкам с использованием Интернет и Email.

          Учителя с помощью этой программы вводят оценки, поведение учеников и многое другое.

          Программа генерирует из таблиц базы данных файлы в формате HTML которые я забрасываю на специально созданный для этого сайт, где родители, введя пароль своего ученика, смотрят его безуспешные успехи.

          Это круче чем традициооный дневник который забыл, не дал, потерял и пр. Проверено.

          Так вот у меня просьба, если Вас не затруднит, зайдите на сай с журналами отберите там кнопку [ДемоКлас].

          Ссылка на сайт с журналами ниже:

          jss.zz.mu

          После выбора кнопки [Демо класс] появится окошко ввода пароля. Введите пароль ученика 888888.

          Прблема в чем.

          Я не умею создавать такие крутые всплывающие модальные окошка как делаете это Вы.

          Было бы намного удобнее если бы в этом окне можно было бы вводить, после отбора класа, не только пароль, но и разместить пару кнопок, например [Библиотека школы], [Расписание уроков класса] и возможно чтото еще другое...

          Может у Вас есть подобная разработка или подскажете где поискать что то подобyное такого окошка.

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

          Спасибо за терпение. Текст великоват но в меньше не смог уложится.

        • driver:

          В журнале вы используете стандартное окно предупреждений браузера, изменить внешний вид которого практически невозможно, можно было подключить плагин jQuery, но и у него есть свои недостатки. Конечно лучше использовать php обработчик форм, т.к. он обрабатывается на стороне сервера в отличие от javascript, на ucoz с этим делом проблема в плане реализации, есть наверное какие то модули и т.п.

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

          Как вы поняли, модальные окна можно реализовать как с использованием javascript, так и на чистом css, или же оба инструмента в связке, пример всплывающая контактная форма для сайта

          На счет конфликта некоторых свойств css, с внедрением новых стилей для тех или иных элементов сайта, необходимо быть внимательным, потому как невозможно предусмотреть заранее совпадение идентификаторов, классов и стилей.

  2. vvv:

    Добрый день!

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

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru