www.seomark.ru
Обзоры интересных и полезных программ, фотография, радио, веб-дизайн и т.д. и т.п. и др. и пр.
Веб-дизайн и поисковая оптимизация
Создание меню для сайта
• Создание меню для сайта
• Создание выпадающего меню
• Пример горизонтального меню с выпадающим списком
• Создание простого анимированного меню
• Создание наклонного выпадающего меню
Создание наклонного выпадающего меню
В продолжение темы создания выпадающего меню, рассмотрим экзотический "наклонный" вариант. В большинстве случаев выпадающее меню на сайте делается строго вертикальным. Однако в некоторых случаях (для особо привередливых товарищей) выпадающие списки выводят с небольшим наклоном, вроде Пизанской башни. Этот трюк очень просто реализовать обычными средствами CSS.
Действующий пример такого наклонного выпадающего меню приведен на рисунке - пункты "Продукция" и "Услуги":
| ГЛАВНАЯ | ЦЕНЫ | КОНТАКТЫ |
HTML-код такого меню не имеет каких-либо особенностей и аналогичен рассмотренному ранее в статье "Создание горизонтального меню с выпадающим списком", только для пунктов выпадающего меню добавлены правила CSS class="dropmenu_N", где N соответствует порядковому номеру пункта:
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" >
<tr>
<td > </td>
<td height="35" class="dropmenu"><a href="#" title="О компании">ГЛАВНАЯ</a></td>
<td class="dropmenu"><ul>
<li>
<label>ПРОДУКЦИЯ ▼</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>УСЛУГИ ▼</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 > </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:
Перепечатка материалов сайта разрешается при условии сохранения имени автора и гиперссылки на www.seomark.ru