Wie kann ich eine Schaltfläche hinzufügen, die Menü sagt, wenn das Menü klein ist?

Ich habe ein CSS-responsives Menü, das ich gemacht habe. Ich möchte eine Schaltfläche hinzufügen, die das Menü anzeigt, wenn der Bildschirm kleiner ist. Das ist mein Link zu my current code pen hier ist der Code in dem Stackoverflow Code-SchnipselWie kann ich eine Schaltfläche hinzufügen, die Menü sagt, wenn das Menü klein ist?

.nav ul { 
 
    list-style: none; 
 
    background-color: #00FFFF; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.nav li { 
 
    font-family: Georgia; 
 
    font-size: 1.2em; 
 
    line-height: 40px; 
 
    height: 40px; 
 
    border-bottom: 1px solid #ffffff; 
 
} 
 
    
 
.nav a { 
 
    text-decoration: none; 
 
    color: #000000; 
 
    display: block; 
 
    transition: .3s background-color; 
 
} 
 
    
 
.nav a:hover { 
 
    background-color: #036; 
 
    color: #ffffff; 
 
} 
 
    
 
@media screen and (min-width: 600px) { 
 
    .nav li { 
 
    width: 120px; 
 
    border-bottom: none; 
 
    height: 50px; 
 
    line-height: 50px; 
 
    font-size: 1.4em; 
 
    } 
 
    
 
    /* Option 1 - Display Inline */ 
 
    .nav li { 
 
    display: inline-block; 
 
    margin-right: -4px; 
 
    } 
 
    
 
    /* Options 2 - Float 
 
    .nav li { 
 
    float: left; 
 
    } 
 
    .nav ul { 
 
    overflow: auto; 
 
    width: 600px; 
 
    margin: 0 auto; 
 
    } 
 
    .nav { 
 
    background-color: ffffff; 
 
    } 
 
    */ 
 
}

<div class="nav"> 
 
     <ul> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="resume.html">Resume</a></li> 
 
     <li><a href="aboutme.html">Biography</a></li> 
 
     <li><a href="contact.html">Contact</a></li> 
 
     </ul> 
 
    </div>

Quelle

2016-05-06 mlegg

Sie wie ein Hamburger Menu bedeuten?

Sie müssen JavaScript dafür verwenden. Ich glaube nicht, dass es eine Möglichkeit gibt, ein Menü auf Knopfdruck mit reinem CSS zu verstecken und anzuzeigen. Ich könnte falsch liegen.

Quelle

2016-05-06 20:32:50

wie diese http://www.w3schools.com/css/css3_buttons.asp Ich sah das auch, aber ich konnte nicht herausfinden, wie man es in mein Menü https://codepen.io/derekorash/pen/XddZJY hinzufügt – mlegg

Ok. Nun könnten Sie eine Medienabfrage hinzufügen, die die Schaltfläche versteckt und aufdeckt. Zum Beispiel @media Bildschirm und (max-Breite: 500px) { Taste { Anzeige: Block; } } Und dann die Schaltfläche standardmäßig ausblenden. Um die Schaltfläche auszublenden und das Menü zu öffnen, müssen Sie immer noch JavaScript verwenden. Ich hoffe das hilft. Lass es mich wissen, wenn es so ist. Viel Glück! –

Ich bin mir nicht ganz sicher, was du meinst. Ich benutze HTML seit 17 Jahren, seit fast dem Anfang: P und natürlich CSS seit Jahren. Ich lerne immer noch selbständig Javascript. Normalerweise verwende ich Code-Snippets für die Dinge, für die ich sie brauche. – mlegg

Wie kann ich eine Schaltfläche hinzufügen, die Menü sagt, wenn das Menü klein ist?

Antwort

Verwandte Themen