jquery 树形框 横_利用jQuery设计横/纵向菜单
在網(wǎng)頁(yè)中，菜單扮演著“指路者”的角色。如何設(shè)計(jì)一個(gè)人性化的菜單呢，下面小編帶著大家一起做。
效果圖：
設(shè)計(jì)歷程：
1.首先利用html中的
- 和
- 標(biāo)簽進(jìn)行嵌套，搭起一個(gè)整體的框架。如下圖所示：
Html代碼：
橫縱向菜單菜單項(xiàng)1
子菜單項(xiàng)11
子菜單項(xiàng)12
菜單項(xiàng)2
子菜單項(xiàng)21
子菜單項(xiàng)22
菜單項(xiàng)3
子菜單項(xiàng)31
子菜單項(xiàng)32
(這是展示的是縱向菜單的代碼，橫向代碼亦是如此，只需更改一下class的名字，以便在設(shè)計(jì)樣式時(shí)區(qū)別開(kāi)。)
2.上面的兩幅圖形成鮮明的對(duì)比，用戶(hù)理所應(yīng)當(dāng)選擇前者了，接下來(lái)我們就給框架“穿”件衣服。
CSS代碼：
ul,li{
/*清除ul和li前默認(rèn)的小圓點(diǎn)*/
list-style:none;
}
ul{
/*清除子菜單的縮進(jìn)值*/
padding:0;
margin:0;
}
.main,.hmain{
/*??菜單項(xiàng)的背景是一小塊圖片平移重復(fù)構(gòu)成的，看起來(lái)有立體感
*/??background-image:url(../image/title.gif);
background-repeat:repeat-x;
width:120px;
}
li{
/*??設(shè)置背景顏色，菜單項(xiàng)的背景圖片覆蓋背景顏色
*/??background-color:#CCC;
}
a{
/*取消所有鏈接的下劃線(xiàn)*/
text-decoration:none;
/*??讓a充滿(mǎn)整個(gè)區(qū)域，鼠標(biāo)點(diǎn)擊的那行一直是手形
*/??display:block;
display:inline-block;
width:100px;
padding-left:20px;
padding-top:3px;
padding-bottom:3px;
}
.main?a,.hmain?a{
/*??設(shè)置菜單項(xiàng)的字體顏色
*/??color:white;
/*在菜單項(xiàng)前添加向右指的圖片
*/??background-image:url(../image/collapsed.gif);
background-repeat:no-repeat;
background-position:3px?center;
}
.main?li?a,.hmain?li?a{
/*??設(shè)置子菜單的字體顏色
*/??color:black;
background-image:none;
}
.main?ul,.hmain?ul{
/*??初始不顯示子菜單項(xiàng)
*/??display:none;
}
.hmain{
/*??橫向菜單每個(gè)菜單項(xiàng)向左浮動(dòng)，在一行顯示
*/??float:left;
margin-right:1px;
}*/
注：“main”—縱向 ? “hmain”—橫向
3.菜單的表面工作完成了，它不是擺在那里給人看的，需要和用戶(hù)進(jìn)行交互，實(shí)現(xiàn)一些動(dòng)態(tài)效果。當(dāng)我們點(diǎn)擊菜單項(xiàng)時(shí)，首先鼠標(biāo)箭頭變?yōu)槭中?#xff0c;點(diǎn)擊后下面隱藏的子菜單項(xiàng)會(huì)顯示出來(lái)，同時(shí)指向右的箭頭變?yōu)橹赶蛳路健Ｔ冱c(diǎn)擊菜單項(xiàng)時(shí)，子菜單項(xiàng)隱藏，同時(shí)更換箭頭圖片。
JavaScript就是賦予網(wǎng)頁(yè)生命力的大神，而jQuery則是一個(gè)兼容多瀏覽器的javascript庫(kù)，有了它使得javascript寫(xiě)得更少,做得更多。引用了jquery庫(kù)后，編寫(xiě)如下代碼：
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"));
});
});
/*修改主菜單的指示圖標(biāo)*/
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')");
}
}
}
至此，兩個(gè)菜單設(shè)計(jì)完成了，是不是很有成就感呢！
縱觀(guān)全局，html是軀體，css是衣服，js則是靈魂。三者的配合，構(gòu)成了一個(gè)個(gè)鮮活靈動(dòng)的網(wǎng)頁(yè)。記得最初照著視頻敲牛腩新聞發(fā)布系統(tǒng)的時(shí)候，覺(jué)得B/S開(kāi)發(fā)就是雜七雜八的東西往一塊兒拼湊。隨著后來(lái)的“盲人摸象”，現(xiàn)在有了逐漸清晰的認(rèn)識(shí)。
總結(jié)
以上是生活随笔為你收集整理的jquery 树形框 横_利用jQuery设计横/纵向菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： htop linux命令详解,htop使
- 下一篇： 机器学习 监督学习论文_NeurIPS