Тут такое дело... сделал сам выдвигающее меню с jQuery, но при его раскрытии (оно выдвигается вниз), если там находятся какие-то элементы - не работает (т.е. оно выдвигается, но не работают ссылки и не реагирует на наведение мыши), я думаю проблема тут в html или css... посмотрите, пожалуйста...
jQuery:
$(document).ready(function () {
$('.menu_head').click(function(){
$(this).toggleClass('menuHeadHover');
$('.menu_body').toggle();
return false
});
$(function(){
$(document).click(function(event) {
if ($(event.target).closest('.menu_body').length) return;
$('.menu_body').hide();
$('.menu_head').removeClass('menuHeadHover');
event.stopPropagation();
});
});
});
HTML:
<ul id="navigation">
<li><a href="profile.php">Profile</a></li>
<li><a href="">Messages</a></li>
<li><a href="search.php">Search</a></li>
<li><a href="" class="menu_head">Settings</a></li>
<ul class="menu_body">
<div class="settingsChange">You can change your:</div>
<li><a href="settings_personal.php">Personal</a></li>
<li><a href="settings_photo.php">Photo</a></li>
<li><a href="settings_password.php">Password</a></li>
<li><a href="settings_email.php">E-mail</a></li>
</ul>
</ul>
CSS:
|
Код:
|
#navigation {
text-align: right;
font-weight: bold;
font-size: small;
float:right;
width:auto;
margin: 18px 130px 0 0;
height:30px;
}
#navigation li {
line-height: 30px;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
display: inline;
list-style-type: none;
}
#navigation a {
color: #FFF;
text-decoration: none;
letter-spacing: 1px;
padding:10px;
}
#navigation a:hover {
background-color:#5959b0;
outline-style: none;
outline-width: medium;
}
ul, li{
margin-top:2px;
padding:0;
list-style:none;
}
.menu_body {
margin-left:167px;
text-align:left;
background: #FFF;
display:none;
width:144px;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #999999;
}
#navigation .menu_body li {
line-height: 5px;
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
}
#navigation .menu_body a{
color:#66c;
text-decoration:none;
padding:10px;
display:block;
}
#navigation .menu_body a:hover {
color:#FFF;
background-color: #66c;
outline-style: none;
outline-width: medium;
}
.menuHeadHover {
background-color:#5959b0;
}
.settingsChange { /*заголовок You can change your:*/
font-size: 10px;
font-family: Arial, Helvetica, sans-serif;
color:#999999;
padding:10px;
width:auto;
} |
