Erfahren Sie Schritt für Schritt, wie man eine Navigationsleiste erstellt. Am Ende des Artikels werde ich eine coole Navigationsleiste als Referenz mit Ihnen teilen.
1. Die hervorgehobene Navigationsleiste der aktuellen Seite
Der erste ist der HTML-Code, der sehr einfach ist, ul+li implementiert das Menü
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏一</title>
</head>
<body>
<header class="header">
<div class="nva">
<ul class="list">
<li><a href="Android.html">Android</a></li>
<li><a href="C++.html">C++</a></li>
<li><a href="IOS.html">IOS</a></li>
<li><a href="Java.html">Java</a></li>
<li><a href="Ruby.html">Ruby</a></li>
</ul>
</div>
</header>
<h1>首页</h1>
</body>
</html>
Nach dem Login kopieren
Grundlegende Wirkung:
Als nächstes legen Sie die CSS-Eigenschaften fest. Beachten Sie, dass es sich bei Tag a um ein Element auf Zeilenebene handelt. Daher müssen Sie display verwenden, um es in ein Element auf Blockebene umzuwandeln der Zeilenhöhe
*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; }
.list li a:hover{ background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
h1{ margin: 20px auto; text-align: center; }
Nach dem Login kopieren
Erzielter Effekt:
Schließlich wird JS verwendet, um Positionierungseffekte dynamisch hinzuzufügen
Wenn man es sich in js so vorstellt, wird es einen Link geben, wenn die Seite entsprechend dem Suffix des Links springt. Wenn es übereinstimmt, ändern Sie den Stil, um den gewünschten Effekt zu erzielen
Sie müssen darauf achten, wie Sie die URL erhalten und wie Sie die href-Informationen aus der URL finden
$(function(){
//当前链接以/分割后最后一个元素索引
var index = window.location.href.split("/").length-1;
//最后一个元素前四个字母,防止后面带参数
var href = window.location.href.split("/")[index].substr(0,4);
if(href.length>0){
//如果匹配开头成功则更改样式
$(".list li a[href^='"+href+"']").addClass("on");
//[attribute^=value]：匹配给定的属性是以某些值开始的元素。
}else {
//默认主页高亮
$(".list li a[href^='index']").addClass("on");
}
});
Nach dem Login kopieren
Rendering
2. Schieben Sie die Navigationsleiste hinein, die automatisch wechselt
Ändern Sie basierend auf Schritt 1 den Inhalt des HTMLa-Tags und legen Sie dann den Animationseffekt über CSS fest
<ul class="list">
<li><a href="index01.html">
<b>首页</b>
<i>Index</i>
</a></li>
<li><a href="Android.html">
<b>Android</b>
<i>安卓</i>
</a></li>
<li><a href="C++.html">
<b>C++</b>
<i>谁加加</i>
</a></li>
<li><a href="IOS.html">
<b>IOS</b>
<i>苹果</i>
</a></li>
<li><a href="Java.html">
<b>Java</b>
<i>爪哇</i>
</a></li>
<li><a href="Ruby.html">
<b>Ruby</b>
<i>如八一</i>
</a></li>
</ul>
Nach dem Login kopieren
Um Animationseffekte mit CSS zu erzielen, legen Sie zunächst die Tags b und i als Elemente auf Blockebene fest, damit sie vertikal verteilt werden können, und legen Sie dann einen Übergang für a fest. Die sogenannte Animation besteht darin, a danach zu ändern wird eingekreuzt, und dann wird ein Rand nach oben verschoben, um die Beobachtung zu erleichtern, siehe Bild unten
Wenn Sie schließlich den Effekt erzielen möchten, legen Sie einfach ein verstecktes Überlaufattribut für das Div fest, das das Menü umschließt
*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; overflow: hidden; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s; }
.list b,.list i{ display: block; }
.list li a:hover{ margin-top: -40px; background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
h1{ margin: 20px auto; text-align: center; }
Nach dem Login kopieren
Es kann auch mit JQ implementiert werden, der Code lautet wie folgt
$(function () {
$(".list a").hover(function () {
//stop是当执行其他动画的时候停止当前的
$(this).stop().animate({
"margin-top": -40
}, 300);
}, function () {
$(this).stop().animate({
"margin-top": 0
}, 300);
});
});
Nach dem Login kopieren
3. Flexible Untermenü-Implementierung
Zuerst wird das Untermenü wie folgt in div mit Tags darin verpackt
<li><a href="Android.html">
<b>Android</b>
</a>
<div class="down">
<a href="#">子菜单1</a>
<a href="#">子菜单2</a>
<a href="#">子菜单3</a>
<a href="#">子菜单4</a>
</div>
</li>
Nach dem Login kopieren
Als nächstes legen Sie den Stil fest. Da es sich um ein Untermenü handelt, muss es von der Dokumentseite getrennt werden. Wenn Sie dieses Attribut verwenden, muss der übergeordnete Container relativ sein
*{ margin:0; padding: 0; }
a{ text-decoration: none; }
.nva{ width: 100%; height: 40px; margin-top: 70px; background-color: #222; position: relative; }
.list{ width: 80%; height: 40px; margin: 0 auto; list-style-type: none; }
.list li{ float: left; }
.list li a{ padding: 0 30px; color: #aaa; line-height: 40px; display: block; transition: 0.3s; }
.list b{ display: block; }
.list li a:hover{ background:#333; color:#fff; }
.list li a.on{ background:#333; color:#fff; }
.list .down{ position: absolute; top: 40px; background-color: #222; /*display: none;*/ }
.list .down a{ color: #aaa; padding-left: 30px; display: block; }
h1{ margin: 20px auto; text-align: center; }
Nach dem Login kopieren
Der folgende Effekt:
Als nächstes verwenden Sie JQ und Easing-Plug-Ins, um die Animation zu steuern
Die Suchmethode wird im Allgemeinen verwendet, um
von Nachkommenelementen des Bedienelements zu finden.
$(function () {
$(".list li").hover(function () {
//这里使用了easing插件
$(this).find(".down").stop().slideDown({duration:1000,easing:"easeOutBounce"});
}, function () {
$(this).find(".down").stop().slideUp({duration:1000,easing:"easeOutBounce"});
});
});
Nach dem Login kopieren
Der Effekt, die Bildaufnahme ist nicht sehr gut, tatsächlich handelt es sich bei allen um elastische Animationen.
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
