闲话网站左侧导航的实现

1、闲话网站左侧导航的实现好久没玩CSS布局了，对于大多数在已有Webg架上开发项目的童鞋，极少情况会用到Webg架+ExtJs 库，对 CSScss来布局和美化页面。比如我现用所在项目用的是公司的一个现有仅仅是一些像给某个元素换背景图之类的简单的应用。今天在博客园闲逛，无聊看了一下博客 园首页左侧的网站导航的代码，然后我觉得应该有更好的实现方式(至少我认为)。博客园之 所以现在的方式实现左侧导航，估计是为了更好的与后台业务结合吧。当我们要实现一个功能时，往往有很多解决方式，有些好的方式也往往很难分出绝对的优 劣。对于一个功能的实现，如果你试图去寻找一种最优的解决方案，那可能是一种无穷无尽的 工作

2、，而现实工作中我们也不可能花太多的时间去寻找更多更佳的解决方案。这种“程序员精 神”的“寻找”工作只能作为我们平时闲的无聊时的一种消遣。如果此时你正好也很闲，不访 和我一起探讨探讨网站左侧导航的实现。虽然实现起来很简单，但你的方式是不是一定是最佳 的呢？废话不多说，让我们先来看看博客园的实现吧。为了把重点放在 css上，我对博客园的代码进行了一些改变，但大体逻辑是一样的(感兴趣的话可以查看博客园的前台代码)。HTML部分(后台生成)：d=cate_wrap网站分类.NET技术(9) 编程语言(7) 软件设计(0).NET新手区(0)ASP.NET(2)C#(4)WinForm(1)Silver

3、light(0)WCF(0)CLR(0)WPF(6)Java(3)C+(2)PHP(2)Delphi(0)li架构设计(0)li面向对象(3)li设计模式(0)CSS部分：全局设置*/body,div, ul, li margin:。； padding:0; st-style:none; lor:#666; text-decoration:none; 左边导航*/rap position: absolute; left: 10px; top: 50px; width: 160px; padding-top: 0px; rap a text-decoration:none;itle_wrap h

4、eight:20px;padding-left:8px;background-color:#009900;color:#FCFCFC;cursor:detem border:1px solid #ababab; background-color:#FFF; tem li cursorpointer; height: 30px; line-height: 30px; border-bottom: 1px solid #abab-left: 8px;background: url(arrow.png); tem li.over color:#FFF;background-color: #FF932

5、0;ub_wrap cursor:pointer; position: absolute; left: 148px; display: none; width: 150px; bor ababab;border-bottom:2px solid #ff8500; line-height: 2em; background-color:#FFF; ub_wrap li padding-left: 10px; height: 28px;border-bottom:1px solid #ababab; ub_wrap li.over color:#FFF;background-color: #FF93

