Всем вам, дорогие друзья, хочется сделать оригинальный сайт, чтобы было креативно все оформлено, кроме этого бросалось в глаза необходимая информация. Для удобства, веб-мастера, разрабатывают вспомогательную навигацию, к примеру, вертикальный аккордеон с содержанием. Такой вариант станет отличным решением для сайта в темных тонах, и не только. Кроме этого мы используем градиенты, что весьма ускорит загрузку сайта. И так, давайте посмотрим, что у нас получилось.
Данное меню было разработано моим другом Глебом Кавраским. Давайте же приступим к рассмотрению урока.
Шаг 1. HTML
Для начала нам необходимо подключить библиотеку jquery-latest:
<script type="text/javascript" src="/jquery-latest.js"></script>
Далее нам надо построить саму разметку, для каждого основного контейнера с содержанием мы будем использовать классы "button_podtext".
<div id="menu_pop">
<ul id="accordion">
<li><div class="first">CSS3<br>
<span class="button_podtext">Основные возможности</span></div>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
</ul>
</li>
<li><div>HTML5<br>
<span class="button_podtext">Продолжение или новая платформа?</span></div>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
<li><a href="#">Ссылка 4</a></li>
</ul>
</li>
<li><div>WordPress<br>
<span class="button_podtext">Новости в мире CMS</span></div>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul>
<li><div>Основное<br>
<span class="button_podtext">Блог, Тесты, Форум</span></div>
<ul>
<li><a href="#">Ссылка 1</a></li>
<li><a href="#">Ссылка 2</a></li>
<li><a href="#">Ссылка 3</a></li>
</ul>
</li>
</ul>
<div class="menu_bottom"><i>Разработано Глебом Кавраским</i></div>
C разметкой разобрались, переходим к следующему шагу.
Шаг 2. CSS
Нам необходимо создать градиентную заливку меню, кроме этого создать окантовку, тени, и установить параметры для шрифтов и подпунктов аккордеона:
#menu_pop {
margin: 120px auto ;
width: 280px;
background: url('wood.jpg');
border-radius: 6px;
padding: 7px;
box-shadow: 0px 1px 5px #000;
}
#accordion {
list-style: none;
padding: 0px;
margin: 0px;
}
#accordion .button_podtext {
font-size: 9px;
color: #b1b1b1;
}
#accordion div {
display: block;
cursor: pointer;
text-decoration: none;
display: block;
padding: 8px 0px 8px 11px;
background: #000;
color: #fff;
font-size: 12px;
font-family: tahoma;
background: url('bg.png') 0px 0px;
text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);
list-style: circle;
}
#accordion div:hover {
background: url('bg.png') 0px -44px;
}
.first {
border-radius: 3px 3px 0px 0px;
}
#accordion ul a {
color: #777;
}
#accordion ul {
list-style: none;
padding: 5px;
font-size: 10px;
font-family: Tahoma;
background: #1a1a1a;
box-shadow: inset 0px 3px 6px rgba( 0, 0, 0, 0.7);
display: none;
}
#accordion ul li {
font-weight: normal;
cursor: auto;
padding: 3px 7px;
}
#accordion a {
text-decoration: none;
}
#accordion a:hover {
text-decoration: underline;
}
#menu_pop .menu_bottom {
display: block;
padding: 3px 6px 3px;
background: #000;
color: #fff;
font-size: 9px;
border-radius: 0px 0px 3px 3px;
font-family: georgia;
background: url('bg_bottom.png') 0px 0px;
text-align: right;
text-shadow: 0px 1px 0px rgba( 0, 0, 0, 0.6);
}
Мы используем тени для придания меню небольшой объемности. Кроме это позволит создать иллюзию вдавленных кнопок. Переходим к следующему шагу.
Шаг 3. jQuery
Так как мы используем плагин jQuery, нам необходимо его вызвать, вызов плагина нам необходимо инициализировать в основном документе, для работоспособности на остальных страницах.
//Определяем по нажатию на какой элемент должны открыватся подменю
$("#accordion > li > div").click(function(){
if(false == $(this).next().is(':visible')) {
$('#accordion ul').slideUp(280);
}
$(this).next().slideToggle(280);
});
$('#accordion ul:eq(0)').show();
Кроме этого вы можете указать в данном фрагменте кода скорость открытия и закрытия подпунктов. По умолчанию она установления на значении 280мс.