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