Всем, снова здравствуйте.
Давно не обращался к разработке меню для сайтов, а технологии не стоят на месте, да и наш пытливый ум не дает покоя. Меня спрашивают, как сделать меню в стиле "аккордеон" с функцией открытия и закрытия подменю не при наведении, а при нажатии на пункт меню. Сегодня именно о таком способе построения навигации и пойдет речь, мы рассмотрим технику создания меню в стиле "аккордеон" на основе CSS и совсем немного jQuery.
Но для начала, хотелось бы выделить основные преимущества данного меню:
Вопервых, это не большие размеры, а стало быть возможность размещения в боковых панелях сайта.
Вовторых, это многофункциональность вложенных элементов меню.
Третьим и немаловажным фактом является гибкость настройки отображаемых элементов, все ограничивается только фантазией разработчика.
В начале документа html между тегами <head> и </head> размещаете три заветные строчки:
Для того чтобы какой-либо из пунктов меню автоматически после загрузки страницы отображался в развернутом виде можно воспользоваться другим дополнительным классом, например "expand".
Теперь наступает самый интересный момент, во всяком случае для меня, это оформление нашего "аккордеона" с помощью таблицы стилей css, а с открывшимися в последнее время новыми возможностями, добиться можно потрясающих результатов, при этом совсем не используя графических фалов в работе.
И так, код стилей меню, кому то может показаться слишком объемным, так что к некоторым пунктам я добавил пояснения:
Оформляя главные пункты меню, добавил функцию градиента для фона, благо с недавних пор практически все современные браузеры поддерживают это свойство CSS3. Ну а для притормаживающего IE понадобился специальный фильтр, с помощью которого градиент отображается более или менее нормально, правда в силу своей испорченности и врожденной ненависти к веб-дизайнерам, этот браузер переносит градиент главных пунктов меню на выпадающие списки подменю. Так что применять функию градиента или нет решать вам, я так думаю, пошел он этот IEшка в жопу...
Изменяя цветовую палитру и экспериментируя с переходами цвета в функции градиента, вы всегда сможете подвести меню под дизайн своего сайта, в примере использованы темные тона и контрастный красный цвет для активных пунктов меню.
Все это конечно очень даже хорошо, но все же не стоит забывать о том, что код CSS не свободен от недостатков ( вдруг я гдето накосячил ) и представлен в ознакомительных целях. Работая над построением меню, проверяйте конечный результат на кроcсбраузерность и тогда все у вас получится.
Всем спасибо и удачи.
HTMLPad 2010 - всеобъемлющий редактор HTML, CSS, JavaScript и XHTML, который на данный момент является выбором тысяч веб-разработчиков и преподавателей более чем в 50-ти странах.
Давно не обращался к разработке меню для сайтов, а технологии не стоят на месте, да и наш пытливый ум не дает покоя. Меня спрашивают, как сделать меню в стиле "аккордеон" с функцией открытия и закрытия подменю не при наведении, а при нажатии на пункт меню. Сегодня именно о таком способе построения навигации и пойдет речь, мы рассмотрим технику создания меню в стиле "аккордеон" на основе 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, функцию меню и таблицу стилей, которые найдете в исходниках. Используя эти не хитрые инструменты, можно в последствии изменить внешний вид и настроить параметры работы меню исходя из своих потребностей.<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>
В начале документа 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". В данном и конкретном случае мы получаем раздвижной "аккордеон" с функцией открытия и закрытия непосредственно при нажатии на главный пункт меню.<script src="menu.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
Для того чтобы какой-либо из пунктов меню автоматически после загрузки страницы отображался в развернутом виде можно воспользоваться другим дополнительным классом, например "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;
}
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-ти странах.
Скажите пожалуйста, как указать путь к базе jquery в blogger.com, куда мне эту базу залить?
ОтветитьУдалитькак воспользоваться menu.js и jquery-1.4.2.min.js
ОтветитьУдалитьGraft XD и Krismarcker
ОтветитьУдалитьВ Blogger разместить и подключить свои скрипты, существует возможность залив их на стороннии хранилища, подробно расписано: Здесь
Здравствуйте. Спасибо за отличную статью! Использую Ваше меню у себя на сайте) Но есть один большой вопрос.. помогите пожалуйста разобраться, думаю многим тоже будет интересно. Как у этого меню сделать подрубрики?
ОтветитьУдалитьЖанры
Поп
Диско-поп
English
Русский
Традиционный
R&B
Тоесть, есть меню "Поп", в нем мы имеем три рубрики "Диско-Поп", "Традиционный" и "R&B" они работают праильно и хорошо, а как добавить например в рубрику "Диско-Поп" две подрубрики: "English" и "Русский"? я попытался это сделать в примере выше, но на практике получается, что когда мы нажимаем на "Диско-Поп" открываются подрубрики "English" и "Русский" но при повторном нажатии они не сворачиваются, как должны.. (Извините за неправильный код, иначе в коменты не вставлялся)
@Роман Спасибо за интерес к статье. В данном меню не предусматривалось многоуровневые вложения в виде подрубрик. Понимаю ваше желание расширить потенциал меню, но думаю выглядеть это будет не очень.... Необходимо будет перестроить всю структуру, а это уже совсем другая история. На досуге проработаю этот вопрос и если получится что нибудь стоящее вы узнаете об этом первый )))
ОтветитьУдалитьЗдравствуйте! Я хотел бы узнать как сделать это меню таким, чтобы при открытии вкладки подменю, на новой странице выбранное подменю не закрывалось, а оставалось в таком же состоянии, был бы крайне благодарен вам за эту помощь
ОтветитьУдалитьЗдравствуйте! Я хотел бы узнать как сделать это меню таким, чтобы при открытии вкладки подменю, на новой странице выбранное подменю не закрывалось, а оставалось в таком же состоянии, был бы крайне благодарен вам за эту помощь
ОтветитьУдалитьприсоединяюсь, ето серйозная недоработка, таких меню куча, но нигде нет ответа как сделать чтобы при клике на подменю, оно оставалось развернутым, дайте ответ пожалуйста, или напишите статью, если ето так сложно сделать, раз негде нет ответа
@Анонимный
ОтветитьУдалитьК сожалению я не прорабатывал эту функцию относительно к этому меню, но обязательно постараюсь заняться этой темой.
Спасибо за толковую публикацию. Просто огромное спасибо!
ОтветитьУдалить@Анонимный
ОтветитьУдалитьРад, что вам понравилась эта работа:)
Здравствуйте!!!
ОтветитьУдалитьСпасибо Большое за полезную статью!!!
Если не сложно, подскажите пожалуйста, в каком параметре меняется цвет фона меню: активного, при наведении и выбранного? Сколько не искал так и не смог понять. Заранее благодарен. :-)
@Иван Иванов
ОтветитьУдалитьСпасибо за интерес к статье.
В примере кода прописаны комментарии для фона и градиента пунктов меню при наведении, а так же для активных пунктов меню. Для изменения фона пунктов при наведении экспериментируйте с параметрами свойств background правил где присутствует псевдокласс a:hover