Показать сообщение отдельно
  #1 (permalink)  
Старый 14.03.2011, 18:12
Интересующийся
Отправить личное сообщение для Santiago Посмотреть профиль Найти все сообщения от Santiago
 
Регистрация: 11.03.2011
Сообщений: 14

Выдвигающееся меню - не реагирует!
Тут такое дело... сделал сам выдвигающее меню с 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;
        }
Изображения:
Тип файла: jpg menu.jpg (50.5 Кб, 3 просмотров)
Ответить с цитированием