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
Positionierung der seitlichen Schiebeleiste behoben
Verwendung der Bootstrap-Reaktionsfähigkeit Verwendet die Werkzeugklasse „Visibility-SM, Visible-Xs, Hidden-Xs, Hidden-Sm“ usw., um sich an verschiedene Bildschirme anzupassen.
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
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>
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:
transformieren: div drehen, 2D- oder 3D-Rotation von Elementen unterstützen, der Attributwert translatorX (X) ist der Abstand der Bewegung von Xpx auf der X-Achseund der seitlichen Verschiebung Animationseffekt verwendet Übergangsattribut, legt den Effekt der Übergangsanimation des Attributs fest, Syntax
Übergang: Eigenschaftsdauer Timing-Funktionsverzögerung
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:
So implementieren Sie die zusammenklappbare Seitennavigation in BootstrapDas 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!
