-2

我有一个 DIV 容器。在那个容器中，我有一个公司徽标和一个菜单，一个左对齐，一个右对齐。如果窗口很宽，我有一组菜单图块，如果窗口缩小超过某个点，则菜单应转换为堆叠/下拉菜单。

除了窗口在 960-1000 像素之间时，一切都运行良好 - 一切都很糟糕。我的菜单并没有很快从平铺变为堆叠，并且瓷砖最终会跳到其他地方。有点难以用语言解释 - 去这里 testbed.dirtydogweb.com.au#about ，调整你的窗口大小，说 980px 你会看到。

我已经尝试了所有的 CSS 技巧并且我知道这很容易。

给第一个解开我谜题的人的棒棒糖。

4

2 回答 2

0

尝试这个：

在您的 JS 文件js/main.js的第 55-65 行中，您有以下代码：

    $(window).resize(function() {
        if( $(window).width() >= 960 ){
            if( ($("ul#menu li").css('display' ) == 'none') || ($("ul#menu li").css('display' ) == 'block') )
                $("ul#menu li").css('display','inline');
        }
        else{
            $("ul#menu li").css('display','none');
        }
    });

});

这显然是在控制您的菜单何时从内联元素变为块元素。您的菜单元素显然大于 960 像素，因此它不会在正确的位置变为下拉菜单。

尝试将第56 行中的数字960更改为1018。

if( $(window).width() >= 1018 ){
于 2013-11-14T03:36:39.470 回答
0

您可以更改媒体查询以指定您希望 CSS 更改的最小和最大尺寸...

例子

@media screen and (min-width: 500px) and (max-width: 800px)
于 2013-11-14T03:43:25.377 回答