如何添加僅顯示在移動屏幕尺寸上的菜單？

Question

現在我有一個像樣的菜單，在我的web應用程序上爲桌面屏幕格式化。但是，在較小的屏幕尺寸下，菜單確實顯示不正確。在這一點上，我想，如果我可以再補充一個漢堡包菜單這樣的--->

http://codepen.io/ettrics/pen/JoaaxW

<header class="header"> 
    <div class="burger"> 
    <div class="burger__patty"></div> 
    <div class="burger__patty"></div> 
    <div class="burger__patty"></div> 
    </div> 

    <nav class="menu"> 
    <div class="menu__brand"> 
     <a href=""><div class="logo"></div></a> 
    </div> 
    <ul class="menu__list"> 
     <li class="menu__item"><a href="" class="menu__link">Work</a></li> 
     <li class="menu__item"><a href="" class="menu__link">About</a></li> 
     <li class="menu__item"> 
     <a href="https://twitter.com/ettrics" target="_blank" class="menu__link menu__link--social"><i class="fa fa-twitter"></i></a> 
     </li> 
     <li class="menu__item"> 
     <a href="https://dribbble.com/ettrics" target="_blank" class="menu__link menu__link--social"> 
      <i class="fa fa-dribbble"></i></a> 
     </li> 
    </ul> 
    </nav> 
</header> 

<main> 
    <h1><a href="http://ettrics.com" target="_blank">Ettrics</a></h1> 
    <h2>A Full-Screen Menu, showcasing your brand and website navigation.</h2> 
    <p class="support">With support for IE10 & latest versions of Chrome, Safari, and Firefox.</p> 
</main> 

，但只有它出現在移動的平板電腦的屏幕尺寸。基本上我問的是有沒有辦法添加這個菜單並將其隱藏在桌面大小的屏幕上。

Answer 1

事實上，你可以用媒體查詢適應您的菜單：

@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ } 
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ } 
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ } 
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } 
@media (min-width:1281px) { /* hi-res laptops and desktops */ } 

引導有一個導航欄模板次在可以幫你（菜單響應）：https://getbootstrap.com/examples/navbar/

但是，如果你想有一個側邊欄，這可能是更好的：http://startbootstrap.com/template-overviews/simple-sidebar/

Answer 2

這是媒體查詢進來

@media (min-width: 600px) { 
    .your-div { 
     display: none; 
    } 
} 

這將增加display: none到您的div時瀏覽器比600個像素寬。您還可以使用max-width: 600px添加最多600像素寬的CSS規則。

在這裏閱讀更多：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 3

是 - 對於這一點，你可以使用媒體查詢。 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

在這種情況下，與媒體查詢你的CSS看起來像

.burger { 
    display: none; 
} 
.menu { 
    display: block; 
} 

@media screen and (max-width: 960px) { 
    .burger { 
    display: block; 
    } 
    .menu { 
    display: none; 
    } 
} 

這告訴瀏覽器，當視最多960像素寬（任意寬度從0 - 960），顯示漢堡，隱藏菜單。

您還需要一點的jQuery或純JavaScript來切換。菜單的顯示點擊.burger時：

$('.burger').click(function() { 
    $('.menu').toggle(); 
}); 

這裏有一個CodePen顯示這是如何工作（調整試玩區直到「漢堡」出現）：http://codepen.io/Ronamo/pen/LZWzVJ