6、20;JS部分(博客园是把 mouseover和mouseout的调用放在html中，这里我放在 JS中动态 绑定，区别不大)：tion () /给第一级分类添加mouseover、mouseout效果$(#cate_item li).mouseover(function () /通过截取id数字部分动态控曲子分类的wrap块显示位置var top =).addClass(over).attr(id).substr($(this).attr(id).lastIndexOf(_)+1$(#cate_sub_ + top).show().css(top, top + px);).mouseout(

7、function () var top = $(this).removeClass(over).attr(id).substr($(this).attr(id).lastIndexOf(_) + 1);$(#cate_sub_ + top).hide(););/这里还需要给子分类的wrap块添加mouseover、mouseout事件，控制当前的第一分类的显示效果$(.cate_sub_wrap).mouseover(function () var top = $(this).attr(id).substr($(this).attr(id).lastIndexOf(_) + 1);$(#cat

8、e_item_ + top).addClass(over);$(this).show().css(top, top + px);).mouseout(function () var top = $(this).attr(id).substr($(this).attr(id).lastIndexOf(_) + 1);$(#cate_item_ + top).removeClass(over);$(this).hide().css(top, top + px););/给第二级分类添加mouseover、mouseout效果$(.cate_sub_wrap li).mouseover(functio

9、n () $(this).addClass(over);).mouseout(function () $(this).removeClass(over);););效果图:代码很简单，不需要作解释。主要是让大家了解一下这种思路。下面用另一种方式实现, 这个过程我尽量讲的详细一点。步一步来，用 VS先创建一个html文件，在body元素中添加一个 div层，如下:iv id=cate_nav_wrapdiv接下来用jQuery模拟后台动态创建网站分类html的ul和li元素，如下：tion () /动态创建用于网站导航的ul、li元素var $ul = $(#cate_nav_wrap).appe

10、nd().children(ul);for (var i = 0; i 10; i+) var $sub_ul = $ul.append().children(li).eq(i).appenref=# 第一级分类+ i + ”).append().children( for (var j = 0; j 6; j+) $sub_ul.append().children(li).eq(j).append(分类+ i+j + ););上面的jQuery代码会生成如下 html元素：第一级分类 0分类 01分类 04第二级分类 00第二级分类02第二级分类 03第二级分类05第一级分类 1第二级分类

11、10分类 11 第二级分类 12第二级分类 13第二级分类 14第二级分类 15第一级分类 2第二级分类 20第二级分类 21第二级分类 22第二级分类 23第二级分类 24第二级分类 25为了达到和博客园类似的导航效果，我们一般会这样定义CSSiv, ul,a margin: 0px; padding: 0px;font-size:12px; a text-decoration: none;ul list-style: none; width:150px;background-color:#fff;border: 1px sol0; border-bottom: none;cate_nav_

12、wrap position: absolute; top: 100px; left: 10px; cate_nav li cursor:pointer; border-bottom: 1px solid #808080;g-left: 10px;height:30px;line-height:30px; #cate_nav li b margin-left:55px;/*箭头样式 */cate_nav li ul display: none; position:absolute; left:150px;cate_nav li.over background-color: #0094ff; co

13、lor: #fff; /*元素被 mou*/到这里，我们来看一下效果:这个时候鼠标移上去当然是没有充第一觐分强第一 分类i第一条分密第一孤分率第一癌分类*第一飘分建第一皴分笊同娥分类T第T6域8第果的，因为我们还要加入卜由i这样一段jQuery代码：ousemove mouseout 显示效果$(#cate_nav li).mousemove(function () /这里需要计算第二级分类ul块的显示位置$(this).addClass(over).children(ul).show().css(this).index() * 30 + $(this).index() + px);).mou

14、seout(function () $(this).removeClass(over).children(ul).hide();)；m,$好，我们再来看一下效果:第-颌分如第-初阂第二级分类卬第一级分类2第二级分类11第一分类3第二级分类1更第一级分类4第二毅分类。第TMf类W第二纸分类14第一级分类E第二级分类15第一级分类T第一分妙第一锻分类q但是似乎有个问题， 当鼠标移动分类上的时候， 文字的颜色并没有反色显示 (显示为白色 #fff ,这也是一种常见效果)，因为我们在 CSS中已经定义了这本一段样式： #cate_nav li.over background-color: #0094f

15、f; color: #fff; 。明明定义了当 mouseover 的时候反色显示，为什么没效果呢？原因很简单，因为文字是包裹在a元素里的，系统给a元素的color属性设置了 blue,他父级元素li的属性优先级要低于 a自身的属性，所以li的color属性对a是不起作用 的，而li元素下面还有一个 b元素，它是没自己的color属性的，所以鼠标移到分类上时有反色显示。因此，我们自然就有了解决 a标签没有反色显示的办法，自然会想到，当moseover的时候再控制一下a的样式不就行么。于是我们去掉#cate_nav li.over background-color: #0094ff; color

16、: #fff; 中的 color 属性，加上这样一句CSS代码：nav li a.over color: #fff; js也要做相应的变动：mousemove mouseout 显示效果$(#cate_nav li).mousemove(function () /这里需要计算第二级分类ul块的显示位置$(this).addClass(over).children(ul).show().css,$(this).index() * 30 + $(this).index() + px);$(this).children(a).addClass(over); /新增加部分).mouseout(func

17、tion () $(this).removeClass(over).children(ul).hide();$(this).children(a).removeClass(over);/新增加部分);看看是不是有了我们想要的效果:第一怨分类口第一级分类1第二级分类1 口言一级分类2第二纸分类11第一氧分类3第二锻分类12第一级分槃4第二级分类13第一级分类E第二级分类相第一皴分奘6第二级分类15第一级分类7第一级分类目第一级分类9OK和我们想的一样，效果出来了。我们总共加了三行代码，CSS一行，JS两行，另外去掉了一个color属性。有没有一行也不加或只加一两句代码也实现同样的效果呢？答案是肯

18、定的。如果你对编写代码有洁癖，那么你一定会为把“增加三行代码”变成“增 加两个属性”而感到高兴，接下来就让你高兴一把。让我们回到分类文字没有反色显示的位置， 把刚刚增加的三行代码去掉，还原刚刚去掉的color属性。先讲一下思路：首先我们要解决的问题是文字没有反色显示，也分析了问题的原因。根据前面的分析，要做到尽可能少改动代码，甚至JS代码一点也不用改，我们只能在CSS代码上下功夫了。第一，要想办法去掉系统给 a自带的color属性，手动给a元素定义一次color属性。第二，这个 color属性值不能和a是直属关系，color的属性值和a必须是一种间接关系。于是我们可以这样做：把CSS弋码的a

19、text-decoration:none;部分增加一个 color属性，变成 a text-decoration: none;color:inherit;,让 a元素的 color 属性继承父级的color属性。由于我们已经对 mouseover的元素li增加了样式：.over background-color: #0094ff; color: #fff; , 这样当鼠标移到分类条目上时，它的字体颜色应该会显示成 li定义的#*即白色)。我们来看一下是不是这样，效果是：第一级分类口1常一级分类1第一级分类之第二焦分类111第一级分类3第一级分类4第一级分类5第一级分类E第一毁分类丁)第一级分类

20、3第一级分类9这显然不是我们想要的效果，当鼠标移到“第一级分类1”时，他的子分类的文字也全部变成白色了。这是因为因为第一级分类li元素的后代不仅包含第一级分类的a标签，还包含第二级分类的a标签。刚刚我们已经增加了a元素的color属性，根据上面的思路，我们还需要定义一下比第一级分类li元素更高优先级的color属性，这样第二级分类的文字颜色就不会承着第一级分类的文字颜色变化了。第一级分类li元素下面有ul元素和li元素,这里我们给第一级分类li元素下面有ul元素增加color属性，即把 CSS代码的#cate_navli ul display: none; position:absolute;

21、 left:150px;变成了 ：nav li ul display: none; position:absolute; left:150px;color:#000;再来看一下效果:OK没问题。这样，我们只增加了CSS的两个color属性，JS代码完全没有动，也达到了我们要的效果。其实我觉得上面代码还可以继续缩减，像我开篇所说，我对CSS也只是个了解的程度,时开发极少用到 CSS更不用说这方面的实际开发经验。相信在博客园有很多这方面的高手， 也有很多有这方面的经验的人，希望这些们不吝赐教，全当是把代码娱乐消遣化，这样才更能 激发我们对编程更深厚的兴趣，不是吗。YP ml为了让大家方便 copy

22、整个代码继续研究，下面贴上整个html文件的代码:E htmlxmlns= HYPERLINK /1999/xhtml /1999/xhtmlad t body, div, ul, a margin: 0px; padding: 0px; font-size: 12px; a text-decoration: none; color: inherit; ul list-style: none; width: 150px; background-color: #fff;px solid #808080; border-bottom: none; #cate_wrap position: abso

23、lute; top: 100px; left: 10px; #cate_nav li cursor: pointer; border-bottom: 1px solid #808080;g-left: 10px; height: 30px; line-height: 30px; #cate_nav li b margin-left: 55px; #cate_nav li ul display: none; position: absolute; left: 150px;#cate_nav li.over background-color: #0094ff; color: #fff; $(fun

24、ction () /动态创建用于网站导航的ul、li元素var $ul = $(#cate_wrap).append().children(ul);for (var i = 0; i 10; i+) var $sub_ul =$ul.append().children(li).eq(i).append(第一级分类+ i + ).append().children(ul);for (var j = 0; j 6; j+) $sub_ul.append().children(li).eq(j).append(第二级分类+ i + j + );/ 添力口 mousemove mouseout 显示效

25、果$(#cate_nav li).mousemove(function () $(this).addClass(over).children(ul).show().css(top, $(this).index() * 30 + $(this).index() + px);).mouseout(function () $(this).removeClass(over).children(ul).hide();););在Firefox 下，上面代码被 HolyKnight 发现有bug，为了解决在Firefox 下的兼容性问题，对JS进行了修改，我暂时只能这样改，不知道朋友们有没有更优的解决办法，

26、下面是我 修改后的完整代码：码YPE htmlxmlns= HYPERLINK /1999/xhtml /1999/xhtmlmeta http-equiv=Content-Type content=text/html; charset=utf-8” /body, div, ul, a margin: 0px; padding: 0px; font-size: 12px; a text-decoration: none; color: inherit; ul list-style: none; width: 150px; background-color: #fff;border: 1px solid #808080; border-bottom: none; #cate_wrap position: absolute; top: 100px; left: 10px; #cate_nav li cursor: pointer; border-bottom: 1px solid #808080;padding-left: 10px; height: 30px; line-height: 30px; #cate_nav li b margin-left: 55px; #cate_