2

我有一个无序的内联水平列表菜单，当我的移动媒体查询启动时，我希望 css 发生变化，以便它有一个名为“菜单”的父项，单击该菜单时会在垂直列表中显示菜单子链接。

实现这一目标的最佳方法是什么？

我应该创建两种类型的菜单并使用 css 来切换它们的可见性，还是有办法让第一个菜单成为新的第二个菜单？

任何帮助将非常感激。我确信在每个隐藏的 css 属性之间切换会起作用，但我不确定这对语义有多友好等？

干杯

4

3 回答 3

2

Righto，这需要一些工作，但我已经创建了一个工作示例，说明你在这里所追求的

HTML

<a href="#" id="nav-status">Open / Close</a>
<ul id="navigation">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li>
        <a href="#">Item 5</a>
        <ul>
            <li><a href="#">Sub Item 1</a></li>
            <li><a href="#">Sub Item 2</a></li>
            <li><a href="#">Sub Item 3</a></li>
        </ul>
    </li>
    <li><a href="#">Item 6</a></li>
    <li><a href="#">Item 7</a></li>
</ul>

​<strong>CSS

/* FOR ANYTHING GREATER THAN MOBILE RESOLUTION */
@media screen and (min-width: 480px) {
    #nav-status {
        display: none;    
    }

    ul {
        width: 100%;    
        min-height: 25px;
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-right: 1px solid #333;
        width: 96px;
        height: 21px;
        padding:2px;
        display: block;
        float: left;
        position: relative;    
    }

    ul li:last-child {
        border-right: none;
    }

    ul li ul {
        display: none;
        width: 100px;
        color:#fff;
        background:#666;
        position: absolute; 
        top: 25px; 
        left: 0px;
        overflow: hidden;
    }

    ul li:hover ul {
        display: block;    
    }
}

/* FOR MOBILE RESOLUTIONS */
@media screen and (max-width: 480px) {
    #nav-status {
        display: block;
        width: 100%;
        height: 21px;
        padding: 2px;
        background: #000;
        color: #FFF;   
    }

    ul {
        display: none;
        width: 100%;       
        color:#fff;
        background:#CCC;
        overflow: visible;
    }

    ul li {
        color:#000;
        border-bottom: 1px solid #333;
        width: 100%;
        min-height: 21px;
        padding:2px;
        display: block;        
        position: relative;    
    }

    ul li:last-child {
        border-bottom: none;
    }

    ul li ul {
        display: block;
        width: 100%;
        color:#fff;
        background:#666;        
        overflow: hidden;
        position: relative;
    }        
}
​

JAVASCRIPT

$(function() {
    $('#nav-status').click(function(e) {
        e.preventDefault();
        $('#navigation').toggle();
    });​
});

总之，只要分辨率低于 480 像素宽，移动样式就会启动。这基本上会垂直堆叠菜单项，并允许您使用打开/关闭链接折叠/展开导航。任何大于 480px 的都将使用默认样式，该样式将水平排列菜单项。

希望这一切都有意义:-)

于 2012-11-06T10:27:22.993 回答
1

您可以保持 html 标记相同，但将媒体查询设置为拦截您选择的分辨率并对元素进行不同的样式设置。

例如：http: //jsfiddle.net/rYVz4/

HTML

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>​

CSS

@media screen and (min-width: 600px) {
  ul { display: block; width: 100%; overflow: hidden; }
  ul li { display: inline-block; padding: 2px 5px 2px 5px; width: 100px; float: left; } 
}

@media screen and (max-width: 600px) {
  ul { display: block; width: 110px; overflow: hidden; }
  ul li { display: inline-block; padding: 2px 5px 2px 5px; width: 100px; } 
}

如您所见，每当分辨率大于 600px 宽时，元素将被设置为向左浮动并占据屏幕宽度的 100%。

在任何较小的分辨率下，元素将垂直堆叠。

您可以在此处阅读有关媒体查询的更多信息

如果您需要更高级的行为，可以将其与 javascript 结合使用。这是一种方法：

function checkResolution() {
  // Resolution width > 600px
  if ($(window).innerWidth() > 600) {
    // implement styling for these devices                                          
  }
}

$(function () {
  $(window).resize(function () {
    checkResolution();
  });

  checkResolution();
});

此代码将绑定到 window.resize 事件，如果您的浏览器被调整大小，该事件将运行相关代码。

​</p>

于 2012-11-05T11:51:47.323 回答
0

如果菜单在两种情况下都有相同的项目，我看不出有什么理由要复制两份。我只会制作两个不同的 css 文件，一个用于“常规”浏览器，一个用于移动媒体。在“常规”一中，“菜单”父项是隐藏的，菜单是水平的。在移动媒体中，菜单父项是可见的，菜单是一个隐藏的垂直列表，当单击菜单父项时会显示（通过 css 或 javascript）。

于 2012-11-05T11:47:18.280 回答