Linux教程網 >> Linux編程 >> Linux編程 >> jQuery縱橫向菜單和浮層效果

jQuery縱橫向菜單和浮層效果

日期：2017/3/1 10:26:19 编辑：Linux編程

首先列出的是jQuery縱橫向菜單的效果的演示

<html>
<head>
<title>JQuery縱橫向菜單效果</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<style type="text/css">
UL,LI{
list-style:none; //去掉小圓點
}
UL{
padding:0; margin:0; //清除子菜單縮進,但IE浏覽器不能縮進
}
.mainMenu,.crossMenu{ /**主菜單樣式*/
width:70px; font-size:12px; //主菜單寬度//字體大小12px
background-image:url(../../resources/images/title.gif); background-repeat:repeat-x; //添加背景圖片//背景圖橫向重復
}
LI{
background-color:#EEEEEE; //子菜單樣式：背景色
}
A{
text-decoration:none; //取消鏈接的下劃線
padding-left:15px; //子菜單縮進
/**
* 讓連接充滿區域,及菜單邊緣也可以點擊
* 問題：若值為block,則IE會出現問題,不能填充,且子菜單會變樣
* 問題：因此我們用inline解決,但是不能解決填充,因此加上寬度(70 - 15)
*/
display:block; display:inline; width:70px;
padding-top:3px; padding-bottom:3px; //給所有的鏈接加3個像素的上邊距和下邊距
}
.mainMenu A,.crossMenu A{
color:blue; background-position:2px center; //主菜單鏈接為藍色//背景箭頭的位置
background-image:url(../../resources/images/collapsed.gif); background-repeat:no-repeat; //鏈接背景圖片//背景圖不重復
}
.mainMenu LI A,.crossMenu LI A{
color:green; background-image:none; //子菜單鏈接文字為綠色//去掉子菜單背景箭頭
}
.mainMenu UL,.crossMenu UL{
display:none; //主菜單下的UL全部隱藏
}
.crossMenu{
font-size:12px; float:left; //字體大小12px//橫向排列
}
</style>
<script type="text/javascript">
$(function(){
$('.mainMenu > a').click(
function(){ //這樣取到的就是：<a href="#">機構管理</a>。而非：<a href="#">添加機構</a>
var childMenu = $(this).next('ul'); //找到主菜單項的子菜單項
childMenu.slideToggle(); //改方法可以省去判斷元素是否顯示的過程，直接令隱藏的元素顯示，令顯示的元素隱藏
changeIcon($(this));
}
);
$('.crossMenu').hover(
function(){
$(this).children('ul').slideToggle();
changeIcon($(this).children('a'));
}
);
});
function changeIcon(mainNode){ //修改主菜單的指示圖標
if(mainNode){
if(mainNode.css('background-image').indexOf('collapsed.gif') >= 0){
mainNode.css('background-image', 'url(resources/images/expanded.gif)');
}else{
mainNode.css('background-image', 'url(resources/images/collapsed.gif)');
}
}
}
</script>
</head>
<body>
<ul>
<li class="mainMenu">
<a href="#">機構管理</a>
<ul>
<li><a href="#">添加機構</a></li>
<li><a href="#">修改機構</a></li>
<li><a href="#">查詢機構</a></li>
</ul>
</li>
<li class="mainMenu">
<a href="#">部門管理</a>
<ul>
<li><a href="#">添加部門</a></li>
<li><a href="#">修改部門</a></li>
<li><a href="#">查詢部門</a></li>
</ul>
</li>
<li class="mainMenu">
<a href="#">員工管理</a>
<ul>
<li><a href="#">添加員工</a></li>
<li><a href="#">修改員工</a></li>
<li><a href="#">查詢員工</a></li>
</ul>
</li>
</ul>
<br/>
<hr/>
<br/>
<ul>
<li class="crossMenu">
<a href="#">機構管理</a>
<ul>
<li><a href="#">添加機構</a></li>
<li><a href="#">修改機構</a></li>
<li><a href="#">查詢機構</a></li>
</ul>
</li>
<li class="crossMenu">
<a href="#">部門管理</a>
<ul>
<li><a href="#">添加部門</a></li>
<li><a href="#">修改部門</a></li>
<li><a href="#">查詢部門</a></li>
</ul>
</li>
<li class="crossMenu">
<a href="#">員工管理</a>
<ul>
<li><a href="#">添加員工</a></li>
<li><a href="#">修改員工</a></li>
<li><a href="#">查詢員工</a></li>
</ul>
</li>
</ul>
</body>
</html>