Web-мастер: курс молодого бойца

Объясните как работает выпадающее меню

   

 Добавлено 2009-02-26 13:13:14
EugeneS


Сообщений: 69
Зарегистрирован: 22.02.2009

Цитировать
<!--[if gte IE 5.5]>
<script language="JavaScript" src="nav-h.js" type="text/JavaScript"></script>
<![endif]-->


<style type="text/css">


ul#navmenu-v,
ul#navmenu-v li,
ul#navmenu-v ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
}

ul#navmenu-v:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu-v li {
  float: left;
  display: block !important;
  display: inline;
  position: relative;
}


ul#navmenu-v a {
  border: 1px solid #FFF;
  border-right-color: #527337;
  border-bottom-color: #527337;
  padding: 0 6px;
  display: block;
  background: #A2C585;
  color: #666;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%;
}


ul#navmenu-v a:hover,
ul#navmenu-v li:hover a,
ul#navmenu-v li.iehover a {
  background: #648B43;
  color: #FFF;
}


ul#navmenu-v li:hover li a,
ul#navmenu-v li.iehover li a {
  background: #648B43;
  color: #BCD6A7;
}


ul#navmenu-v li:hover li a:hover,
ul#navmenu-v li:hover li:hover a,
ul#navmenu-v li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover a {
  background: #648B43;
  color: #FFF;
}


ul#navmenu-v li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li a {
  background: #648B43;
  color: #BCD6A7;
}


ul#navmenu-v li:hover li:hover li a:hover,
ul#navmenu-v li:hover li:hover li:hover a,
ul#navmenu-v li.iehover li.iehover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover a {
  background: #648B43;
  color: #FFF;
}


ul#navmenu-v li:hover li:hover li:hover li a,
ul#navmenu-v li.iehover li.iehover li.iehover li a {
  background: #648B43;
  color: #BCD6A7;
}


ul#navmenu-v li:hover li:hover li:hover li a:hover,
ul#navmenu-v li.iehover li.iehover li.iehover li a:hover {
  background: #648B43;
  color: #FFF;
}

ul#navmenu-v ul,
ul#navmenu-v ul ul,
ul#navmenu-v ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}


ul#navmenu-v li:hover ul ul,
ul#navmenu-v li:hover ul ul ul,
ul#navmenu-v li.iehover ul ul,
ul#navmenu-v li.iehover ul ul ul {
  display: none;
}

ul#navmenu-v li:hover ul,
ul#navmenu-v ul li:hover ul,
ul#navmenu-v ul ul li:hover ul,
ul#navmenu-v li.iehover ul,
ul#navmenu-v ul li.iehover ul,
ul#navmenu-v ul ul li.iehover ul {
  display: block;
}

.pquote {
margin:0 auto;
width: 80%;clear:both;
background: #F7FAF5;
border:1px dotted #74A451;
padding: 11px; 9px; 11px; 9px;color:#405B2D;
font:12px verdana, arial, helvetica, sans-serif;
}
#counter {
display:none;
text-align:center;
}
h1,h2 {
color:#648B43;
}

</style>

<ul id="navmenu-v">
<li><a href="index.html">Главная</a></li>
<li><a href="templates.html">Шаблоны, рецепты +</a>
<ul>
<li><a href="templates.html">Шаблоны, заготовки +</a>

<ul>
<li><a href="temp1.html">Шаблон 1</a></li>
<li><a href="temp2.html">Шаблон 2</a></li>
<li><a href="temp3.html">Шаблон 3</a></li>
<li><a href="temp4.html">Шаблон 4</a></li>
<li><a href="temp5.html">Шаблон 5</a></li>
<li><a href="temp6.html">Шаблон 6</a></li>
<li><a href="temp7.html">Шаблон 7</a></li>
<li><a href="temp8.html">Шаблон 8</a></li>

</ul>
</li>
<li><a href="faq.html">Рецепты HTML</a></li>
<li><a href="faq-css.html">Рецепты CSS</a></li>
</ul>
</li>
<li><a href="#">Менюшки +</a>
<ul>
<li><a href="#">Вертикальные +</a>
<ul>
<li><a href="menu1.html">Вертикальное меню 1</a></li>
<li><a href="menu2.html">Вертикальное меню 2</a></li>

<li><a href="menu3.html">Вертикальное меню 3</a></li>
<li><a href="menu4.html">Вертикальное меню 4</a></li>
<li><a href="menu5.html">Вертикальное меню 5</a></li>
</ul>
</li>
<li><a href="#">Горизонтальные +</a>
<ul>
<li><a href="menu6.html">Горизонтальное меню 1</a></li>
<li><a href="menu7.html">Горизонтальное меню 2</a></li>
<li><a href="menu8.html">Горизонтальное меню 3</a></li>

</ul>
</li>
</ul>
</li>
<li><a href="#">Гостевая книга</a></li>
<li><a href="#">Контакт</a></li>
</ul>

navHover = function() {

    var lis = document.getElementById("navmenu-v").getElementsByTagName("LI");
    for (var i=0; i<lis.length; i++) {
        lis[i].onmouseover=function() {
            this.className+=" iehover";
        }
        lis[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" iehover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", navHover);

Что значит, например: ul#navmenu-v li:hover ul {display: block;}?
Я так понял: для ul с идентификатором navmenu-v при наведении на li показать дочерние ul. Прямо условные конструкции какие-то.

Ну и главный вопрос, что делает скрипт?

lis - это массив всех LI потомков UL#navmenu-v?
Это что значит lis[i].onmouseover=function()
Что такое this.className?
Что такое this.className.replace(new RegExp(" iehover\\b")
Что такое iehover?
И вообще объясните что делает navHover()?
Наверх  Посмотреть профиль   Отредактировано автором 26.02.2009

 Добавлено 2017-07-15 11:39:27


Цитировать
We sell the sale of iPhones 7 directly from Apple warehouses unofficially for 30% of the market value. Always available and in large quantities:
1. New Apple iPhone 7 Plus 256 GB (Jet Black) (FACTORY UNLOCKED) International Version no warrants - $ 303
2. New Apple iPhone 7 Plus 256GB Factory Unlocked CDMA / GSM Smartphone - Black (Certified Refurbished) - $ 307
3. New Apple iPhone 7 PLUS (5.5-inch) A1661 128GB Unlocked Smartphone for GSM + CDMA Carriers - Rose Gold - $ 303
We work all over the world and only on an advance payment, we accept only bitcoin. Attention!!! We do not work with Russia and the CIS countries. When ordering from 10 pcs. The price is 20% of the market value. We have a priority in wholesale customers. If you do not trust us, or you do not like something, you pass by, we will not respond to stupid reports. To receive the details for payment, please write to the e-mail: apple@apple-cheap-iphone.xyz
Наверх Незарегистрированный пользователь  
   
Быстрый ответ
 
Цвет шрифта: Закрыть все теги
Сообщение
Защитный код