Горизонтальное выпадающее меню.

В этом разделе мы с вами научимся, как с помощью CSS сделать красивое горизонтальное выпадающее меню. Преимущества такого меню, я думаю, очевидно, это экономия рабочего пространство на страницах вашего сайта.
В начале пропишем код html для вашего меню. Он будет выглядит примерно так:

<div id="container">
<ul id="set">
<li><a href=" ссылка на страницу сайта">работа на дому</a>      
<ul>
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a>
<ul>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
</ul>       
</li>    
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>
</ul>   
</li>	
<li><a href=" ссылка на страницу сайта">меню </a>       
<ul>
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a>
<ul>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
</ul>       
</li>    
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>
</ul>   
</li>	
<li><a href=" ссылка на страницу сайта">меню </a>       
<ul>
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a>           
<ul>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 2 уровня</a></li>
</ul>       
</li>      
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>
<li><a href=" ссылка на страницу сайта">подменю 1 уровня</a></li>
</ul>   
</li>
</ul>	
</div>

посмотреть результат

Вид не очень респектабельный. Добавим CSS код для вашего еще безобразного меню:

#set, #set ul {
  list-style: none; 
  margin: 0; 
  padding: 0; 
  border: 1px solid #669999; 
  background: #CCFFFF; 
  float: left; 
  width: 45%;
}
#set li {
  float: left; 
  position: relative; 
  background: #CCFFFF; 
  background: #CCFFFF; 
  border: 1px solid #FFF; 
  border-right-color: #527337; 
  border-bottom-color: #527337; 
}

#set a {
  color:#660033; 
  text-indent:5px; 
  display: block; 
  width: 125px; 
  padding: 4px 10px; 
  background: url(dot.png) repeat-y right; 

}

#set a:hover {
  color: #FFFFCC; 
  background: #009999; 

}
#set li:hover, 
#set li.jshover {
  background: #009999; 

}

#set li ul {
  display: none; 
  position: absolute; 
  background: url(fone-tr.png); 
  padding: 8px 0; 
  width: 150px; 

}
#set li li a {
  width: 150px; 
  background: none; 

}
#set li:hover ul, 
#set li.jshover ul {
  display: block; 

}

#set li:hover li ul, 
#set li.jshover li ul {
  display: none; 
  width: 150px; 
  top: -9px; 
  left: 150px; 
  lef\t: 170px; 

}
#set li:hover li:hover ul, 
#set li.jshover li.jshover ul {
  display: block; 
}

посмотреть результат

Для того чтобы меню корректно отображалось в IE напишем небольшой JavaScript для IE:

<script type="text/javascript"><!--//--><![CDATA[//>
<!--jsHover = function() {
var hEls = document.getElementById("nav").
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>

Посмотреть полный код в сборе можно здесь.

Поделиться в соц. сетях

Горизонтальное выпадающее меню.
Горизонтальное выпадающее меню.
Горизонтальное выпадающее меню.
Горизонтальное выпадающее меню.
Горизонтальное выпадающее меню.
Горизонтальное выпадающее меню.

Похожие записи

  • Вертикальное выпадающее меню. Вертикальное выпадающее меню при помощи CSS также как и горизонтальное имеет один большой плюс, это экономия рабочего пространства. Напишем код html для этого меню: <ul […]
  • Биржа ссылок setlinks ru Биржа SetLinks.ru занимает второе место по популярности и уровню заработка в Интернете и создана специально для купли (продажи) прямых ссылок с главных и внутренних страниц […]
  • Простое горизонтальное меню для сайта Простое динамические меню, отличается от всех типов меню своей простотой и хорошей индексацией поисковиков, а, используя современные методы CSS и JavaScript, можно придать своему меню […]
  • Плагин Cforms 2 для WordPress — создание формы обратной связи на блоге Плагинов для создания форм на блоге WordPress существует великое множество. Но Cforms 2 отличается от всех них своими широкими возможностями и богатым функционалом. При помощи данного […]
  • Плагин Russian Date для WordPress — корректное отображение дат на русском языке. Практически на каждом блоге WordPress рядом с опубликованной заметкой находится дата ее публикации (число, месяц и год). Эта дата обычно располагается рядом с названием статьи или под ее […]
  • Плагин All in One SEO Pack Если у вас есть сайт, а в качестве его платформы вы выбрали WordPress, для успешного дальнейшего продвижения в поисковых системах, плагин All in One SEO Pack будет просто необходим. Для […]

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

http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://rabotalegko.com/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Goon Каталог сайтов Рейтинг@Mail.ru Яндекс.Метрика