闲话网站左侧导航的实现
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
闲话网站左侧导航的实现
好久没玩CSS布局了，对于大多数在已有Web框架上开发项目的童鞋，极少情况会用到CSS来布局和美化页面。比如我现用所在项目用的是公司的一个现有Web框架+ExtJs库，对CSS 仅仅是一些像给某个元素换背景图之类的简单的应用。今天在博客园闲逛，无聊看了一下博客园首页左侧的网站导航的代码，然后我觉得应该有更好的实现方式（至少我认为）。博客园之所以现在的方式实现左侧导航，估计是为了更好的与后台业务结合吧。
当我们要实现一个功能时，往往有很多解决方式，有些好的方式也往往很难分出绝对的优劣。对于一个功能的实现，如果你试图去寻找一种最优的解决方案，那可能是一种无穷无尽的工作，而现实工作中我们也不可能花太多的时间去寻找更多更佳的解决方案。这种“程序员精神”的“寻找”工作只能作为我们平时闲的无聊时的一种消遣。如果此时你正好也很闲，不访和我一起探讨探讨网站左侧导航的实现。虽然实现起来很简单，但你的方式是不是一定是最佳的呢？
废话不多说，让我们先来看看博客园的实现吧。为了把重点放在CSS上，我对博客园的代码进行了一些改变，但大体逻辑是一样的（感兴趣的话可以查看博客园的前台代码）。
HTML部分（后台生成）：
d="cate_wrap">
网站分类
- .NET技术(9)
- 编程语言(7)
- 软件设计(0)
...
- .NET新手区(0)
- (2)
- C#(4)
- WinForm(1)
- Silverlight(0)
- WCF(0)
- CLR(0)
- WPF(6)
- Java(3)
- C++(2)
- PHP(2)
- Delphi(0)
- 架构设计(0)
- 面向对象(3)
- 设计模式(0)
CSS部分：
全局设置*/
body,div, ul, li { margin:0; 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 { height:20px;padding-left:8px;background-color:#009900;color:#FCFCFC;cursor:de tem {border:1px solid #ababab; background-color:#FFF; }
tem li { cursor:pointer; height: 30px; line-height: 30px; border-bottom: 1px solid #abab -left: 8px;background: url(arrow.png); }
tem li.over{ color:#FFF;background-color: #FF9320;}
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: #FF9320;}
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");