利用jQuery設計橫/縱向菜單
阿新 • • 發佈：2017-05-20
cor 清晰 down content img javascrip ogg 當我 菜單
在網頁中，菜單扮演著“指路者”的角色。怎樣設計一個人性化的菜單呢。以下小編帶著大家一起做。
效果圖：
設計歷程：
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設計橫/縱向菜單