Облако

Погодный информер    Сайтострой    rss лента

Добавить в избранное                            
Если Вас нет в интернете - Вас скоро не будет в бизнесе!
Красивое css меню -> Скрипты -> Форум
Системный администратор, сайтостроение, продвижение, вебдизайн.


Поиск / Участники 
/ Регистрация / Вход
Сегодня: 13.05.2018 - 06:51:20

Форум -> Скрипты -> Красивое css меню
Страницы:  1  
Автор Сообщение
 
zael
 
Власть
ушел

 

 
СТАТ:
Тем: 187
Постов: 563
Репа: 1076 ±
Косяки: 0

 
Профиль zael Написать личное сообщение для zael
   Написано: 21.05.2010 в 16:09:07 | #1
HTML код
<ul>
<li><a href="#">На главную</a></li>
<li><a href="#">Про</a>
<ul>
<li>
<a href="#">Архив</a>
</li> <li><a href="#">День</a></li>
<li><a href="#">Ночь</a></li>
</ul>
</li>
<li><a href="#">Сервис</a>
<ul>
<li><a href="#">Дизайн</a></li>
<li><a href="#">Торговля</a></li>
<li><a href="#">Библиотека</a></li>
<li><a href="#">Ипотека</a></li>
<li><a href="#">Скорая помощ</a></li>
</ul>
</li>
<li><a href="#">Овощи</a>
<ul>
<li><a href="#">Сливы</a></li>
<li><a href="#">Яблоки</a></li>
<li><a href="#">Чебуреки</a></li>
<li><a href="#">Слон</a></li>
</ul>
</li>
</ul>

тут все понятно и легко редактируется

теперь css
ul { margin: 0; padding: 0; list-style: none; width: 150px; }
//удаляем маркеры и отступы
ul li { position: relative; }
//для позиционирования подменю
li ul { position: absolute; left: 149px; top: 0; display: none; }
//при наведении курсора подменю выскакивает справа на 149px , display: none; чтобы не видеть подменю при открытии страницы
ul li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 5px; border: 1px solid #ccc; border-bottom: 0; }
// стили для ссылок
/* Fix IE. Hide from IE Mac \*/ * html ul li { float: left; } * html ul li a { height: 1%; } /* End */
// хак для ие
ul { margin: 0; padding: 0; list-style: none; width: 150px; border-bottom: 1px solid #ccc; }
// дополнительная нижняя граница
li:hover ul { display: block; }
\\ вызываем подменю наведением курсора

startList = function() { if
(document.all&&document.getElementById) { navRoot =
document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes; if (node.nodeName=="LI") {
node.onmouseover=function() { this.className+=" over"; }
node.onmouseout=function() { this.className=this.className.replace » (" over", ""); } } } } }
window.onload=startList;
// лечим ие
li:hover ul, li.over ul { display: block; }
правила дла активной ссылки
<ul id="nav">

--------------------------------------------------
Сломай дом, построй корабль!
[Ответить] [Цитировать]  
Страницы:  1  

Имя:
   E-mail:





Ещё смайлы

Введите код:  
   
Powered by WR-Forum Pro © 1.9 | Assembled by Alexand3r Am3
*