0

В верстке меню такого вида alt text

при наведении на пункт меню он "выдвигается" вверх. На последнем пункте меню сидят птички, они сделаны отдельным дивом с абсолютным позиционированием. Нужно, чтобы при наведении на последний пункт меню птички поднимались вместе с ним. У меня получилось написать скрипт, чтобы при наведении блок поднимался

<script type="text/javascript" src="script/jquery-1.8.2.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){

    //изменение положения блока #birds
    var birds = $('#birds'),
    nav = $("#navigation ul li");

    nav.each(function(index){
    $(this).hover(function(e){
    e.preventDefault()
    if (index == 4) {
        birds.css('top', '462px');
        }
    })
    });

    });
</script>  

но при этом если убрать мышку с пункта меню, блок обратно не возвращается. Подскажите, как можно дописать этот скрипт чтобы он работал правильно?

5
  • 1
  • ну только $("#birds").css('top', '462px'); тогда, если переменная birds не задана) спасибо))
    – Heidel
    27 ноя 2012 в 18:34
  • 1
    У вас переменная задана выше функции hover, по этому будет справедливым то, что $("#birds") можно заменить на birds.
    – lampa
    27 ноя 2012 в 18:54
  • Волонтеры!!! 27 ноя 2012 в 21:54
  • я знаю) это "стебный" макет, поэтому так там написано специально.
    – Heidel
    28 ноя 2012 в 5:14

1 ответ 1

2

Ответ-вопрос для размышления. Вот можно использовать jquery для того, что бы отлавливать hover пунктов меню, фильтровать последний пункт, дальше менять стиль блока с птичками - позиционирование. Смотреть на событие "unhover" и восстанавливать status quo. Да можно. А что если...

Взять блок с птичками и поместить его внутрь последнего элемента меню. Стилями спозиционировать его абсолютно этого самого пункта меню - привязать к верхней границе меню. И по :hover на пункте меню менять высоту этого пункта меню. А блок с птицами будет сам ездить за менюшкой. Ведь он всегда привязан к верхней границе пункта меню, а не шапки в целом. И как бы javascript становится не нужен :)

UPD: Что касается скрипта. Если у него только задача двигать птичку, то перебор всех пунктов меню nav.each(function(index){})излишне. так как для всех пунктов только проверяется индекс и ничего не делается. Отфильтруйте изначально себе нужную LI и к ней примените ховер.

Или $("#navigation ul li").last() / $("#navigation ul li").filter(':last') при условии что птичка на последнем пункте меню сидит. Или $("#navigation ul li").get(4) если птичка именно на пятом пункте меню. И уже для этого пункта сможет добавить отслеживание hover. не заставляйте браузер делать ненужные вещи если это возможно. Proffit от этого удет в конце проекта в виде более быстрого сайта и меньше озлобленных пользователей на "глючный" сайт :)

1
  • да, можно) спасибо за предложенный вариант)
    – Heidel
    28 ноя 2012 в 9:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.