Mimic Bootstrap Menüfunktion

Question

Hallo Ich habe eine Frage, wo ich Hilfe/Hilfe beim Erstellen eines Menüs benötige, das durch eine Schaltfläche ersetzt wird, wenn der Bildschirm zu klein ist, um das ursprüngliche Menü anzuzeigen. Ich weiß, dass Bootstrap dies für Sie tut, aber aufgrund von Implementierungseinschränkungen kann ich diese Bibliothek nicht verwenden. Daher habe ich mir die Funktionsweise von Bootstrap angeschaut und versucht zu imitieren, aber ich brauche noch etwas Hilfe beim Finalisieren.

Ich habe den folgenden HTML-Code:

<div class="navbar navbar-default main-nav"> 
    <div class="container"> 
     <div class="navbar-header" tabindex="-1"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mobile-nav" aria-expanded="false"> 
       <span class="sr-only">Mobile navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="collapse navbar-collapse" tabindex="-1"> 
      <div class="nav navbar-nav" tabindex="-1"> 
       <div class="menuitem_wrapper" tabindex="-1"> 
        <a class="home_button not_active" href="#"></a> 
        <div class="dropdown-menu" tabindex="-1"> 
         <a href="#">My data</a> 
        </div> 
       </div> 
       <div class="menuitem_wrapper" tabindex="-1"> 
        <a href="#">Menu 1</a> 
        <div class="dropdown-menu" tabindex="-1"> 
         <a href="#">Submenu1</a> 
         <a href="#">Submenu2</a> 
        </div> 
       </div> 
       <div class="menuitem_wrapper" tabindex="-1"> 
        <a class="active" href="#">Menu 2</a> 
        <div class="dropdown-menu" tabindex="-1"> 
         <a href="#">submenu1</a> 
         <a href="#">submenu2</a> 
        </div> 
       </div> 
       <a href="#">FAQ</a> 
       <a href="#">Contact</a> 
       <a href="#">Logout</a></div> 
     </div> 
    </div> 
</div> 

die hier zu sehen sind: JSFIDDLE. Jetzt, wenn Sie die Größe Ihres Bildschirms ändern, erscheint eine Schaltfläche und wenn Sie darauf klicken, wird das Menü vertikal statt horizontal erstellt.

Das funktioniert perfekt, aber was muss ich tun, wenn ich den Bildschirm auf große Bildschirmgröße (ich benutze Medienabfragen) Größe und ich möchte die aktuelle vertikale Implementierung auf die ursprüngliche horizontale Implementierung zurückgesetzt werden.

Wie ich bereits sagte verwende ich Medienanfragen zum Anzeigen/Ausblenden der Taste:

/* Media Queries */ 
@media (min-width: 768px) { 
    .container { 
     width: 750px; 
    } 
    .navbar { 
     border-radius: 0; 
    } 
    .container>.navbar-header { 
     margin-right: 0; 
     margin-left: 0; 
    } 
    .navbar-header { 
     float: left; 
    } 
    .navbar-toggle { 
     display: none; 
    } 
    .container>.navbar-collapse { 
     margin-right: 0; 
     margin-left: 0; 
    } 
    .navbar-collapse.collapse { 
     display: block !important; 
     height: auto !important; 
     padding-bottom: 0; 
     overflow: visible !important; 
    } 
    .navbar-collapse { 
     width: auto; 
     border-top: 0; 
     -webkit-box-shadow: none; 
     box-shadow: none; 
    } 

} 

Answer 1

Zum einen ist dies eine schreckliche Art und Weise ein Menü zu erstellen.

Aber hier ist eine Lösung, eine andere @media Abfrage für das Bearbeiten max-width:

@media (max-width:768px) { 
.show-menu .navbar-nav a, .show-menu .menuitem_wrapper { 
    width:100%; 
} 
    .show-menu { 
     display: block !important; 
} 
} 

hinzufügen: Auch addClass ändern toggleClass -

$(".navbar-collapse").toggleClass('show-menu');