Ajar anda langkah demi langkah untuk menulis bar navigasi sejuk js+css implementation

Ajar anda langkah demi langkah untuk menulis bar navigasi sejuk js+css implementation_jquery

WBOY

Lepaskan： 2016-05-16 15:10:45

asal

1292 orang telah melayarinya

Belajar membuat bar navigasi langkah demi langkah Pada akhir artikel, saya akan membuat halaman yang komprehensif dan berkongsi dengan anda bar navigasi yang menarik untuk rujukan anda

1. Bar navigasi yang diserlahkan pada halaman semasa

Yang pertama ialah kod HTML, yang sangat mudah, ul+li melaksanakan 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>

Salin selepas log masuk

Kesan asas:

Seterusnya, tetapkan sifat CSS Perhatikan di sini bahawa teg a ialah elemen peringkat baris, jadi anda perlu menggunakan paparan untuk menukarnya kepada elemen peringkat blok Ini sangat biasa, dan terdapat juga penggunaan biasa daripada ketinggian garisan

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

Salin selepas log masuk

Kesan yang dicapai:

Akhir sekali, JS digunakan untuk menambah kesan kedudukan secara dinamik

Memikirkannya dengan cara ini dalam js, akan ada pautan apabila halaman melompat Padankan atribut mengikut akhiran pautan Jika ia sepadan, tukar gaya untuk mencapai kesan yang diingini Apa yang anda perlu beri perhatian ialah cara mendapatkan URL dan cara mencari maklumat href daripada 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");
  }
});

Salin selepas log masuk

Perenderan

2. Luncurkan dalam bar navigasi yang bertukar secara automatik

Berdasarkan langkah 1, ubah suai kandungan teg HTMLa, dan kemudian tetapkan kesan animasi melalui 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>

Salin selepas log masuk

Untuk mencapai kesan animasi dengan CSS, mula-mula tetapkan teg b dan i sebagai elemen peringkat blok, supaya ia boleh diedarkan secara menegak, dan kemudian tetapkan peralihan untuk a ia disisipkan, dan kemudian gerakkan ke atas Tambahkan sempadan pada a untuk pemerhatian mudah, lihat gambar di bawah

Akhir sekali, jika anda ingin mencapai kesannya, tetapkan atribut tersembunyi limpahan untuk div yang membungkus 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; }

Salin selepas log masuk

Ia juga boleh dilaksanakan menggunakan JQ, kodnya adalah seperti berikut

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

Salin selepas log masuk

3. Pelaksanaan submenu yang fleksibel

Pertama sekali, submenu dibungkus dalam div, dengan tag di dalamnya, seperti berikut

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

Salin selepas log masuk

Seterusnya, tetapkan gaya Memandangkan ia adalah submenu, ia perlu dipisahkan daripada halaman dokumen, jadi gunakan atribut mutlak Jika anda menggunakan atribut ini, bekas induk mestilah 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; }

Salin selepas log masuk

Kesan berikut:

Seterusnya gunakan JQ dan pemalam melonggarkan untuk mengawal animasi

Kaedah cari biasanya digunakan untuk mencari

unsur turunan unsur pengendalian.

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

Salin selepas log masuk

Kesannya, rakaman gambar tidak begitu bagus, malah semuanya adalah animasi anjal.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.