Горизонтальное меню на основе CSS

Скрипты

Рисунок Горизонтальное меню на основе CSS
Горизонтальное меню на основе CSS Горизонтальное меню на основе CSS
оценка: 4.5 из 5
оценок: 8, отзывов: 4

Посвятим несколько уроков теме менюшек. Сейчас мы будем делать горизонтальное меню посредством CSS. Такое меню можно будет разместить прямо под шапкой сайта, при этом размеры этого меню совсем не будут ограничены. Сколько подпунктов вам нужно, столько и сможете поставить.

Для начала нарисуем изображение, которое будет являться фоном пунктов горизонтального меню. Для этого открываем Fotoshop и начинаем колдовать. В моем случае пункты меню будут размером 120x20 пикселей. Так как фон по умолчанию и фон при наведении курсора у нас будет в одном изображение, то рисунок делаем в 2 раза больше. Вот мой спрайт для пунктов горизонтального меню (размер соответственно 120x40 пикселей):

Пример спрайта для горизонтального меню

Теперь нам нужно определится с форматом меню. В нашем случае будем использовать ненумерованные списки при помощи тегов UL и LI. Вот мой вариант такой менюшки:

Code
<ul id="menu">
  <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 вашего сайта:

Code
<style type="text/css">
  #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 вашей странички добавить следующий скрипт:

Code
<script type="text/javascript">
  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. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Горизонтальное меню на основе CSS
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:10576
Рейтинг:4.5/8
Дата добавления:2010-04-21 13:16, Среда
Добавил:Szen
Теги:CSS, меню

Мини-форум

№ 02010-04-21 13:16
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Горизонтальное меню на основе CSS".
Гость
№ 1
2010-04-21 15:29 Спам
kick
Аватар участника kick
Это конечно хорошее меню. Я только не понял как сделать фон выпадающего окна отличным от общего фона меню. Я так понимаю в данном случае это элементарная подмена картинки. При наведении на пункт меню выпадает блок и заполняется общим фоном.
Роман
№ 2
2010-04-21 20:37 Спам
Szen
Аватар участника 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
Аватар участника kick
Понял..спасибо большое. А можно вопрос не в тему? Что обозначает слово Szen? =))
Роман
№ 4
2010-04-24 21:08 Спам
Szen
Аватар участника Szen
На первом курсе академии мы выбирали себе ники через прогу одну (старшекурсник писал нашего факультета). Мы выбирали человека и тыкали кнопу. Что сгенерируется - такой ник и будет. Мне попал этот, и прижился как-то. smile
Szen · WWW
Учавствовать в обсуждении "Горизонтальное меню на основе CSS" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Как вы используете файл-хостинги?
Всего ответов: 170
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 3
Гостей: 3
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2017 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz