水平菜單和下拉菜單

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事件。