CSS 26    CSS3 10    HTML 2    JavaScript 43    Wordpress 3    Блог 10    Инструменты 1    Не советую 1    Полезные ресурсы 4    Счетчики 1    Шпаргалки 6    Зарегистрироваться 254   Войти

Меню

Добро пожаловать, Гость! Вы можете Войти или Зарегистрироваться.

10

Вертикальное выпадающее меню CSS+JS MouseOver

Jemand 41101 , , , ,
CSS, JavaScript

В данном выпадающем вертикальном меню, подменю открываются при наведении мыши на основной пункт меню. Есть такое же меню, но у него подпункты открываются при клике по основному пункту меню.
1. CSS

 #menu_body li ul {
	display: none;
	}
#menu_body li:hover ul, #menu_body li.over ul {
	display: block;
	}
 #menu_body {
    background:#171717;
    width: 200px;
    }
#menu_body a {
	display: block;
	width: 185px;
	height: 24px;
	padding-left: 15px;
	} 

#menu_body ul li {
    list-style-type: none;
    border-bottom: 1px solid #fff;
    margin-left: -40px;
    padding-left: 0px;
    } 

#menu_body ul li a {
    color: #fff;
    text-decoration: none;
	font-size: 115%;
	font-family: Georgia;
    } 

#menu_body ul li a:hover {
    color: #fff;
    text-decoration: none;
	background:#424242;
    } 

#menu_body ul li ul li {
    border: 0;
    list-style-type: none;
    color: #fff;
    list-style-position: inside;
	background:#7F7F7F;
    } 

#menu_body ul li ul{
    border-top: 1px solid #fff;
    margin-left: -10px;
    padding-left: 50px;
    }

2. JavaScript
Данный код вставляем перед закрывающим тегом </head>

<script>
 startList = function() {
     if (document.all&&document.getElementById) {
         navRoot = document.getElementById("ul1");
         for (i=0; i<navRoot.childNodes.length; i++) {
              node = navRoot.childNodes[i];
              if (node.nodeName=="LI") {
                  node.onmouseover=function() {
                      this.className+=" over";
                  }
               node.onmouseout=function() {
               this.className=this.className.replace(" over","");
                  }
              }
         }
     }
}
window.onload=startList;
</script>

3. HTML

<div id="menu_body">
   <ul id="ul1">
          <li><a href="#">Пункт №1</a>
                <ul>
                    <li><a href="#">Подпункт №1</a></li>
                </ul>
         </li>
         <li><a href="#">Пункт №2</a>
                <ul>
                    <li><a href="#">Подпункт №1</a></li>
                    <li><a href="#">Подпункт №2</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>
                </ul>
         </li>
   </ul>
</div>

Internet Explorer 6 не совсем корректно отображает данное меню, но это всего лишь проблема стилей, которые мне просто лень подгонять под IE6.

Демо

Рекламная пауза

» 10 комментариев

  1. У кого нибудь получилось стилизовать это меню под ie6? Пожалуста подскажите как!

  2. У меня получилось, скачать можно здесь.
    Проверил в IE6, IE8, Firefox 3.6, Opera 11, Google Chrome 9.

  3. У меня русские буквы отображаются как вопросительные знаки. Что сделать нужно?

  4. Вот спасибо. Отличное меню. А есть варианты сделать третье вложение? 1 -> 1.1 -> 1.2?

  5. Меню вставил на сайт, все работает. Спасибо!
    Вопрос: Как вставить изображение в фон кнопки вместо черного цвета, цвет подпункта изменить на белый, а при наведении на подпункт чтоб менялся цвет текста?
    Если не сложно, напишите пожалуйста!

  6. Спасибо, действительно очень наглядный пример


Оставить комментарий