Wie wird ein Menü hinzugefügt, das nur auf den Bildschirmgrößen angezeigt wird?

Question

Im Moment habe ich ein ordentliches Menü für Desktop-Bildschirme in meiner Web-App formatiert. Bei kleineren Bildschirmgrößen erscheint das Menü jedoch nicht richtig. An dieser Stelle frage ich mich, wenn ich nur einen Hamburger-Menü wie folgt hinzufügen --->

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> 

aber nur auf mobilen einem Tablet-Bildschirm erscheinen Größen haben. Im Wesentlichen frage ich, gibt es eine Möglichkeit, dieses Menü hinzuzufügen und es auf Desktop-Bildschirme zu verstecken. Dies wird hinzufügen display: none zu Ihrem div

Answer 1

In der Tat können Sie Ihr Menü mit Medienanfragen anpassen:

@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 */ } 

Bootstrap eine Navbar Vorlage hat th bei Ihnen helfen kann (das Menü reagiert): https://getbootstrap.com/examples/navbar/

Aber, wenn Sie eine Sidebar wollen, könnte dies besser sein: http://startbootstrap.com/template-overviews/simple-sidebar/

Answer 2

Dies ist, wo Medien-Abfragen in

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

kommen, wenn der Browser breiter als 600 Pixel ist. Sie können auch max-width: 600px verwenden, um CSS-Regeln mit einer Breite von bis zu 600 Pixeln hinzuzufügen.

Lesen Sie mehr hier: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Answer 3

Ja - für diese, würden Sie Medienanfragen verwenden. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

In diesem Fall Ihre CSS mit einer Media-Abfrage würden ungefähr so ​​aussehen

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

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

Dies teilt den Browser mit, dass, wenn das Ansichtsfenster ist ALLENFALLS 960px breit (jede Breite von 0-960), zeigen der Burger, verstecken Sie die Speisekarte.

Sie würden auch ein bisschen jQuery oder schlicht JavaScript müssen die Anzeige des .menu wechseln, wenn die .burger geklickt wird:

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

Hier ist ein CodePen angezeigt werden, wie dies funktioniert (die Größe der Demo-Bereich bis "Burger" erscheint): http://codepen.io/Ronamo/pen/LZWzVJ