CSS+JQ實現炫酷導航欄_html/css

   
 
Android
 
C++
 
IOS
 
Java
 
Ruby
 
首頁

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

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

 
 首頁 Index 
 
 Android 安卓 
 
 C++ 誰加加 
 
 IOS 蘋果 
 
 Java 爪哇 
 
 Ruby 如八一 
 

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

$(function () { $(".list a").hover(function () { //stop是當執行其他動畫的時候停止當前的 $(this).stop().animate({ "margin-top": -40 }, 300); }, function () { $(this).stop().animate({ "margin-top": 0 }, 300); });});

 
 Android 子菜單1 子菜單2 子菜單3 子菜單4 

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

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