ArtWeb-Design

Создание, редизайн и продвижение сайтов,
профессиональное качество, низкие цены

Выпадающее меню без скриптов

02.02.2008 | 04:14 | автор: id

Пользователь id

Темный админ

Зарегистрирован: 01.01.1970
Комментариев: 4
Личное собщение

Постоянно прихожу в ужас, когда вижу коды выпадающих меню, написанные при помощи километров JavaScript. Все делается элементарно просто.

Шаг 1. Пишем что-то типа этого:

<span id="menu">

<a href="/item/">Заголовок</a>

<ol>

<li><a href="/item1/">Заголовок 1</a></li>

<li><a href="/item2/">Заголовок 2</a></li>

<li><a href="/item3/">Заголовок 3</a></li>

<li><a href="/item4/">Заголовок 4</a></li>

</ol>

</span>

Можно еще проще, но не в этом смысл.

Шаг 2. Пишем стили к меню

#menu{

position:relative;

}

#menu ol{

display:none;

position:absolute;

top:15px; //тут нужно подбирать

left:0;

}

#menu:hover ol{

display:block;

}

Код писал с головы, но должно работать. Если что не так - пишите - исправим.

Для красоты можно сделать пункты меню выделенными при наведении мыши. Добавим еще один стиль:

#menu ol li:hover{

background-color:#abcdef; //Тут любой цвет

}

Все просто и лаконично. И не нужно писать никаких скриптов.

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

* Рекомендую прочитать поправку к этому материалу.

Перепечатка разрешена только при начичии ссылки на источник: http://artweb-design.org/blog/full/6/

Ключевые слова: HTML, CSS

Просмотров: 687, рейтинг: -----

Комментарии:

Эту новость еще никто не закомментировал