Автор

07 04.2013
Вертикальное раздвижное меню с описанием

Вертикальное раздвижное меню с описанием


 

Всем вам, дорогие друзья, хочется сделать оригинальный сайт, чтобы было креативно все оформлено, кроме этого бросалось в глаза необходимая информация. Для удобства, веб-мастера, разрабатывают вспомогательную навигацию, к примеру, вертикальный аккордеон с содержанием. Такой вариант станет отличным решением для сайта в темных тонах, и не только. Кроме этого мы используем градиенты, что весьма ускорит загрузку сайта. И так, давайте посмотрим, что у нас получилось.

 

ДЕМО
ИСХОДНИКИ

 

Данное меню было разработано моим другом Глебом Кавраским. Давайте же приступим к рассмотрению урока.

 

Шаг 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мс.

Вот и все. Готово!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

28 12.2014
Вертикальное раздвижное меню с описанием

Все чаще пользователи просят нас навести примеры реализации ховер-эффектов. Эти эффекты позволяют не только скрыть, но и оживить необходимые элементы. В сегодняшнем уроке мы предоставим вашему вниманию замечательный набор прикольных ховер-эффектов, в работе которых используются современные CSS техники и 3D эффекты. Такие эффекты станут отличным дополнением для изображений или мультимедийных контентов на ресурсе. Данные ховеры должны Вас вдохновить на собственные, креативные решения для ваших сайтов.


17 03.2013
Вертикальное раздвижное меню с описанием

Здесь можно бесплатно воспользоваться готовыми примерами блочной css верстки слоями. Каждый шаблон ниже содержит готовую резиновую и не резиновую верстку в две или три колонки с различным расположением. Во всех верстках css footer прижат к низу. Каждая div, блочная, дивная верстка валидна и проверена на кроссбраузерность.


30 06.2016
Вертикальное раздвижное меню с описанием

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


12 03.2013
Вертикальное раздвижное меню с описанием

Вопрос: почему мало создать сайт и разместить его адрес на POS-материалах?

Я создал сайт, потратил кучу денег на его «раскрутку», разместив везде его адрес. Почему же я до сих пор беден?!

Больной вопрос, который задают многие клиенты. Самое смешное, что они действительно искренне недоумевают, почему же столь успешный (в задумке) проект до сих пор не начинает работать. И главное, что этот клиент не из тех, кто любит строить воздушные замки и воплощать в жизнь свои самые смелые фантазии, а самый, что ни на есть трудоголик, который даже во сне посредством и благодаря своей неутомимости в работе и преданности делу способен вывести свою алхимическую «формулу бизнес-счастья и commerce-изобилия». Итак, возьмем на себя смелость и проведем небольшую работу по «препарированию» (простите за черный юмор) данной проблемы.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close