Главная > CMS > Выпадающее меню на css

Выпадающее меню на css

25 октября 2009 Написать комментарий К комментариям

html:

<ul id='hornav'>
   <li><a href='#null'>Меню 1</a></li>
   <li><a href='#null'>Меню 2</a>
      <ul>
         <li><a href='#null' target='_blank'>Меню 2.1</a></li>
         <li><a href='#null' target='_blank'>Меню 2.2</a></li>
      </ul>
   </li>
   <li><a href='#null'>Меню 3</a>
      <ul>
         <li><a href='#null'>Меню 3.1</a>
            <ul>
               <li><a href='#null'>Меню 3.1.1</a></li>
               <li><a href='#null'>Меню 3.1.2</a></li>
               <li><a href='#null'>Меню 3.1.3</a></li>
            </ul>
         </li>
         <li><a href='#null'>Меню 3.2</a>
            <ul>
               <li><a href='#null'>Меню 3.2.1</a></li>
               <li><a href='#null'>Меню 3.2.2</a></li>
               <li><a href='#null'>Меню 3.2.3</a></li>
            </ul>
         </li>
         <li><a href='#null'>Меню 3.3</a>
            <ul>
               <li><a href='#null'>Меню 3.3.1</a></li>
               <li><a href='#null'>Меню 3.3.2</a></li>
               <li><a href='#null'>Меню 3.3.3</a></li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

css:

#hornav, #hornav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	background: #515151;
	float: left;
	width: 100%;
}
#hornav li {
	float: left;
	position: relative;
	background: #515151;
	back\ground: none;
}
#hornav li ul {
	display: none;
	position: absolute;
	padding: 8px 0;
	width: 138px;
}
#hornav a {
	color: #fff;
	text-decoration: none;
	display: block;
	width: 120px;
	padding: 4px 10px;
}
#hornav a:hover {
	color: #fe572a;
	background: #ccc;
}
#hornav li:hover,
#hornav li.jshover {
	background: #333;
}
#hornav li li a {
	width: 118px;
	background: none;
}
#hornav li:hover ul,
#hornav li.jshover ul {
	display: block;
}
#hornav li:hover li ul,
#hornav li.jshover li ul {
	display: none;
	width: 138px;
	top: -9px;
	left: 113px;
}
#hornav li:hover li:hover ul,
#hornav li.jshover li.jshover ul {
	display: block;
}

javascript:

jsHover = function() {
   var hEls = document.getElementById('hornav').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);
Categories: CMS Tags: , ,
  1. Пока что нет комментариев.
Похожие публикации