菜单教程1：利用jquery和css编制类似QQ分栏菜单

前面我在blog中提到了如何用jQuery实现简单的ajax编程，如果你阅读过那篇文章或者你正在使用jQuery，你应该会体验到jQuery是多么强大，早知道有这样的库出来，我当初就不用花时间学习javascript了。所以鉴于此，我打算今后将逐步写一些如何用jQuery配合css制作出特殊菜单的教程，或者一些比较有用的应用，由于是原创，所以可能发布的速度不会很快，其实很多js的教程不需要专门写得多么的详细，我建议大家发现好玩的东西就去查看源代码，然后将脚本下载到本地就行修改和研究，这样就会有比较大的进步。

今天要介绍的这个例子将会在我新版的bloggermap中出现，那就是如何利用jquery和css制作出类似QQ软件分栏的菜单。其实主要的重点还是css，其次才是jQuery的应该首先请大家看看这个iframe中的效果图：
新窗口中打开

下载地址在这里jquery-menu.zip（压缩文件中的php文件请删除，那是多余的文件）。

首先我们看看css代码，这个仅仅是举例子，在平时的应用中建议大家外部链接css，下面对css的介绍和解释都在注释文件中

a:link,a:visited{
color:#094477;text-decoration:none;font-size:12px;
}
a:link:hover,a:visited:hover{
color:#000cf;text-decoration:underline;
}
a.bold:link,a.bold:visited{
color:#FFF;text-decoration:none;
display:block;
font-weight:bold;
font-size:18px;
width:100px;height:30px;
background-color:#009966;
padding:10px;
margin:50px 0 0 100px;
text-align:center;
float:left;
}
/*上面的css就不用介绍了关键是下面的css*/
ul.proul,ul.subcity,ul.proul li ul.subcity{
list-style:none;padding:0;margin:0;
/*默认的ul将会自动排缩进,所以这里手动限制不要缩进*/
}
ul.subcity{
display:none;list-style:none;padding:0;margin:0;
/*默认的ul将会自动排缩进,所以这里手动限制不要缩进*/
}
li.blogprolist a{
height:16px;width:145px;background:url(images/new-probar.gif) no-repeat 0 0;
display:block;margin:1px 0;text-align:center;font-weight:bold;padding:3px 0 0 0;
/*将链接的display设置成blog,这样a标签才可以控制width和height,才能更好的使用背景*/
}
li.blogprolist a:link:hover,li.blogprolist a:link:active{
background:url(images/new-probar-act.gif) no-repeat 0 0;text-decoration:none;
/*鼠标悬停的时候换上另外一张图片*/
}
.highlight{background:url(images/new-probar-act.gif) no-repeat 0 0;color:Red;
}
ul.subcity li a{
background:#fff;font-weight:normal;width:140px;border:1px solid #dfb68a;
border-top:0;border-bottom:0;margin:0 0 0 1px;
}

上面css的重点在于display:block,对于a标签,如果没有这个属性,是没有办法控制with和height的,当然IE例外.下面开始介绍js代码

<script type="text/javascript" src="jQuery.js"&gt'</script>
这里引入jquery代码,下面是简单的控制隐藏和显示的菜单.

global_pro_id = -1;//首先引入全局变量记录当前的母菜单ID,用于控制是否展开还是收缩
function ShowCity(i){
	var sub_li = "#city_"+i;//根据i变量获取当前母菜单的ID
	$("ul.subcity").hide();//隐藏所有的子类,这个是jQuery的强项,不需要一个一个的ID进行遍历,只需要根据css的规则找到class=subcity的ul即可,和普通的代码相比,省下了不少的代码
	if( global_pro_id == i ){
	//如果当前的菜单已经打开，则隐藏 然后给全局变量global_pro_id赋值
		$(sub_li).hide();//隐藏当前子菜单,就这么简单
		global_pro_id =-1
	}
	else {
		$(sub_li).show();//显示当前子菜单,就这么简单
		global_pro_id = i;//将当前的值赋于给全局变量,表示该ID已经被打开,这样下次点击的时候就关闭.
	}
}

如果文章中有少量的错别字,请大家包含,wordpress在修改含有代码的文章真的太麻烦了,呵呵!