Bootstrap implementiert einen einfachen seitlichen Navigationsleisteneffekt

In diesem Artikel erfahren Sie, wie Sie die seitliche Navigationsleiste „Bootstrap“ implementieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein. Verwandte Empfehlungen: „Bootstrap-Tutorial“ - sm sichtbar- xs versteckt-xs versteckt-sm usw. werden an verschiedene Bildschirme angepasst

Der seitliche Schiebeeffekt der seitlichen Schiebeleiste wird nicht mit der JQuery-Methode implementiert, sondern das CSS3-Transformationsattribut wird zum Verschieben des Div verwendet und erstellen Sie den seitlich verschiebbaren Animationseffekt.

Nachteile: Es werden zwei Menüsätze verwendet, einer ist das auf dem PC-Bildschirm angezeigte Menü und der andere ist das auf dem Mobiltelefon angezeigte mobile Navigationsmenü Terminal. Dieser Nachteil liegt auf der Hand und es werden irrelevante Tags generiert. Vorteilscode: Wenige, einfache und leicht zu akzeptierende Darstellung: Bootstrap-Navigationsleisten-Layout: Ein Navigationsleisten-Layout verwendet zwei Navigationsmenüs, eines für PC und eines für Mobiltelefone. Auf der Clientseite wird die Bootstrap-Responsive-Tool-Klasse Visible-Xs Visible-SM verwendet, um die Umschalttaste auf dem PC-Client auszublenden Navigationsleiste auf dem PC-Client; sichtbar-xs wird verwendet, um die mobile Navigationsleiste auf dem Mobiltelefon-Client anzuzeigen. Einzelheiten zur Bootstrap-Responsive-Tool-Klasse: https://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html

css zum Erzielen von Layout- und Side-Sliding-Effekten (wichtige CSS3-Attribute Transformation und Übergang für Seite). -sliding) Nicht viel Code, nur 10 Zeilen

    <!--手机导航栏-->
    <div>
        <ul>
            <li><a>首页</a></li>
            <li><a>Java</a></li>
            <li><a>SVN</a></li>
            <li><a>iOS</a></li>
        </ul>
    </div>
    <!--pc导航栏-->
    <nav>
        <div>
            <div>
                <a>菜鸟教程</a>
            </div>
            <div>
                <ul>
                    <li><a>iOS</a></li>
                    <li><a>SVN</a></li>
                    <li><a>Java</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!--手机导航栏侧滑-->
    <div>
        <a>
            <span></span>
        </a>
    </div>

• Bemerkenswert sind die beiden Attribute von CSS3:

  Transformieren: Div drehen, 2D- oder 3D-Rotation von Elementen unterstützen, der Attributwert translatorX (X) ist to Verschieben Sie Xpx auf der Die Syntax

  Übergang: Eigenschaftsdauer Timing-Funktionsverzögerung ;
http://www.w3school.com.cn/cssref/pr_transition.asp
Klick-Ereignisschalter seitlich verschiebbar

•          * {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;}

Zusammenfassung

• Das ist es Es wird nicht empfohlen, zwei Menü-Navigationsleisten zu verwenden. Die Mängel liegen auf der Hand. Nur um den Effekt zu erzielen, macht es nichts, tatsächlich kann dies auch mit einer Menü-Navigationsleiste erreicht werden. Versuchen Sie es mit Medien und es kann erreicht werden.

Code-Download: http://download.csdn.net/detail/kebi007/9909725

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung

! !

Das obige ist der detaillierte Inhalt vonBootstrap implementiert einen einfachen seitlichen Navigationsleisteneffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!