如何在設備屏幕上顯示特定菜單列表

我試圖創建一個響應電子郵件導航菜單，其中菜單列表將顯示但不包括在桌面屏幕上的商店電子conolight，但隨後在移動設備上它將只顯示商店電子conolight和銷售。如何在設備屏幕上顯示特定菜單列表

<li><a class="non-mobile" title="" href="#">LED Lightning</a></li> 
<li ><a class="non-mobile" title="" href="#">Linear Fluorescent</a></li> 
<li><a class="non-mobile" title="" href="#">Wall Packs</a></li> 
<li><a class="non-mobile" title="" href="#">Floodlights</a></li> 
<li><a class="non-mobile" title="" href="#">Exit &amp; Emergency</a></li> 
<li ><a class="show-mobile" title="" href="#">Shop e-conolight</a></li> 
<li class="active"><a title="" href="#" class="sale" style="color:#fff;">Sale</a></li> 

@media only screen and (min-device-width:320px) and (min-device-width:480px) and (max-width: 600px) { 
     .non-mobile { display: none; } 
     .show-mobile{ 
      display:inline-block; 
     } 
} 
@media screen and (max-width: 3024px) { 
     .show-mobile{ display: none; } 
}

This is what I would like it to look like

來源

2013-05-30 Dinah Dinah

有沒有特別的東西，不符合你的期望？ http://cssdeck.com/labs/aryheimg。您認爲移動用戶對購買Floodlights，LED Lightning（原文如此）或其他任何項目不感興趣嗎？ – cimmanon

嗨Cimmanon，原因是爲什麼我們在移動設備上簡潔我們的菜單是因爲如果我們顯示所有人都會太小或它會顯示在第二行看起來不看，然後我們不想使用下拉式菜單。謝謝！ –

但是你明白移動用戶不喜歡從他們那裏拿走有用的內容，對吧？ – cimmanon

@media(min-width:601px) 
{ 
    .show-mobile{display:none;} 
    .non-mobile{display:inline-block;} 
} 

@media(max-width:600px) 
{ 
    .show-mobile{display:inline-block;} 
    .non-mobile{display:none; 
} 
.sale{display:inline-block}

當屏幕寬度下降到小於600px的這將隱藏非移動一和將隱藏移動唯一當屏幕比600px的大。

這是它的一個Fiddle。

您可能希望將非移動和展示移動類別更改爲li元素，以便隱藏實際元素而不僅僅是a標籤。

編輯：這是一個Fiddle的。

來源

2013-05-30 20:26:33

非常感謝，凱文！它正在工作。 –

如何在設備屏幕上顯示特定菜單列表

回答

相關問題