Jquery、css製作炫酷導航欄
阿新 • • 發佈：2019-01-25
直接看效果圖
程式碼實現
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #nav{list-style-type: none;margin: 50px auto 0;width: 950px;height: 38px;color: #333; font-size: 14px;padding: 0;overflow: hidden;} #nav li{width: 104px;height: 36px;float: left;text-align: center;line-height: 38px;border-top: 1px solid #ccc; border-left: 1px solid #ccc;border-bottom: 1px solid #ccc;cursor: pointer;} #nav li:last-child{border-right: 1px solid #ccc;} #nav span{width: 100%;height: 38px;display: block;position: relative;z-index: -1;} </style> <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script> <script type="application/javascript"> $(document).ready(function(e){ //點選li事件 $('#nav li').click(function(e){ $('.liclick').removeClass('liclick'); $(this).addClass('liclick'); }); //設定一個顏色陣列 var color=['#FFDAB9','#7CFC00','#7FFFD4','#40E0D0','#C0C0C0','#FA8072','#FF69B4','#FFC0CB','#BA55D3']; $('#nav li').append('<span>'); //給每個span新增顏色 $('#nav span').each(function(index,element){ $(this).css('background-color',color[index]); }); //切換顏色*****注意：這裡的38預設帶了px，不需要自己寫成38px $('#nav li').hover(function(){ $(this).children('span').animate({'top':-38},200); },function(){ $(this).children('span').animate({'top':0},200); }); }); </script> </head> <body> <ul id="nav"> <li class="liclick">導航一</li> <li>導航二</li> <li>導航三</li> <li>導航四</li> <li>導航五</li> <li>導航六</li> <li>導航七</li> <li>導航八</li> <li>導航九</li> </ul> </nav> </body> </html>