Новое горизонтальное выпадающее меню 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 – цвет.
Поэкспериментируйте с цветом, у вас обязательно все получится. Единственный минус – меню не работает в ИЕ- не выпадает,поэтому нужно либо доработать код, либо сделать дополнительные вертикальные ссылки в сайдбаре, как на сайте жены.

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

This entry was posted on Воскресенье, Июнь 6th, 2010 at 8:09 пп and is filed under uCoz. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

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

  1. bond007in:

    Спасибо. Классное меню. То что мне нужно.

  2. victorija:

    спасибо, все очень понятно и совсем не сложно!

  3. Lera:

    Огромное спасибо, это именно то, что я так долго искала!

  4. Чел:

    Спасибо…. то что нужно….=)

  5. егор:

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

  6. радислав:

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

  7. zamyti.ucoz.ru cook.ucoz.net:

    спасибо! с подробной инструкцией

Прокомментировать запись: