利用jQuery設計橫/縱向菜單
阿新 • • 發佈:2017-05-20
cor 清晰 down content img javascrip ogg 當我 菜單
註:“main”—縱向 “hmain”—橫向
在網頁中,菜單扮演著“指路者”的角色。怎樣設計一個人性化的菜單呢。以下小編帶著大家一起做。
效果圖:
設計歷程:
1.首先利用html中的<ul>和<li>標簽進行嵌套,搭起一個總體的框架。例如以下圖所看到的:
Html代碼:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>橫縱向菜單</title> <link rel="stylesheet" type="text/css" href="css/menu.css"/> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/menu.js"></script> </head> <body> <body> <ul> <li class="main"> <a href="#">菜單項1</a> <ul> <li> <a href="#">子菜單項11</a> </li> <li> <a href="#">子菜單項12</a> </li> </ul> </li> <li class="main"> <a href="#">菜單項2</a> <ul> <li> <a href="#">子菜單項21</a> </li> <li> <a href="#">子菜單項22</a> </li> </ul> </li> <li class="main"> <a href="#">菜單項3</a> <ul> <li> <a href="#">子菜單項31</a> </li> <li> <a href="#">子菜單項32</a> </li> </ul> </li> </ul> </body> </html>
(這是展示的是縱向菜單的代碼,橫向代碼亦是如此,僅僅需更改一下class的名字,以便在設計樣式時差別開。
)
2.上面的兩幅圖形成鮮明的對照,用戶理所應當選擇前者了。接下來我們就給框架“穿”件衣服。
CSS代碼:
ul,li{ /*清除ul和li前默認的小圓點*/ list-style:none; } ul{ /*清除子菜單的縮進值*/ padding:0; margin:0; } .main,.hmain{ /* 菜單項的背景是一小塊圖片平移反復構成的,看起來有立體感 */ background-image:url(../image/title.gif); background-repeat:repeat-x; width:120px; } li{ /* 設置背景顏色,菜單項的背景圖片覆蓋背景顏色 */ background-color:#CCC; } a{ /*取消全部鏈接的下劃線*/ text-decoration:none; /* 讓a充滿整個區域。鼠標點擊的那行一直是手形 */ display:block; display:inline-block; width:100px; padding-left:20px; padding-top:3px; padding-bottom:3px; } .main a,.hmain a{ /* 設置菜單項的字體顏色 */ color:white; /*在菜單項前加入向右指的圖片 */ background-image:url(../image/collapsed.gif); background-repeat:no-repeat; background-position:3px center; } .main li a,.hmain li a{ /* 設置子菜單的字體顏色 */ color:black; background-image:none; } .main ul,.hmain ul{ /* 初始不顯示子菜單項 */ display:none; } .hmain{ /* 橫向菜單每一個菜單項向左浮動,在一行顯示 */ float:left; margin-right:1px; }*/
3.菜單的表面工作完畢了,它不是擺在那裏給人看的,須要和用戶進行交互。實現一些動態效果。當我們點擊菜單項時。首先鼠標箭頭變為手形。點擊後以下隱藏的子菜單項會顯示出來。同一時候指向右的箭頭變為指向下方。
再點擊菜單項時,子菜單項隱藏,同一時候更換箭頭圖片。
javascript就是賦予網頁生命力的大神,而jQuery則是一個兼容多瀏覽器的javascript庫。有了它使得javascript寫得更少,做得很多其它。引用了jQuery庫後,編寫例如以下代碼:
javascript代碼:
$(document).ready(function() { //縱向菜單 $(".main > a").click(function(){ var ulNode=$(this).next("ul"); ulNode.slideToggle(); changeIcon($(this)); }); //橫向菜單 $(".hmain").hover(function(){ $(this).children("ul").slideDown(); changeIcon($(this).children("a")); },function(){ $(this).children("ul").slideUp(); changeIcon($(this).children("a")); }); }); /*改動主菜單的指示圖標*/ function changeIcon(mainNode){ if(mainNode){ if(mainNode.css("background-image").indexOf("collapsed.gif")>=0){ mainNode.css("background-image","url(‘image/expanded.gif‘)"); }else{ mainNode.css("background-image","url(‘image/collapsed.gif‘)"); } } }
至此,兩個菜單設計完畢了。是不是非常有成就感呢!
縱觀全局。html是軀體。css是衣服,js則是靈魂。三者的配合。構成了一個個鮮活靈動的網頁。記得最初照著視頻敲牛腩新聞公布系統的時候。認為B/S開發就是雜七雜八的東西往一塊兒拼湊。
隨著後來的“盲人摸象”,如今有了逐漸清晰的認識。
利用jQuery設計橫/縱向菜單