简介

框架中的导航，事实上由3级导航构成：

1. 顶部的一级导航，用于大的模块分类,右图所示：
2. 左边菜单中可以展开、折叠的是第二级，用于菜单的分类
3. 左边最下面的菜单项，不能展开、折叠，用于打开页面

简单起见，我们用一级导航，二级菜单（包括二级、三级菜单）来说明

图示

代码

dom中有一个钩子J_Nav来绑定顶部导航的事件

<ul id="J_Nav"  class="nav-list ks-clear">
<li class="nav-item dl-selected"><div class="nav-item-inner nav-storage">首页</div></li>
<li class="nav-item"><div class="nav-item-inner nav-inventory">搜索页</div></li>
</ul>            
        

有以下几点说明：

1. 导航项：.nav-item可以任意添加删除
2. 导航内容中 .nav-起始的样式决定导航项的图标,如：nav-home等
3. .dl-selected标示选中的项
4. .dl-hover标示鼠标悬浮的项
5. 导航文本可以随意修改
6. 导航项太多时，显示不出来的导航项作为下拉列表展示在最后一个显示导航项的位置

导航图标

导航图标由CSS样式实现，图标的大小和位置需要几个注意的地方：

1. 透明背景
2. 图标大小30 * 30
3. 图标间距，由导航项的宽度决定，避免出现覆盖。导航项宽145px,图标间距150px
4. 如果希望兼容ie6，不要使用半透明，否则可以提供2张图片或者使用滤镜

图片

自定义图标

可以自定义导航项的图标，通过修改一下内容：

1. 添加背景图片
2. 标示导航项图标的位置
3. 选中、hover图标时图标的变化

目前的应用中选中时只是背景变化，不需要指定样式，如果选中、hover时的图标都要发生改变时，则需要一一指定样式

示例

.nav-home,.nav-step{
  background:url('../img/nav_icon.png') no-repeat 0 0  transparent;
}

.nav-home{
  background-position:-300px -149px;
}
/**悬浮时向上一个像素，可以指定其他图标**/
.dl-hover .nav-home{
  background-position:-300px -150px;
}