Maison > Article > interface Web > Apprenez-vous étape par étape à écrire une barre de navigation sympa js css Implementation_jquery

Apprenez-vous étape par étape à écrire une barre de navigation sympa js css Implementation_jquery

WBOYoriginal: 2016-05-16 15:10:451282parcourir

Apprenez à créer une barre de navigation étape par étape. À la fin de l'article, je créerai une page complète et partagerai avec vous une barre de navigation sympa pour votre référence. Le contenu spécifique est le suivant

1. La barre de navigation en surbrillance de la page actuelle

Le premier est le code HTML, qui est très simple ul li implémente le menu

<!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>

Effet de base :

Ensuite, définissez les propriétés CSS. Notez ici que la balise a est un élément de niveau ligne, vous devez donc utiliser display pour la convertir en élément de niveau bloc. C'est très courant, et il existe également une utilisation courante. de hauteur de ligne

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

Effet obtenu :

Enfin, JS est utilisé pour ajouter dynamiquement des effets de positionnement
En y pensant de cette façon en js, il y aura un lien lorsque la page sautera. Faites correspondre les attributs en fonction du suffixe du lien, s'il correspond, changez le style pour obtenir l'effet souhaité
. Ce à quoi vous devez faire attention, c'est comment obtenir l'URL et comment trouver les informations href à partir de l'URL

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

Rendu

2. Faites glisser la barre de navigation qui bascule automatiquement

Sur la base de l'étape 1, modifiez le contenu de la balise HTMLa, puis définissez l'effet d'animation via CSS

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

Pour obtenir des effets d'animation avec CSS, définissez d'abord les balises b et i comme éléments de niveau bloc, afin qu'elles puissent être distribuées verticalement, puis définissez une transition pour a. La soi-disant animation consiste à modifier a après. est barré, puis déplacez vers le haut. Ajoutez une bordure à a pour une observation facile, voir l'image ci-dessous
.

Enfin, si vous souhaitez obtenir l'effet, définissez simplement un attribut caché de débordement pour le div qui enveloppe le menu

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

Il peut également être implémenté en utilisant JQ, le code est le suivant

$(function () {
  $(".list a").hover(function () {
    //stop是当执行其他动画的时候停止当前的
    $(this).stop().animate({
      "margin-top": -40
    }, 300);
  }, function () {
    $(this).stop().animate({
      "margin-top": 0
    }, 300);
  });
});

3. Implémentation flexible du sous-menu

Tout d'abord, le sous-menu est enveloppé dans div, avec des balises à l'intérieur, comme suit

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

Ensuite, définissez le style. Puisqu'il s'agit d'un sous-menu, il doit être séparé de la page du document, utilisez donc l'attribut absolu. Si vous utilisez cet attribut, le conteneur parent doit être relatif
.

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

L'effet suivant :

Ensuite, utilisez JQ et des plug-ins d'assouplissement pour contrôler l'animation
La méthode find est généralement utilisée pour rechercher
des éléments descendants de l'élément opérationnel.

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

L'effet, l'enregistrement des images n'est pas très bon, en fait ce sont toutes des animations élastiques.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Trois façons de créer des fonctions en JS et leurs différencesArticle suivant：Trois façons de créer des fonctions en JS et leurs différences

Articles Liés

Voir plus