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>
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; }
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"); } });
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>
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); }); });
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>
*{ 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; }
Seterusnya gunakan JQ dan pemalam melonggarkan untuk mengawal animasi
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"}); }); });
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.