Implementierungsmethode für die Bootstrap-seitige Navigationsleiste (Code)

Der Inhalt dieses Artikels befasst sich mit der Implementierungsmethode (Code) der Bootstrap-Seitennavigationsleiste. Ich hoffe, dass er für Sie hilfreich ist.

Vorwort

Die reaktionsfähige Navigationsleiste, die mit Bootstrap geliefert wird, rutscht nach unten und kann manchmal die personalisierten Anforderungen nicht erfüllen, sodass Sie Anpassungen vornehmen müssen 1 Ähnlich wie das Side-Sliding-Menü von Android DrawerLayout ist dies das benutzerdefinierte Bootstrap-Side-Sliding-Menü, das ich auf das Side-Sliding-Menü vieler offizieller Websites implementieren möchte Es ist auch sehr offensichtlich, dass einige offizielle Website-Homepages nur einen implementieren. Für den Side-Sliding-Effekt habe ich das Sliding-Screen-Plug-in Owl.carousel verwendet, aber ich persönlich halte es für übertrieben. Der professionellere Name dieses seitlichen Bootstrap-Schiebemenüs lautet „Mobile Navigationsleiste“. Ich vergleiche auch diesen Namen, der eher den Eigenschaften von Bootstrap entspricht. Daher stellt dieser Artikel eine einfachere Methode vor, die für Anfänger leichter zu akzeptieren ist.

Implementierungsprinzip der seitlichen Bootstrap-Navigationsleiste

1. Positionierung der seitlichen Schiebeleiste behoben

2. Verwendung der Bootstrap-Reaktionsfähigkeit Verwendet die Werkzeugklasse „Visibility-SM, Visible-Xs, Hidden-Xs, Hidden-Sm“ usw., um sich an verschiedene Bildschirme anzupassen.

3. Der seitliche Schiebeeffekt der seitlichen Schiebeleiste verwendet keine JQuery Methode. Das CSS3-Transformationsattribut wird zum Verschieben von p verwendet, und der seitliche Gleitanimationseffekt verwendet den CSS-Attributübergang

4. Nachteile: Verwenden Sie zwei Menüsätze, einer ist das auf dem angezeigte Menü PC-Bildschirm, ein Satz ist ein Mobiltelefon-Navigationsmenü, das auf dem mobilen Endgerät angezeigt wird. Es generiert weniger Code und ist einfach und leicht zu akzeptieren >Layout der Bootstrap-Navigationsleiste

       <!--手机导航栏-->
       <p id="mobile-menu" class="mobile-nav visible-xs visible-sm">
           <ul>
               <li><a href="#">首页</a></li>
               <li><a href="#">Java</a></li>
               <li><a href="#">SVN</a></li>
               <li><a href="#">iOS</a></li>
           </ul>
       </p>
       <!--pc导航栏-->
       <nav class="navbar-inverse visible-lg visible-md" role="navigation">
           <p class="container">
               <p class="navbar-header">
                   <a class="navbar-brand" href="#">菜鸟教程</a>
               </p>
               <p>
                   <ul class="nav navbar-nav">
                       <li class="active"><a href="#">iOS</a></li>
                       <li><a href="#">SVN</a></li>
                       <li><a href="#" class="dropdown-toggle" data-toggle="dropdown">Java</a></li>
                   </ul>
               </p>
           </p>
       </nav>
       <!--手机导航栏侧滑-->
       <p class="nav-btn visible-xs visible-sm">
           <a href="#" class="mobile-nav-taggle" id="mobile-nav-taggle">
               <span class="glyphicon glyphicon-align-justify"></span>
           </a>
       </p>

   Nach dem Login kopieren
Das Layout einer Navigationsleiste verwendet zwei Navigationsmenüs, eines für PC und eines für Mobiltelefone. Es verwendet die Bootstrap-Responsive-Tool-Klasse „Visible-XS Visible-SM“, um die Umschalttaste auszublenden PC; Visible-LG Visible -md realisiert die Anzeige der Navigationsleiste auf dem PC; Visible-xs Visible-sm realisiert die Anzeige der mobilen Navigationsleiste auf dem Mobiltelefon.

Nicht viel Code, nur 10 Zeilen

         * {margin:0;padding:0;}         
         #mobile-menu {position:fixed;top:0;left:0;
         width:220px;height:100%;
         background-color:#373737;z-index:9999;}         
         a:hover ,a:focus{text-decoration:none}
        .mobile-nav ul li a {color:gray;display:block;padding:1em 5%;    
        border-top:1px solid #4f4f4f;
        border-bottom:1px solid #292929;
        transition:all 0.2s ease-out;
        cursor:pointer;
        #mobile-menu {position:fixed;top:0;left:0;width:220px;height:100%;
        background-color:#373737;z-index:9999;transition:all 0.3s ease-in;}}        
        .mobile-nav ul li a:hover {background-color: #23A1F6;color: #ffffff;}        
        .show-nav {transform:translateX(0);}        
        .hide-nav {transform:translateX(-220px);} 
        /*侧滑关键*/
        .mobile-nav-taggle {height:35px;line-height:35px;
        width:35px;background-color:#23A1F6;color:#ffffff;
        display:inline-block;text-align:center;cursor:pointer}
        .nav.avbar-inverse{position:relative;}        
        .nav-btn {position:absolute;right:20px;top:20px;}

It Zu beachten sind zwei Attribute von CSS3:

und der seitlichen Verschiebung Animationseffekt verwendet Übergangsattribut, legt den Effekt der Übergangsanimation des Attributs fest, Syntax

Klick-Ereignisschalter seitlich gleitend

        $("#mobile-nav-taggle").click(function () {
            var mobileMenu = $("#mobile-menu");            
            if (mobileMenu.hasClass("show-nav")) {
                setTimeout(function () {
                    mobileMenu.addClass("hide-nav").removeClass("show-nav");
                }, 100)
            }            else {
                setTimeout(function (){
                    mobileMenu.addClass("show-nav").removeClass("hide-nav");
                }, 100)
            }
        })

Es wird nicht empfohlen, zwei Menünavigationsleisten zu verwenden. Es macht nichts aus, den Effekt zu erzielen . Probieren Sie Medien aus und es kann erreicht werden.

Verwandte Empfehlungen:

Das obige ist der detaillierte Inhalt vonImplementierungsmethode für die Bootstrap-seitige Navigationsleiste (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!