Question

我有一个无序的内联水平列表菜单，当我的移动媒体查询开始时，我希望css更改，以便它有一个名为“menu”的父项，当单击时显示垂直列表中的菜单子链接。 / p>

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

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

任何帮助都会非常感激。我确信在每个隐藏的css属性之间切换都可以工作，但我不确定这对语义友好是否会如此等？

干杯

Answer 1

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

Answer 2

您可以保持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％。

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

您可以详细了解媒体查询here

如果您需要更高级的行为，可以将其与javascript联系起来。这是一种方法：

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

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

  checkResolution();
});

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

Answer 3

对，它需要一些工作，但我已经创建了一个关于你在here

之后的实例。

<强> 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>

<强> 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();
    });
});

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

希望这一切都有道理： - ）

在水平菜单和下拉菜单之间切换

3 个答案: