|
Читайте также: |
Выпадающее меню с помощью CSS
Для статьи использовано: STYLED MENUS
URL: http://www.styledmenus.com
Copyrights by STYLED MENUS
Автор статьи: Sn@Ke (Сергей Серов)
18.01.2010
Каждый, кому доводилось создавать выпадающие меню, знаком с тем, какое количество скриптов требуется для этого. Между тем, используя грамотно структурированный HTML-код и несложные CSS-правила, можно создать симпатичное выпадающее меню, которое легко менять и дополнять, и при этом оно будет работать во множестве браузеров, в том числе и в Internet Explorer. И самое главное для вас, любители "чистого" кода - никакого JavaScript!
Создаем меню
Первым и самым важным этапом создания нашего меню является построение его структуры. Лучше всего делать это, используя ненумерованный список, в котором размещены подменю, выступающие как списки в рамках пунктов родительского списка. Звучит заумно? Фактически это очень просто:
<div class="menu">
<ul>
<li><a href="#" title="Главная страница">Главная страница</a></li>
<li><a href="#">Раздел 1</a>
<ul>
<li><a href="#" title="Страница 1">Страница 1</a></li>
<li><a href="#" title="">Страница 1.1</a></li>
<li><a href="#" title="">Страница 1.2</a></li>
</ul>
</li>
<li><a href="#">Раздел 2</a>
<ul>
<li><a href="#" title="">Страница 2</a></li>
<li><a href="#" title="">Страница 2.1</a></li>
<li><a href="#" title="">Страница 2.2</a></li>
<li><a href="#" title="">Страница 2.3</a></li>
<li><a href="#" title="">Страница 2.4</a></li>
<li><a href="#" title="">Страница 2.5</a></li>
</ul>
</li>
<li><a href="#">Раздел 3</a>
<ul>
<li><a href="" title="">Страница 3</a></li>
<li><a href="" title="">Страница 3.1</a></li>
<li><a href="" title="">Страница 3.2</a></li>
</ul>
</li>
</ul>
</div>
Вот так: простой HTML код, доступный и легко редактируемый. В результате получается:
Наводим красоту
Взгляните на приведённый выше пример. Вы увидите довольно скучный список элементов. А я обещал вам, что он будет симпатичным! Давайте-ка добавим немного стилей.
Зададим ширину и высоту меню. А так же начертание и размер шрифта.
.menu{
font-family:arial, sans-serif; /*задаем семейство шрифтов*/
width:200px;/*задаем ширину меню */
height:20px; /* задаем высоту меню*/
font-size:11px; /* размер шрифта */
}
Теперь нам надо задать положение элементов списка. К счастью, они по умолчанию будут расположены вертикально, что нам и нужно. Задаем размер и рамку пункта, его цвет, цвет и размер шрифта, отступ текста.
.menu ul li a,.menu ul li a:visited{
display:block;/*пункт меню блоком*/
text-decoration:none; /*убираем подчеркивание */
width:200px; /* ширина блока (пункта)*/
height:20px; /* высота блока*/
color:#ccc; /* цвет шрифта*/
border:1px solid #fff; /* бордюр: толщина стиль цвет*/
background: #FF6633;/*цвет фона блока*/
line-height:20px;/*отступ текста сверху*/
font-size:11px;/*размер шрифта*/
text-indent:20px;/*отступ красной строки*/
}
Я применил к ссылкам стили по своему вкусу, но их можно легко поменять на те, что вам нравятся. Важно присвоить атрибуту "display" значение "block", ведь мы хотим, чтобы каждая ссылка занимала всё отведённое для неё место внутри содержащего её элемента списка.
Удалим отступы и маркеры в ненумерованном списке, а затем зададим стиль.
.menu ul{
padding: 0;/* задает отступ между элементом страницы и различными границами*/
margin: 0; /*задает ширины полей между элементами страницы и его соседями*/
list-style: none /*убираем маркеры*/
}
Однако, нам необходимо задать значение для position как relative, и всё потому, что нам нужно будет относительно их абсолютно позиционировать подменю:
.menu ul li{
float: left;/* выравнивание блока */
position: relative /*задаем позицию для подменю*/
}
Нам надо также присвоить атрибуту "display" значение "none", так как мы не хотим видеть подменю при открытии страницы.
.menu ul li ul{
display: none/*прячем подменю*/
}
Теперь выделим пункт, на который наведен курсор:
.menu ul li:hover a{
color:#fff;/*цвет шрифта*/
background: #36f;/*цвет фона*/
}
Берёмся за подменю. Мы хотим, чтобы каждое подменю появлялось справа от пункта родительского меню в тот момент, когда над этим пунктом находится курсор:
.menu ul li:hover ul{
display:block;/*пункт меню блоком*/
position:absolute;/*позиция подменю относительно меню*/
top:0px;/*отступ сверху*/
left:201px;/*отступ слева*/
width:10px/*ширина блока*/
}
.menu ul li:hover ul li a{
display:block;/*пункт блоком*/
background: #ddd;/*цвет фона*/
color:#ccc/*цвет шрифта*/
}
Используя атрибуты "left" и "top", мы можем абсолютно позиционировать каждое субменю в рамках пункта меню предка. Вы заметите, что я задал атрибуту "left" значение в 201px (одним пикселем больше, чем ширина родительского пункта), это позволяет субменю перекрывать главное меню, не создавая при этом двойной границы.
Также выделим пункт подменю при наведении курсора:
.menu ul li:hover ul li a:hover{
background: #6fc;/*цвет фона*/
color:#fff/*цвет шрифта*/
}
Итак, выглядит уже получше, хотя пользователи Internet Explorer для Windows могут с вами и не согласиться. К несчастью, IE Win понимает разрывы строк между ссылками в нашем красиво оформленном HTML коде как незаполненное пространство. Однако этот баг IE можно легко решить.
Добавив в код HTML после объявления раздела:
<!--[if lte IE 6]>
<a href="Ссылка">Раздел 1
<table><tr><td>
<![endif]-->
И перед закрытием:
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
В результате код нашего раздела будет выглядеть так:
<li><a href="Ссылка">Раздел 1</a>
<!--[if lte IE 6]>
<a href="Ссылка">Раздел 1
<table><tr><td>
<![endif]-->
<ul>
…
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
Надеюсь, учитывая всё вышерассмотренное, любой из вас сможет увидеть рабочую версию меню.
Если ваше меню всё равно не работает замените первую строку на:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Дата добавления: 2015-11-30; просмотров: 34 | Нарушение авторских прав