Горизонтальное меню на основе CSS
Скрипты
Горизонтальное меню на основе CSSПосвятим несколько уроков теме менюшек. Сейчас мы будем делать горизонтальное меню посредством CSS. Такое меню можно будет разместить прямо под шапкой сайта, при этом размеры этого меню совсем не будут ограничены. Сколько подпунктов вам нужно, столько и сможете поставить.
Для начала нарисуем изображение, которое будет являться фоном пунктов горизонтального меню. Для этого открываем Fotoshop и начинаем колдовать. В моем случае пункты меню будут размером 120x20 пикселей. Так как фон по умолчанию и фон при наведении курсора у нас будет в одном изображение, то рисунок делаем в 2 раза больше. Вот мой спрайт для пунктов горизонтального меню (размер соответственно 120x40 пикселей):
Теперь нам нужно определится с форматом меню. В нашем случае будем использовать ненумерованные списки при помощи тегов UL и LI. Вот мой вариант такой менюшки:
<li><a href="#">menu 1</a>
<ul class="submenu">
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
<li><a href="#">submenu 3</a></li>
</ul>
</li>
<li><a href="#">menu 2</a>
<ul class="submenu">
<li><a href="#">submenu 1</a></li>
</ul>
</li>
<li><a href="#">menu 3</a>
<ul class="submenu">
<li><a href="#">submenu 1</a></li>
<li><a href="#">submenu 2</a></li>
</ul>
</li>
<li><a href="#">menu 4</a></li>
</ul>
Количество пунктов и подпунктов можете делать столько, сколько вам нужно. Единственное правило - соблюдать вложенность и оставлять имена классов такими, какими их задали в коде.
Теперь сам CSS код. Его нужно разместить в теле HEAD вашего сайта:
#menu{
list-style-type: none;
margin: 0;
padding: 0;
font-size: 10pt;
font-family: tahoma;
}
#menu li{
position: relative;
width: 120px;
height: 20px;
margin: 0;
padding: 0;
text-align: center;
display: inline;
float: left;
background: url(http://szenprogs.ru/images/menu/bg.png) left top;
}
#menu li:hover, #menu li.over{
background-position: left bottom;
}
#menu li ul.submenu{
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
display: none;
left: 0;
top: 20px;
}
#menu li:hover ul.submenu, #menu li.over ul.submenu{
display: block;
}
#menu a{
display: block;
text-decoration: none;
}
</style>
Вам остается немного изменить код CSS горизонтального меню под ваши нужды: изменить размеры пунктов меню, адрес фонового изображения и шрифт. Остальное желательно оставить так, как есть.
Фактически, этот код работает во всех браузерах, кроме Internet Explorer. Проблема заключается в том, что IE использует правило :hover только для ссылок, то есть тега A. Для других тегов IE игнорирует правило hover. Для того, чтобы меню работало и на Internet Explorer и его клонах, нужно в тело HEAD вашей странички добавить следующий скрипт:
function menuhover(){
if(!document.getElementById('menu')) return;
var lis = document.getElementById('menu').getElementsByTagName('LI');
for (var i=0; i<lis.length; i++){
lis[i].onmouseover=function(){this.className+=' over';}
lis[i].onmouseout=function(){this.className=this.className.replace(/ over/gi,'');}
}
}
if(window.attachEvent) window.attachEvent('onload', menuhover);
</script>
После такого дополнения горизонтальное меню будет работать уже на всех популярных браузерах. Этот код был протестирован на следующих браузерах: Opera 10.51, Firefox 3.5.9, Internet Explorer 6, Google Chrome 4.1.
А это, собственно, работающий пример горизонтального меню:
Все возникшие вопросы задавайте в мини чат ниже. Удачи в ваших свершениях!
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Горизонтальное меню на основе CSS
Скрипты
Скрипты, инструкции, справочники
| Категория: | Скрипты |
| Просмотрено: | 12091 |
| Рейтинг: | 4.5/8 |
| Дата добавления: | 2010-04-21 13:16, Среда |
| Добавил: | Szen |
| Теги: | css, меню |
Рекомендуем
Дополнительно к Горизонтальное меню на основе CSS
Мини-форум
| № 0 | 2010-04-21 13:16 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Горизонтальное меню на основе CSS". |
| Гость |
| № 1 | 2010-04-21 15:29 |
kick | Это конечно хорошее меню. Я только не понял как сделать фон выпадающего окна отличным от общего фона меню. Я так понимаю в данном случае это элементарная подмена картинки. При наведении на пункт меню выпадает блок и заполняется общим фоном. |
| Роман |
| № 2 | 2010-04-21 20:37 |
Szen | kick, если вам нужен другой фон для подменю, то добавляете следующие css-стили: Code #menu li ul.submenu li{ background: url(адрес_рисунка_подменю) left top; } #menu li ul.submenu li:hover, #menu li ul.submenu li.over{ background-position: left bottom; } Соответственно, рисунок также должен быть в 2 раза выше, чем пункт подменю и содержать фон по умолчанию и фон при наведении. |
| Szen · WWW |
| № 3 | 2010-04-24 20:15 |
| kick | Понял..спасибо большое. А можно вопрос не в тему? Что обозначает слово Szen? =)) |
| Роман |
| № 4 | 2010-04-24 21:08 |
| Szen | На первом курсе академии мы выбирали себе ники через прогу одну (старшекурсник писал нашего факультета). Мы выбирали человека и тыкали кнопу. Что сгенерируется - такой ник и будет. Мне попал этот, и прижился как-то.  |
| Szen · WWW |
