... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

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

Готовые решения (стр.1)

 

 


Выпадающее меню на CSS

На странице «Слои CSS» мы уже приводили пример создания выпадающего меню. «посмотреть пример». При создании данного меню используется JavaScript. Попробуем создать меню с использование "чистого кода".

Все, кому приходилось создавать выпадающие меню, знаком с тем, сколько скриптов необходимо для этого. Но, используя грамотно структурированный HTML-код и CSS-правила, можно сделать отличное выпадающее меню, которое легко менять и дополнять, и при этом оно будет работать во всех браузерах. И самое главное для нас - никакого JavaScript (ну так, немного)!

Первый шаг создания меню является построение его структуры. Будем использовать ненумерованный список, в котором разместим подменю, выступающие как списки в рамках пунктов родительского списка. Это просто:

<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">О компании</a>
<ul>
<li><a href="#">История</a></li>
<li><a href="#">События</a></li>
<li><a href="#">Наш офис</a></li>
</ul>
</li>
<li><a href="#">Услуги</a>
<ul>
<li><a href="#">Web Дизайн</a></li>
<li><a href="#">Интернет Маркетинг</a></li>
<li><a href="#">Хостинг</a></li>
<li><a href="#">Доменные имена</a></li>
<li><a href="#">Поддержка</a></li>
</ul>
</li>
<li><a href="#">Контакты</a>
<ul>
<li><a href="#">В России</a></li>
<li><a href="#">Во Франции</a></li>
<li><a href="#">В США</a></li>
<li><a href="#">В Австралии</a></li>
</ul>
</li>
</ul>

Посмотрите на приведённый выше пример. Мы увидим простой список элементов. Теперь добавим немного стилей. Сначало удалим отступы и маркеры в ненумерованном списке, а потом зададим ширину пунктов меню.

ul { margin: 0; padding: 0; list-style: none; width: 150px; }

Теперь необходимо задать положение элементов списка. Они по умолчанию располагаются вертикально, то, что нам необходимо. Но нам необходимо задать значение для position как relative, и всё потому, что нам нужно будет относительно их абсолютно позиционировать подменю.



ul li { position: relative; }

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

li ul { position:absolute; left:149px; top:0; display: none; }

Используя атрибуты "left" и "top", мы абсолютно позиционировали каждое подменю в рамках пункта меню "родителя". Я задал атрибуту "left" значение в 149px (одним пикселем меньше, чем ширина родительского пункта), это позволяет субменю перекрывать главное меню, не создавая при этом двойной границы.

Необходимо также присвоить атрибуту "display" значение "none", так как мы не хотим видеть подменю при открытии страницы.

У нас теперь есть каркас меню «посмотреть»

 

Страница: - 1 - | - 2 -

 

Наверх страницы

 

Уроки CSS © 2007 - 2017 г. Все права защищены