www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.

Веб-дизайн и поисковая оптимизация

Логотип Софт

Создание меню для сайта

Создание наклонного выпадающего меню

В продолжение темы создания выпадающего меню, рассмотрим экзотический "наклонный" вариант. В большинстве случаев выпадающее меню на сайте делается строго вертикальным. Однако в некоторых случаях (для особо привередливых товарищей) выпадающие списки выводят с небольшим наклоном, вроде Пизанской башни. Этот трюк очень просто реализовать обычными средствами CSS.

Действующий пример такого наклонного выпадающего меню приведен на рисунке - пункты "Продукция" и "Услуги":

  ГЛАВНАЯ ЦЕНЫ КОНТАКТЫ  

HTML-код такого меню не имеет каких-либо особенностей и аналогичен рассмотренному ранее в статье "Создание горизонтального меню с выпадающим списком", только для пунктов выпадающего меню добавлены правила CSS class="dropmenu_N", где N соответствует порядковому номеру пункта:
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td >&nbsp;</td>
<td height="35" class="dropmenu"><a href="#" title="О компании">ГЛАВНАЯ</a></td>
<td class="dropmenu"><ul>
<li>
<label>ПРОДУКЦИЯ &#9660;</label>
<ul>
<li ><a href="#" title="Дома из лафета">Дома из лафета</a></li>
<li class="dropmenu_2" ><a href="#" title="Дома из профилированного бруса">Дома из бруса</a></li>
<li class="dropmenu_3"><a href="#" title="Дома из профилированного бревна">Дома из бревна</a></li>
<li class="dropmenu_4"><a href="#" title="Погонаж">Погонажные изделия</a></li>
</ul>
</li>
</ul></td>
<td class="dropmenu"><ul>
<li>
<label>УСЛУГИ &#9660;</label>
<ul>
<li ><a href="#" title="Разработка проектов">Разработка проектов</a></li>
<li class="dropmenu_2"><a href="#" title="Продажа земельных участков">Продажа участков</a></li>
</ul>
</li>
</ul></td>
<td class="dropmenu"><a href="#" title="Прайс-лист" >ЦЕНЫ</a></td>
<td class="dropmenu"><a href="#" title="Как нас найти">КОНТАКТЫ</a></td>
<td >&nbsp;</td>
</tr>
</table>

Исходный файл CSS остается такой же, как и раньше, только в него необходимо добавить следующие правила для dropmenu_N:
.dropmenu_2 {
left: -10px;
}
.dropmenu_3 {

left: -20px;
}
.dropmenu_4 {

left: -30px;
}
... и т.д.

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

Для замедления разворачивания выпадающего меню в рассмотренном примере использованы простейшие средства анимации с помощью jQuery (см. статью "Создание простого анимированного меню").

7.07.2014 г.

Задать вопрос автору





Яндекс.Метрика

Copyright © 2008 - Марк Розенталь e-mail: Мой e-mail
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru
Ключевые слова: выпадающее меню на HTML и CSS, горизонтальное меню с выпадающим списком, раскрывающееся меню, анимированное меню, jQuery меню