Всем, снова здравствуйте.
Давно не обращался к разработке меню для сайтов, а технологии не стоят на месте, да и наш пытливый ум не дает покоя. Меня спрашивают, как сделать меню в стиле "аккордеон" с функцией открытия и закрытия подменю не при наведении, а при нажатии на пункт меню. Сегодня именно о таком способе построения навигации и пойдет речь, мы рассмотрим технику создания меню в стиле "аккордеон" на основе CSS и совсем немного jQuery.
Но для начала, хотелось бы выделить основные преимущества данного меню:
Вопервых, это не большие размеры, а стало быть возможность размещения в боковых панелях сайта.
Вовторых, это многофункциональность вложенных элементов меню.
Третьим и немаловажным фактом является гибкость настройки отображаемых элементов, все ограничивается только фантазией разработчика.
Разметка HTML
Как всегда свою работу начнем с разметки непосредственно на странице html. Ничего сверхестественного и навароченного, наше меню будет выглядеть в виде простого списка с определенными классами, необходимыми для последующей доводки и оформления. Исходя из примера код html будет следующим:
<ul class="menu collapsible">
<li>
<a href="#">Рубрики</a>
<ul class="acitem">
<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>
<li>
<a href="#">Архивы</a>
<ul class="acitem">
<li><a href="#">Январь (10)</a></li>
<li><a href="#">Февраль (15)</a></li>
<li><a href="#">Март (8)</a></li>
<li><a href="#">Апрель (12)</a></li>
<li><a href="#">Май (9)</a></li>
<li><a href="#">Июнь (4)</a></li>
</ul>
</li>
</ul>
Для полноценной работы нам потребуется подключить JQuery, функцию меню и таблицу стилей, которые найдете в исходниках. Используя эти не хитрые инструменты, можно в последствии изменить внешний вид и настроить параметры работы меню исходя из своих потребностей.
В начале документа html между тегами
<head> и
</head> размещаете три заветные строчки:
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
Как вы видите основной элемент в меню это тег UL, который имеет класс "
menu" с дополнительным классом "
collapsible". В данном и конкретном случае мы получаем раздвижной "аккордеон" с функцией открытия и закрытия непосредственно при нажатии на главный пункт меню.
Для того чтобы какой-либо из пунктов меню автоматически после загрузки страницы отображался в развернутом виде можно воспользоваться другим дополнительным классом, например "
expand".
CSS
Теперь наступает самый интересный момент, во всяком случае для меня, это оформление нашего "аккордеона" с помощью таблицы стилей css, а с открывшимися в последнее время новыми возможностями, добиться можно потрясающих результатов, при этом совсем не используя графических фалов в работе.
И так, код стилей меню, кому то может показаться слишком объемным, так что к некоторым пунктам я добавил пояснения:
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul.menu a {
display: block;
text-decoration: none;
text-align: left;
}
ul.menu li {
margin-top: 1px;
}
ul.menu li a, ul.menu ul.menu li a {
padding: 0.5em;
/* закругленные углы пунктов меню */
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
color: #d7d7d7;
border: solid 1px #333;
background: #333;
/* функция градиента для Webkit - браузеров */
background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000));
/* функция градиента для Firefox + */
background: -moz-linear-gradient(top, #666, #000);
/* функция градиента для Opera 11 + */
background-image: -o-linear-gradient(top,rgb(102,102,102),rgb(0,0,0));
/* примочка для тупого IE */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000');
}
ul.menu li a:hover, ul.menu ul.menu li a:hover {
/* фон и градиент пунктов меню при наведении */
background: #000;
background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000));
background: -moz-linear-gradient(top, #444, #000);
background-image: -o-linear-gradient(top,rgb(68,68,68),rgb(0,0,0));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000');
}
ul.menu li ul li a, ul.menu ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover, ul.menu ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
ul.menu ul.menu li a:hover {
border-left: 0;
padding-left: 0.5em;
}
ul.menu ul.menu {
border-left: 5px #f00 solid;
}
ul.menu a.active, ul.menu ul.menu li a.active, ul.menu a.active:hover, ul.menu ul.menu li a.active:hover {
/* фон и градиент активных пунктов меню */
text-decoration: none;
color: #faddde;
border: solid 1px #980c10;
background: #d81b21;
background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317));
background: -moz-linear-gradient(top, #ed1c24, #aa1317);
background-image: -o-linear-gradient(top, #ed1c24, #aa1317);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
div.panel {
border: 1px #000 solid;
padding: 5px;
margin-top: 1px;
}
ul.menu div.panel a, ul.menu div.panel li a:hover {
display :inline;
color: #666;
background: none;
margin: 0;
padding: 0;
border: none;
font-weight: bold;
}
ul.menu div.panel a:hover {
color: #000;
text-decoration: underline;
}
Оформляя главные пункты меню, добавил функцию градиента для фона, благо с недавних пор практически все современные браузеры поддерживают это свойство CSS3. Ну а для притормаживающего
IE понадобился специальный фильтр, с помощью которого градиент отображается более или менее нормально, правда в силу своей испорченности и врожденной ненависти к веб-дизайнерам, этот браузер переносит градиент главных пунктов меню на выпадающие списки подменю. Так что применять функию градиента или нет решать вам, я так думаю, пошел он этот IEшка в жопу...
Изменяя цветовую палитру и экспериментируя с переходами цвета в функции градиента, вы всегда сможете подвести меню под дизайн своего сайта, в примере использованы темные тона и контрастный красный цвет для активных пунктов меню.
Все это конечно очень даже хорошо, но все же не стоит забывать о том, что код CSS не свободен от недостатков ( вдруг я гдето накосячил ) и представлен в ознакомительных целях. Работая над построением меню, проверяйте конечный результат на кроcсбраузерность и тогда все у вас получится.
Всем спасибо и удачи.
* * * * *
HTMLPad 2010 - всеобъемлющий редактор HTML, CSS, JavaScript и XHTML, который на данный момент является выбором тысяч веб-разработчиков и преподавателей более чем в 50-ти странах.
