Спонсоры:

Всплывающее меню в CSS

Cascading Style Sheet - таблицы стилей

Всплывающее меню в CSS

Сообщение DuM4uK » 30 янв 2012, 16:55

Для успешного выполнения, да бы исключить путаницу и громоздкие коды, я предлагаю сделать html-документ и CSS-документ (см. интеграцию css в html). Всплывающее меню я сделал на своём новом сайте про компьютеры

Создаём скелет в html-документе
Код: Выделить всё
<ul id="menu">
<li><a href="link_1.htm">Пункт 1</a></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>
</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>
<li><a href="link_3_3.htm">Пункт 3.3</a></li>
<li><a href="link_3_4.htm">пункт 3.4</a></li>
</ul>
</li>
<li><a href="link_4.htm>Пункт 4</a>
<ul>
<li><a href="link_4_1.htm">Пункт 4.1</a></li>
<li><a href="link_4_2.htm">Пункт 4.2</a></li>
</ul>
</li>
</ul>


Записываем параметры для идентификатора menu в CSS-документе
Код: Выделить всё
#menu
{
padding: 0;
margin: 0;
font-size: 14px;
font-family: Arial;
font-weight : bolder;
}


Здесь padding и margin отвечают за расположение самого меню относительно элементов html-документа документа.

Далее задаём параметры ячеек пунктов меню первого уровня
Код: Выделить всё
#menu li
{
width: 150px;
height: 35px;
list-style: none;
float: left;
padding: 0;
margin: 0;
text-align: center;
background: #CFCECE;
position: relative;
padding-top: 10px;
border-left: 1px solid #8F8E8E;
border-right: 1px solid #8F8E8E;
border-top: 1px solid #8F8E8E;
}


Данная запись идентификатора задаёт размеры ячеек, их позиции относительно друг друга и их границы
Изображение

Код: Выделить всё
#menu li ul
{
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
position: absolute;
left: 0;
top: 45px;
}


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

Код: Выделить всё
#menu li ul li
{
width: 150px;
height: 35px;
float: none;
margin: 0;
text-align: center;
background: #A3A3A3;
}


Данные параметры характеризуют пункты меню нижних уровней. В частности, задают размеры, их позиционирование относительно друг друга и фон.
Изображение

Код: Выделить всё
#menu li a
{
width: 150px;
height: 20px;
display: block;
color: #000;
text-decoration: none;
}
#menu li a:hover
{
width: 150px;
height: 20px;
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: #7AA484;
border-left : 1px solid #00FF3C;
border-right : 1px solid #00FF3C;
}


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

Если б данной записи не было, то меню б выглядело следующим образом
Изображение
Изображение
Аватара пользователя
DuM4uK
 
Сообщения: 1080
Зарегистрирован: 29 ноя 2011, 17:10
Откуда: Град креста

Re: Всплывающее меню в CSS

Сообщение Night_Pilgrim » 30 янв 2012, 17:27

*DnK* полезная статья...
Изображение
Он yходит один, и не слышно шагов,
Он не смотpит назад, он не видит вpагов.
Он yходит тyда, где зови не зови -
По колено тpавы и по пояс любви.

© Белая гвардия
Аватара пользователя
Night_Pilgrim
Князь Тишины
 
Сообщения: 1968
Зарегистрирован: 23 ноя 2011, 20:38
Откуда: Бездна


Вернуться в CSS

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

    Спонсоры:
   
cron