Вертикальное меню на основе CSS

Скрипты

Рисунок Вертикальное меню на основе CSS
x;z-index:1 }
Вертикальное меню на основе CSS Вертикальное меню на основе CSS
оценка: 4.4 из 5
оценок: 7, отзывов: 2

Продолжим тему менюшек. На этот раз будем разбирать вертикальное меню, подпункты которого будут открываться сбоку от основного пункта. Вложенность: пункт - подпункт, количество пунктов и подпунктов не ограничено.

Для начала нужно будет создать 2 рисунка: рисунок фона пункта и рисунок фона подпункта вертикального меню. Ширина рисунка должна соответствовать ширине пунктов (подпунктов), высота рисунка должна быть в 2 раза больше, чем высота пункта (подпункта). Это нужно для того, чтобы в одном рисунке уместить 2 фона: фон по умолчанию и фон при наведении курсора. У меня на примере пункти размером 120x20 пикселей а подпункты размером 120x20 пикселей. Соответственно, размеры изображений будут 120x40 и 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: block;
    background: url(http://szenprogs.ru/images/menu/bg.png) left top;
    vertical-align: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: 120px;
    top: 0;
  }
  
  #menu li:hover ul.submenu, #menu li.over ul.submenu{
    display: block;
  }
  
  #menu a{
    display: block;
    text-decoration: none;
  }
  
  #menu li ul.submenu li{
    background: url(http://szenprogs.ru/images/menu/bg2.png) left top;
    height: 20px;
    width: 120px;
  }
  
  #menu li ul.submenu li:hover, #menu li ul.submenu li.over{
    background-position: left bottom;
  }
</style>

Вместо адресов на мои изображения (bg.png и bg2.png) нужно ввести адреса ваших художеств. Размеры, так же, ставите ваши.

В принципе, этот код уже будет работать, но для Internet Explorer нужно провести отдельное разъяснение. Он не использует правило :hover для тегов, отличных от гиперссылки, то есть тега A. Для того, чтобы меню работало и в IE, в тело 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>

Теперь все должно работать. Традиционно, предоставляю рабочий пример:

На этом все. Всем удачи в ваших начинаниях!

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.

x;z-index:1 }


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

rss
Категория:Скрипты
Просмотрено:11385
Рейтинг:4.4/7
Дата добавления:2010-04-22 00:44, Четверг
Добавил:Szen
Теги:css, меню

Мини-форум

№ 02010-04-22 00:44
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Вертикальное меню на основе CSS".
Гость
№ 1
2010-06-18 20:18
beast-1
Аватар участника beast-1
Привет, подскажи по поводу отступа менюшки, а то я ставлю его на сайт а у меня не получается чтоб он плотно примыкал к левому краю и к верху.
huli1
№ 2
2010-06-19 07:11
Szen
Аватар участника Szen
beast-1, ссылку на страницу со скриптом дай. Можешь в личку.
Szen
Учавствовать в обсуждении "Вертикальное меню на основе CSS" могут только зарегистрированные пользователи.
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

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

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



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