Скриншот: http://s017.radikal.ru/i436/1111/ff/003d65a290cc.jpg
Меню:
Code
<div class="global_topmenu">
<ul>
<a href="/index/8"><li class="global_uplevel">Привет, $USERNAME$</li></a>
<a href="/index/10"><li class="global_uplevel">Выйти</li></a>
<a href="#"><li class="global_uplevel">FaQ</li></a>
<li class="global_uplevel">Другие ссылки
<ul class="global_submenu" style="display:none;">
<a href="#1"><li>Ссылка №1</li></a>
<a href="#2"><li>Ссылка №2</li></a>
<a href="#3"><li>Ссылка №3</li></a>
<a href="#4"><li>Ссылка №4</li></a>
<a href="#5"><li>Ссылка №5</li></a>
</ul>
</li>
</ul>
</div>
CSS:
Code
.global_topmenu {
-webkit-box-shadow: black 0 1px 3px 1px;
font-size:11px;
-moz-box-shadow: black 0 1px 3px 1px;
font-weight:bold;
font-family:Tahoma, Verdana, Arial;
box-shadow: black 0 1px 3px 1px;
z-index:1000;
position:fixed;
top:0;
right:2px;
border:1px grey solid;
color:#fff;
border-top:0;
background:#000;
}
.global_topmenu a {
color:#fff;
text-decoration:none;
margin:0;
outline:none;
font-family:Tahoma, Verdana, Arial;
}
.global_topmenu a:hover {
color:#888;
}
.global_topmenu ul {
margin:0;
padding:0;
}
.global_playpass, .global_slider {
display:block;
height:27px;
float:left;
position:relative;
cursor:pointer;
line-height:26px;
border-right:1px grey solid;
}
.global_slider {
font-size:15px;
margin:0;
padding:0;
}
.global_uplevel {
display:block;
height:26px;
border:1px black solid;
font-size:12px;
float:left;
padding:0 17px;
line-height:25px;
position:relative;
cursor:pointer;
border-top:0;
}
.global_submenu {
min-width:127px;
position:absolute;
right:-1px;
top:27px;
padding:0 20px;
text-align:left;
display:none;
border:1px grey solid;
-webkit-box-shadow: black 0 1px 3px 1px;
-moz-box-shadow: black 0 1px 3px 1px;
box-shadow: black 0 1px 3px 1px;
list-style-type:none;
border-top:1px grey dotted;
background:#000;
}
.global_submenu li {
padding:3px 0;
margin:0px 10px;
line-height:18px;
}
.global_uplevel span {
font-weight:normal;
padding:0 6px;
}
JavaScript:
Code
$(document).ready(function() {
$('.global_uplevel').hover(
function() {
$(this).children('.global_submenu').stop(true, true);
$(this).children('.global_submenu').slideDown('fast');
$(this).css('border','1px grey solid').css('border-bottom','1px grey dotted').css('border-top','0');
},
function() {
$(this).children('.global_submenu').slideUp('fast');
$(this).css('border','1px black solid').css('border-top','0');
});
$('.playpass_close').click(function() {
$('.playpass_bg').hide();
$('.playpass_block').hide();
return false;
});
$('.playpass_form').click(function() {
$('.playpass_bg').show();
$('.playpass_block').show();
return false;
});})
Пример работы меню: http://creat1ve.ucoz.ua/examples/slidemenu.html
Надеюсь кому то понравится!
Отписываемся!