- ЛентаПятница 26.04.2024 06:21
in.uCoz.org - создан в помощь uCмастеру и служит для решения проблем возникших у пользователей администрирующих сайты системы uCoz. Все вопросы пишите на форуме в соответствующий раздел
Вы находитесь: Главная » Выпадающее горизонтальное меню на css - Форум- Страница 1 из 1
- 1
Форум » Уроки Css » Уроки css для новичков » Выпадающее горизонтальное меню на css Выпадающее горизонтальное меню на css Reactor Дата: Пятница, 17.01.2014, 10:09 | Сообщение # 1 
Редко можно увидеть на сайте горизонтальные меню, которые выпадают, при наведении мыши, но они очень красивы и функциональны. Или как принято говорить – юзабильные. Часто замечал, что люди используют javascript, для достижения данного эффекта. На самом деле, все можно сделать только на CSS. Рассмотрим два варианта выпадающих горизонтальных меню на CSS. Хорошо, когда есть выбор, думаю вы согласны.
Вариант 1 - Выпадающее горизонтальное меню
Для ясности смотрите скриншот ниже. Наверняка вы знакомы с такой структурой горизонтального меню.
Для еще большей ясности, посмотрим на HTML структуру меню. Убедимся, чем именно достигнуто горизонтальное положение меню и его валидность. Структура css меню:
Показ и скрытие дочерних элементов меню осуществляется с помощью CSS: ul > li:hover ul. То есть достаточно просто. С помощью этого переключателя можно определить поведение всех дочерних меню. При создании обычного горизонтального меню, к тому же display:block мы добавляем другие стили, такие как, цвет фона и т.д. Единственная разница между обычным меню и выпадающим меню заключается в том, что мы не ставим стили для вложенных UL. Нужно ставить на зависящий LI элемент, который наведенный (UL > LI: hover).
Давайте рассмотрим CSS код:
Код
#header { height:120px; position:relative;
background: transparent url(header_bkg.png) repeat-x scroll top center;}
#nav { margin:0px; padding:0px; position:absolute; top: 70px; display:block;}
#nav > li { list-style-type:none; float:left; display:block; margin:0px 10px;
position:relative; padding:10px; width:100px;}
#nav > li:hover ul { display:block; }
#nav > li:hover { background-color:#808080; -moz-border-radius:10px; -webkit-border-radius:10px; }
#nav li ul { margin:0px; padding:0px; display:none;}
#nav li ul li { list-style-type:none; margin:10px 0 0 0;}
#nav li ul li a { display:block; padding:5px 10px; color:#A2E200; text-decoration:none;}
#nav li ul li:hover a { background-color:#606060; -moz-border-radius:5px; -webkit-border-radius:5px;}
#nav li span { cursor:pointer; margin:0px 10px; font-weight:bold; }
Вот как это можно сделать с помощью чистого CSS кода. До сих пор в голове не улаживается, для чего использовать JavaScript, разве что для плавного сворачивания и разворачивания.
Вариант 2 - горизонтальное меню + решение для IE6
Нужно обратить внимание, что вариант 1, не будет работать в IE6. Решением совместимости меню с IE6, будет кусочек js кода. Ближе к делу, создаем меню. Ниже предоставлен скриншот будущего меню:
Конструкция меню схожа с первой версией, поэтому перейдем к самому коду.
Код<ul id="menu">
<li><a href="#">Пункт №1</a></li>
<li>
<a href="#">Пункт №2</a>
<ul>
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
<li><a href="#">Подпункт №3</a></li>
</ul>
</li>
<li>
<a href="#">Пункт №3</a>
<ul>
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
<li><a href="#">Подпункт №3</a></li>
<li><a href="#">Подпункт №4</a></li>
<li><a href="#">Подпункт №5</a></li>
</ul>
</li>
<li>
<a href="#">Пункт №4</a>
<ul>
<li><a href="#">Подпункт №1</a></li>
</ul>
</li>
<li>
<a href="#">Пункт №5</a>
<ul>
<li><a href="#">Подпункт №1</a></li>
<li><a href="#">Подпункт №2</a></li>
<li><a href="#">Подпункт №3</a></li>
<li><a href="#">Подпункт №4</a></li>
<li><a href="#">Подпункт №5</a></li>
</ul>
</li>
</ul>
CSS
Код#menu {
padding: 0;
margin: 0;
font-size: 100%;
font-family: Georgia;
}
#menu li {
list-style: none;
float: left;
height: 33px;
padding: 0;
margin: 0;
width: 150px;
text-align: center;
background: #171717;
position: relative;
padding-top: 12px;
}
#menu li ul {
list-style: none;
padding: 0;
margin: 0;
width: 150px;
display: none;
position: absolute;
left: 0;
top: 45px;
}
#menu li ul li {
float: none;
height: 33px;
margin: 0;
width: 150px;
text-align: center;
background: #7F7F7F;
}
#menu li a {
display: block;
width: 150px;
height: 33px;
color: #fff;
text-decoration: none;
}
#menu li:hover ul, #menu li.jshover ul {
display: block;
}
#menu li:hover, #menu li.jshover {
background: #424242;
}
JS – решение для IE6
Код<script>
jsHover = function() {
var hEls = document.getElementById("menu").getElementsByTagName("li");
for (var i=0, len=hEls.length; i<len; i++) {
hEls[i].onmouseover=function() { this.className+=" jshover"; }
hEls[i].onmouseout=function() { this.className=this.className.replace(" jshover", ""); }
}
}
if (window.attachEvent && navigator.userAgent.indexOf("Opera")==-1) window.attachEvent("onload", jsHover);
</script>
Это все, надеюсь, у вас все получится.
Сообщение отредактировал Reactor - Пятница, 17.01.2014, 10:19«Пред. тема | След. тема» 
Форум » Уроки Css » Уроки css для новичков » Выпадающее горизонтальное меню на css - Страница 1 из 1
- 1
Понравилась тема? Расскажи друзьям...
