Мега-меню при наведении без списков

У меня есть это мега-меню, которое я хочу показывать при наведении и держать открытым, пока пользователь не покинет мега-меню или область триггера. У меня работает onClick, но я не могу заставить его работать при наведении курсора. Любая помощь приветствуется.

<div class="down">
    <div id="showb">
        <a href="#" id="menu-show" class="down"></a>
    </div><!-- end show button -->
    <div id="hideb">
        <a href="#" id="menu-hide" class="up"></a>
    </div><!--end hide button -->   
    <div id="menu" style="display: block;">
        <div class="menu-main">Menu Contents</div>
        <div class="menu-bottom"></div>
    </div>
</div>

    // hides the menu as soon as the DOM is ready
    // (a little sooner than page load)
    jQuery('#menu').hide();
    jQuery('#hideb').hide();
    // shows the menu on clicking the noted link
    jQuery('a#menu-show').click(function() {
        jQuery('#showb').hide();
        jQuery('#hideb').show();
        jQuery('#menu').slideDown();
        return false;
    });
    // hides the menu on clicking the noted link
    jQuery('a#menu-hide').click(function() {
        jQuery('#showb').show();
        jQuery('#hideb').hide();
        jQuery('#menu').slideUp();
        return false;
    });

Вы также можете увидеть это здесь http://jsfiddle.net/notanothercliche/5CDEE/

    <div id="menu">
    <div id="show-menu">
    </div>
</div>
<div id="mega-menu">
    <div class="menu-main">Menu Contents</div>
    <div class="menu-bottom"></div>
</div>

jQuery(document).ready(function() {

    // open
    jQuery('#show-menu').bind('mouseenter', function() {

        // increase the height of our container
        jQuery('#menu').height('300px');

        // do the main animation
        jQuery('#show-menu').stop().css({
            'backgroundPosition': 'bottom'
        }, 300);
        jQuery('#mega-menu').slideDown(500);
    });


    // close
    function closeMainNav() {
        jQuery('#show-menu').stop().css({
            'backgroundPosition': 'top'
        }, 300);
        jQuery('#mega-menu').slideUp(500);
        jQuery('#menu').height('17px');
    }

    // close when the following happens
    jQuery('#menu').bind('mouseleave', closeMainNav);
});

Еще лучше для версии с кликом я использовал toggleClass и slideToggle. НАМНОГО короче кодирование таким образом. См. демо здесь http://jsfiddle.net/notanothercliche/5CDEE/

    <a href="#" id="menu-show" class="down"></a>

<div id="menu">
    <div class="menu-main">
        Menu Contents
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
          <div class="clear"></div>
        </ul>
        More HTML content
    </div>
    <div class="menu-bottom"></div>
</div>

jQuery(document).ready(function() {
    // hides the menu as soon as the DOM is ready
    // (a little sooner than page load)
    jQuery('#menu').hide();
    // shows the menu on clicking the noted link
    jQuery('a#menu-show').click(function() {
        // toggles the indicator arrow
        jQuery('a.down').toggleClass('up')
        jQuery('#menu').slideToggle();
        return false;
    });
});

jquery hover megamenu slidedown slideup
person NotAnotherCliche    schedule 07.07.2011    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Почему бы вместо этого не сделать чистое меню CSS?

person DarkDust    schedule 07.07.2011
comment
Мне нужен HTML-контент в моем меню. Так что я не думаю, что это решение будет работать для меня. Мне также нужно, чтобы он был динамическим, работающим с моей базой данных. - person NotAnotherCliche; 09.07.2011
comment
Содержимое HTML доступно через решение CSS, вы можете поместить все, что хотите, в <div>. Из кода, который вы вставили, кажется, что сам полный HTML создан как единое целое (а не части, созданные с помощью JS или загруженные через AJAX), поэтому решение CSS будет работать почти так же, как ваше решение jQuery (из чистого HTML с точки зрения структуры). Но недостатком является то, что вам будет сложнее делать анимацию (например, постепенное появление и исчезновение) и вообще не будет анимации в старом браузере, это то, что решает jQuery. - person DarkDust; 09.07.2011

arrow_upward
0
arrow_downward

Проблема с вашим решением заключается в том, как выложены html и css. Я сделал корректировку здесь

http://jsfiddle.net/nTskw/

это не скрывает кнопку вверх, а вместо этого меняет класс. Между анимацией есть небольшой промежуток, над которым нужно поработать, но я думаю, что это все еще связано с позиционированием элементов. Возможно, стоит привязать указатель мыши к окружающему div

person TommyBs    schedule 07.07.2011
comment
Спасибо за все идеи. Я закончил с этим (использовал ваш css для подкачки для индикатора вверх/вниз TommyBs, спасибо!) - person NotAnotherCliche; 08.07.2011