Loading...

菜单教程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在修改含有代码的文章真的太麻烦了,呵呵!

标签:,
发表于 2007-11-16 19:21:49 目录:互联网事 [RSS 2.0] 你可以发表评论, 或者从您的网站 trackback
  • 相关阅读
  • homezz 美国专业主机商
    已经有4位大师动手指导 拒绝低俗
    • 1楼 Cloudream 在2007.11.16 19:48发表评论如下: 回复

      jQuery UI有这个组件……

      我用jQuery都犹豫了很久,压缩+gzip之后10k左右才开始使用的,不想再添加更庞大的js了呢。如果是做web应用,网速不是问题的话,那个UI组件肯定是首选。

      • 2楼 Jake 在2007.11.17 05:35发表评论如下: 回复

        连google都在用jquery了。确实很好,很强大。

        是很强大,呵呵

        • 3楼 icemanpro 在2008.09.03 18:07发表评论如下: 回复

          点播,如何用jquery做树状菜单??

        评论分页: 1
        (Required)
        (Required, not published)
        如果留言未显示无需重复留言,我将为你恢复!