Heim > Web-Frontend > Bootstrap-Tutorial > Bootstrap implementiert einen einfachen seitlichen Navigationsleisteneffekt

Bootstrap implementiert einen einfachen seitlichen Navigationsleisteneffekt

青灯夜游
Freigeben: 2021-02-01 11:35:00
nach vorne
6870 Leute haben es durchsucht

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. Bootstrap implementiert einen einfachen seitlichen Navigationsleisteneffekt

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>
Nach dem Login kopieren
  • 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;}
    Nach dem Login kopieren

  • 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

! ! Bootstrap implementiert einen einfachen seitlichen Navigationsleisteneffekt

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!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage