cari

Rumah >hujung hadapan web >tutorial js >Ajar anda langkah demi langkah untuk menulis bar navigasi sejuk js+css implementation_jquery

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

WBOY
WBOYasal
2016-05-16 15:10:451321semak imbas

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

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

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Tiga cara untuk mencipta fungsi dalam JS dan perbezaannyaArtikel seterusnya：Tiga cara untuk mencipta fungsi dalam JS dan perbezaannya

Artikel berkaitan

Lihat lagi