0

我很想得到一些帮助。我正在构建一个响应式下拉菜单，根据浏览器窗口大小在隐藏/可见状态之间切换。它基于我在网上找到的 jQuery 解决方案。

最小（移动）版本。当点击事件被触发时，菜单会立即下降，但我真的想添加一个“动画”功能，以便它逐渐打开。

对 jQuery 没有太多经验，我希望有人可以建议我可以在我的代码中添加“动画”命令的位置。

感谢期待。

========= 这是Javascript：

var ww = document.body.clientWidth;

$(document).ready(function() {
    $(".nav li a").each(function() {
        if ($(this).next().length > 0) {
            $(this).addClass("parent");
        };
    })

    $(".toggleMenu").click(function(e) {
        e.preventDefault();
        $(this).toggleClass("active");
        $(".nav").toggle();
    });
    adjustMenu();
})

$(window).bind('resize orientationchange', function() {
    ww = document.body.clientWidth;
    adjustMenu();
});

var adjustMenu = function() {
    if (ww < 600) {
        $(".toggleMenu").css("display", "inline-block");
        if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").hide();
        } else {
            $(".nav").show();
        }
        $(".nav li").unbind('mouseenter mouseleave');
        $(".nav li a.parent").unbind('click').bind('click', function(e) {
            // must be attached to anchor element to prevent bubbling
            e.preventDefault();
            $(this).parent("li").toggleClass("hover");
        });
    }
    else if (ww >= 600) {
        $(".toggleMenu").css("display", "none");
        $(".nav").show();
        $(".nav li").removeClass("hover");
        $(".nav li a").unbind('click');
        $(".nav li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
            // must be attached to li so that mouseleave is not triggered when hover over submenu
            $(this).toggleClass('hover');
        });
    }
}

=================这里是html：

<nav class="main_navigation"> 

        <ul class="nav">
            <li><a href="item1.php"><span>Item1</span></a></li>
            <li><a href="item2.php"><span>Item2</span></a></li>
            <li><a href="item3.php"><span>Item3</span></a></li>
            <li><a href="item4.php"><span>Item4</span></a></li>
            <li><a href="item5.php"><span>Item5</span></a></li>
        </ul>

4

2 回答 2

0

而不是使用 jquery 来创建响应式设计，您是否考虑过使用诸如骨架之类的 CSS 基础？

http://www.getskeleton.com/

如果失败，我建议使用媒体查询根据页面大小修改导航的 css。就 jquery 而言，您可以使用 slideToggle

于 2013-02-22T13:34:48.043 回答
0

抱歉，我在手机上回答了这个问题，所以没有太多空间可以输入，这是我最近用来做类似事情的代码：

<div id="mobile_menu">
<p id="mobile_menu_btn">Menu</p>
<ul id="mobile_menu_ul">
<li><a href="exhibitions.html">Exhibitions</a></li>
<li><a href="artists.html">Artists</a></li>
<li><a href="news.html">News</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="social.html">Social</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div><!-- mobile_menu -->

$("#mobile_menu_btn").click(function () {
        $("#mobile_menu_ul").slideToggle('slow', function() {
  menuDown = true});

});

就将其放入您的代码而言，您可以尝试编辑您的代码，使其看起来像这样：

if (!$(".toggleMenu").hasClass("active")) {
            $(".nav").slideUp('slow');
        } else {
            $(".nav").slideDown('slow');
        }
于 2013-02-22T14:38:02.787 回答