Новое горизонтальное выпадающее меню ucoz

Сейчас вам расскажу о том, как можно создать новое красивое горизонтальное выпадающее меню. Пишу в разделе uCoz, но его можно применить практически к любому сайту.


 Получим мы вот такое меню:

А теперь расскажу, как его сделать.

Итак, приступим. Заходим в ПУ -- управление дизайна, открываем глобальный блок, отвечающий за верхнюю часть сайта. Добавляем туда следующий код:

<ul id="cssmenu">
 <center>
 <li><a href="http://pohudey-ka.ucoz.ru/publ/13">Меню</a>
 <ul>
 <li><a href="http://pohudey-ka.ucoz.ru/publ/7">Выпад</a></li>
 <li><a href="http://pohudey-ka.ucoz.ru/publ/14">Выпад</a></li>
 </ul>
 </li>
 <li><a href="http://pohudey-ka.ucoz.ru/publ/9">Меню</a>
 <ul>
 <li><a href="http://pohudey-ka.ucoz.ru/publ/9">Выпад</a></li>
 <li><a href="http://pohudey-ka.ucoz.ru/publ/10">Выпад</a></li>
 </ul>
 </li>
 </center>
</ul>

где ul определяет выпадающее меню. Замените адреса на свои.

Далее открываем Управление дизайном -- Таблица стилей (CSS).

Туда вставляем:

ul#cssmenu {

margin: 0 auto;
border: #8B4513 1px solid;
padding: 0;
list-style: none;
background: url(http://pohudey-ka.ucoz.ru/forumcartinki/zalivknop.jpg);
height: 30px;
font: bold 12px/28px Verdana, Arial;
border-left:#8B4513 1px solid;
color: #800000;
display: table;
}

ul#cssmenu li {
margin: 0 auto;
border: #8B4513 1px solid;
padding: 0;
float: left;
display: inline;
list-style: none;
background: url(http://pohudey-ka.ucoz.ru/forumcartinki/zalivknop.jpg);
position: relative;
height: 30px;
}

ul#cssmenu ul {
margin: 0 auto;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 30px;
left: 0;
}

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

ul#cssmenu ul li {
width: 150px;
float: center;
display: block !important;
display: inline;
border: #8B4513 1px solid;
}

/* Main Menu */
ul#cssmenu a {
border: 0px;
padding: 0 10px;
float: none !important;
float: left;
display: block;
background: url(http://pohudey-ka.ucoz.ru/forumcartinki/zalivknop.jpg);
color: #800000;
font: bold 12px/28px Verdana, Arial;
text-decoration: none;
height: auto !important;
height: 1%;
}

/* Main Menu Hover */
ul#cssmenu a:hover,
ul#cssmenu li:hover a,
ul#cssmenu li.iehover a {
border-top: 2px solid #FFFFFF;
background: ;
color:#B9662B;
border-top:#D2B48C 1px solid;
}

/* Second Menu */
ul#cssmenu li:hover li a,
ul#cssmenu li.iehover li a {
border-top: 2px solid #FFFFFF;
float: none;
background: #D2B48C;
color: #B9662B;
}

/* Second Menu Hover */
ul#cssmenu li:hover li a:hover,
ul#cssmenu li:hover li:hover a,
ul#cssmenu li.iehover li a:hover,
ul#cssmenu li.iehover li.iehover a {
border-top: 2px solid #FFFFFF;
background: #B9662B;
color:#D2B48C;
border:#D2B48C 1px solid;
}

ul#cssmenu ul ul {
display: none;
position: absolute;
top: 0;
left: 170px;
}

ul#cssmenu li:hover ul ul,
ul#cssmenu li.iehover ul ul {
display: none;
}

ul#cssmenu li:hover ul,
ul#cssmenu ul li:hover ul,
ul#cssmenu li.iehover ul,
ul#cssmenu ul li.iehover ul {
display: block;
}

// JavaScript Document
function cssmenuhover()
{
if(!document.getElementById("cssmenu"))
return;
var lis = document.getElementById("cssmenu").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", cssmenuhover);

где background - заливка (можно вставить картинку,как в данном случае);

border - рамка;

height - высота меню;

color - цвет.

Поэкспериментируйте с цветом, у вас обязательно все получится. Единственный минус - меню не работает в ИЕ- не выпадает,поэтому нужно либо доработать код, либо сделать дополнительные вертикальные ссылки в сайдбаре, как на сайте жены.

Надеюсь,что кому-то понадобится ;)

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

С этой темой еще читают:

.