Question

我正在开发一个响应式设计模板，其中水平菜单栏将转换为图标以节省空间。基本上我创建了3个媒体查询，即＆gt; 800px，介于500到800px之间，低于500px。

工作正常，但是当屏幕的窗口宽度达到484px到500px的范围时，菜单栏就会消失！您可以转到该链接查看测试页面：http://www.acetraining.com.sg/responsive1/

// JavaScript Document
var windowSize = "";
var windowWidth = 0;
var actualSize = 0;

$(document).ready(function (e) {
    checkBrowserSize();
    setInterval("checkBrowserSize()", 100);


    $("a.mobile_menu").on("click", function () {
        var navHeight = $("nav").height();//finding current height of navigation
        var newNavHeight = $("nav div").height();

        //mobile screen
        if (navHeight == 0) {
            $("nav").animate({"height": newNavHeight + "px"}, 500);
            $(this).addClass("selected");
        }
        //retract back to 0
        else {
            $("nav").animate({"height": "0px"}, 500);
            $(this).removeClass("selected");
        }
    });

});

function checkBrowserSize() {
    windowWidth = window.outerWidth;
    var contentWidth = $("body").width();
    var sizeDiff = windowWidth - contentWidth;//size of scrollbar
    actualSize = windowWidth - sizeDiff;

    if (actualSize > 800) {
        newWindowSize = "large";
    }
    if (actualSize <= 800 && actualSize > 500) {
        newWindowSize = "medium";
    }
    if (actualSize <= 500) {
        newWindowSize = "small";
    }
    //display out
    $("h1").html(windowWidth + "(" + contentWidth + "(contentWidth) + " + sizeDiff + "(sizeDiff)) is " + newWindowSize);

    if (windowSize != newWindowSize) {
        windowSize = newWindowSize;
        //invoke changeNav
        changeNav();
    }
    else {
     //append the word no change
        $("h1").append("--no change--");
    }
}//end of checkBrowserSize()

function changeNav() {
    if (windowSize == "large") {
        $("nav").css("height", "auto");
    }
    else if (windowSize == "medium") {
        $("nav").css("height", "auto");
    }
    else if (windowSize == "small") {
        $("nav").css("height", "0px");
        $("a.mobile_menu").removeClass("selected");//load in the first image of the mobile     menu when you resize to small 
    }
}//end of changeNav()

我怀疑问题出在我的javascript文件中。我附上了您的细读代码：

我希望有办法在这些范围之间显示菜单。

Answer 1

screen_layout_large.css css文件中的媒体查询隐藏了移动菜单。编辑媒体查询以提供最小宽度或在changeNav函数中显示移动菜单，如下所示。

function changeNav() {
    if (windowSize == "large") {
        $("nav").css("height", "auto");
    }
    else if (windowSize == "medium") {
        $("nav").css("height", "auto");
    }
    else if (windowSize == "small") {
        $("nav").css("height", "0px");
        $("a.mobile_menu").show().removeClass("selected");//load in the first image of the mobile     menu when you resize to small 
    }
}

响应式设计中的菜单栏消失

1 个答案: