Работа на дому

Заработок в Интернете без вложений.
Москва
pogoda.ru.net
 
 
 
 
 
 

Полезная информация
Необходимо выставить права 777 на папку 78435758








PR-CY.ru
Оплачиваемая реклама.


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

   В этом разделе мы с вами научимся, как с помощью 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>

А теперь посмотрим на результат нашего творчества. По моему неплохо.
Посмотреть полный код в сборе можно здесь.

   За основу взята статья http://beholder-eye.info/2006/03/30/dropdown-menu-css

2017-12-14 18:01:02 - Не могу записать данные в файл: /var/www/cleopa/data/www/rabotjagamneta.com/petersontrivia/cache_rabotjagamneta_com_50.txt
2017-12-14 18:01:02 - Не могу записать данные в файл: /var/www/cleopa/data/www/rabotjagamneta.com/petersontrivia/cache_rabotjagamneta_com_50.txt



Курс валют
http://www.kottages.ru/
Оплачиваемая реклама.

Новинки кинопроката
Новинки кинопроката
Новинки кинопроката
Новинки кинопроката
Новинки кинопроката
Новинки кинопроката

Оплачиваемая реклама.
Сайт создан в 2010 г ©.Работа в интернете на дому.
Копирование информации разрешено лишь
с разрешения владельца сайта.