suchen

Heim  >  Artikel  >  Web-Frontend  >  Bringen Sie Ihnen Schritt für Schritt bei, eine coole js+css-Implementierung_jquery für die Navigationsleiste zu schreiben

Bringen Sie Ihnen Schritt für Schritt bei, eine coole js+css-Implementierung_jquery für die Navigationsleiste zu schreiben

WBOY
WBOYOriginal
2016-05-16 15:10:451293Durchsuche

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>

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; }

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");
  }
});

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>

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; }

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);
  });
});

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>

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; }
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"});
  });
});
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.

Stellungnahme：
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
Vorheriger Artikel：Drei Möglichkeiten zum Erstellen von Funktionen in JS und ihre UnterschiedeNächster Artikel：Drei Möglichkeiten zum Erstellen von Funktionen in JS und ihre Unterschiede

In Verbindung stehende Artikel

Mehr sehen