水平菜单和下拉菜单

Question

之间切换我有一个无序内嵌水平列表菜单，当我在我的移动媒体查询踢想要的CSS改变，使得它有所谓的“菜单”父项被点击时显示菜单子链接在垂直列表中。

达到此目的的最佳方法是什么？

我应该建立两种类型的菜单并使用CSS来切换自己的知名度还是有办法可以让第一个菜单成为新的第二个菜单？

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

干杯

Answer 1

Righto，它采取了一些工作，但我已经创建的你在做什么工作的例子后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(); 
    });​ 
}); 

总之，任何时间的分辨率降至下480像素宽，移动造型将一命呜呼这将基本上叠加的菜单项垂直，并允许您折叠/展开与导航打开/关闭链接。大于480px的任何东西都将使用默认样式，这将使菜单项水平排列。

希望这一切都有道理:-)

Answer 2

如果菜单在两种情况下，同样的项目，我看不到任何理由，使这两个副本。我只会制作两个不同的CSS文件，一个用于“常规”浏览器，一个用于移动媒体。 在“常规”之一，有“菜单”父项目被隐藏，菜单是水平的。在移动媒体之一，菜单父项是可见的，菜单是一个隐藏的垂直列表显示出来（通过CSS或JavaScript）单击菜单父项时。

Answer 3

你可以把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(); 
}); 

此代码将扎入，如果您的浏览器大小which'll运行相关代码的window.resize事件。