Вторник, 20 Январь 2015 00:00

Вертикальное всплывающее меню

Первая версия моего сайта про строение компьютера являлась своего рода тренировочной площадкой. И главное новшество, которое я хотел опробовать – это всплывающее меню, написанное на простом html-языке с использованием таблиц стилей CSS. Новая версия сайта унаследовала вертикальное всплывающее меню. О всплывающем меню и поговорим ниже.

Прежде всего нам нужен html-скелет будущего меню

<ul id="menu">
<li><a href="/link.htm">ГЛАВНАЯ</a></li>
<li>
<a href="/link-1.htm">ПУНКТ 1</a>
<ul>
<li><a href="/link-1-1.htm">ПУНКТ 1.1</a></li>
<li><a href="/link-1-2.htm">ПУНКТ 1.2</a></li>
<li><a href="/link-1-1.htm">ПУНКТ 1.3</a></li>
</ul>
</li>
<li>
<a href="/link-2.htm">ПУНКТ 2</a>
<ul>
<li><a href="/link-2-1.htm">ПУНКТ 2.1</a></li>
<li><a href="/link-2-2.htm">ПУНКТ 2.2</a></li>
<li><a href="/link-2-3.htm">ПУНКТ 2.3</a></li>
<li><a href="/link-2-4.htm">ПУНКТ 2.4</a></li>
</ul>
</li>
<li>
<a href="/link-3.htm">ПУНКТ 3</a>
<ul>
<li><a href="/link-3-1.htm">ПУНКТ 3.1</a></li>
<li><a href="/link-3-2.htm">ПУНКТ 3.2</a></li>
</ul>
</li>
<li>
<a href="/link-4.htm">ПУНКТ 4</a>
<ul>
<li><a href="/link-4-1.htm">ПУНКТ 4.1</a></li>
</ul>
</li>
</ul>

Но сделать скелет – это полдела. Пунктов и подпунктов меню может быть сколько угодно, просто нужно запомнить, что количество контейнеров <ul> и <li> должно соответствовать количеству пунктов и подпунктов меню.

Основная суть всплывающего вертикального меню кроется не в html-скелете, а в стилях. Переходим к редактированию стилей CSS для нашего всплывающего меню. Как вы обратили внимание, в скелете сделан упор на идентификатор id=”menu”. Мой совет – не стоит для каждого меню прописывать отдельные классы в CSS – во-первых, велик риск запутаться и на выходе получить раскрытое меню меню на сайте, во-вторых – не тратьте свое драгоценное время! Вот вокруг id=”menu” нам и предстоит плясать оставшееся время. Да, кстати, вы можете присвоить идентификатору другое имя – сути не поменяет.

Первый параметр в CSS будет относится в целом к меню – зададим общие настройки для элементов, входящих в контейнер <ul id=”menu”>

#menu
{
padding: 0;
margin: 0;
font-size: 10px;
font-family: Georgia;
font-weight : bolder;
}

Далее нам необходимо прописать параметры для основных пунктов всплывающего меню, которыми являются «Главная», «Пункт 1», «Пункт 2», «Пункт 3» и «Пункт 4»

#menu li
{
width: 97px;
height: 25px;
list-style: none;
float: left;
position: relative;
}

Здесь главный параметр – это float: left, который фиксирует положение пунктов слева направо. В противном случае, если не прописать параметр, то ваше меню не будет выполнять функцию раскрытия.

Кроме того, отсутствие параметра position: relative; приведёт к тому, что подпункты меню при наведении курсора мыши на пункты меню будет отображаться в крайнем углу страницы, и следовательно сделать переход на ссылку подпункта сделать будет невозможно.

Теперь работаем непосредственно с подпунктами

#menu li ul
{
list-style: none;
padding: 0;
margin: 0;
display: none;
}

Эта запись в таблицу стилей отвечает за отображение подпунктов меню, а именно по средством параметра display: none; - не отображать. Так же здесь в обязательном порядке прописываются параметры padding и margin – задают расположение всплывающих подпунктов после наведения курсора мыши на соответствующий пункт меню.

#menu li ul li
{
width: 97px;
height: 25px;
}

Запись задает размеры всплывающих подпунктов меню.

А поскольку меню представляет собой набор ссылок по страницам сайта, то нужно проработать отображение ссылок ссылок в кнопках меню. Поскольку параметры контейнеров <a> не меняются, то пропишем для них стили общими записями

#menu li a
{
width: 97px;
height: 25px;
display: block;
color: #fff;
text-decoration: none;
}

А теперь, когда мы прописали параметры скелета вертикального всплывающего меню, самое время сделать так, чтобы подпункты меню отображались при наведении курсора мыши

#menu li:hover ul, #menu li.dont_look ul
{
display: block;
}

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

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

#menu li:hover, #menu li.dont_look
{
background #fff;
}

Где вместо #fff можно указать любой другой цвет.

Вот собственно мы и завершили создание вертикального всплывающего меню по средствам стандартных html-контейнеров списков и таблицы стилей.

Для придания своему меню уникальности, можно задать цвет границам пунктов и подпунктов. Для этого достаточно добавить в запись стилей

#menu li
{
width: 97px;
height: 25px;
list-style: none;
float: left;
position: relative;
}

параметры границ border – размер, стиль границы, цвет границы.

А уже в запись

#menu li:hover, #menu li.dont_look
{
background #fff;
}

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

Спонсоры: