В написании использовался JQuerry, так как он будет покороче JScript, а JQ стандартно присутствует в uCoz.
Структура очень проста. Устанавливаем меню, его ширина зависит от количества кнопочек и оно позиционируется по центру:
Код:
Code
<div class="menu">
<div>главная
<ul>
<a href="/">ссылка</a>
<a href="/">ссылка</a>
<a href="/">ссылка</a>
</ul>
</div>
</div>
Подключаем css код:
Код:
Code
/* Menu by ILyeS */
.menu{margin:0 auto;font:14pt 'century gothic';color:#eee;text-shadow:0 -1px #000;cursor:default}
.menu div{float:left;min-width:120px;padding:8px 0;background:#69f;text-align:center}
.menu div:hover{background:#36f;color:#fff;text-shadow:0 -2px #000;border-radius:0 0 10px 10px}
.menu ul{display:none;width:120px;font-size:12pt;background:#36c;padding:0;border-top:1px dashed #fff;border-bottom:1px dashed #fff}
.menu a{text-decoration:none;color:#eee;padding:5px 0;text-shadow:none}
.menu a:hover{color:#fff;text-shadow:0 0 10px #fff}
И подключаем js:
Код: | Выделить всё
// Menu by ILyeS
$('.menu div').hover(function(){$(this).find('ul').show()},function(){$(this).find('ul').hide()});
$('.menu div:first').attr({style:'border-radius:10px 0 0 10px'});
$('.menu div:first').hover(function(){$(this).attr({style:'border-radius:10px 0 10px 10px'})},function(){$(this).attr({style:'border-radius:10px 0 0 10px'})});
$('.menu div:last').attr({style:'border-radius:0 10px 10px 0'});
$('.menu div:last').hover(function(){$(this).attr({style:'border-radius:0 10px 10px 10px'})},function(){$(this).attr({style:'border-radius:0 10px 10px 0'})});
$('.menu a').append('<br>');
