Shopex4.85商店顶部导航终极详解（二）

文章 by kulolo    4 评论

顶部导航除了可以放置站点栏目挂件之外，还可以放上分类挂件，做出2级导航，甚至3级导航等比较绚丽的效果。

如下图：（点击看大图）

这是个比较绚丽的导航，鼠标放在一级分类上会显示二级分类。

如何做一个类似上图的顶部导航呢。上图效果已经完全做出，我说下需要考虑的几个步骤。

第一步，这是一个商品分类和站点栏目2个挂件共同实现的顶部导航，左边的是商店分类挂件，右边的是商店导航挂件。

也就是童装后的都是商店导航挂件。

首先需要HTML架构下，由于4.85的挂件机制有其诟病，就是添加一个挂件后会自动生成一个<div>标记，这个<div>会完全影响你的布局架构。至少站在前端开发来说，是个不小的毛病。怎么办呢，只能用2个<div>浮动生成了。如下代码

<div id=”menubar”>
<div><{widgets id=”menu_sort”}></div>
<div><{widgets id=”menu_site”}></div>
</div>

在CSS中定义2个层浮动。

然后在第一个挂件位内放入商店分类挂件。选择2级分类。

现在的样式其实非常难看，且HTML架构异常混乱。打开该挂件的HTML文件,路径为./plugins/widgets/goods_cat/default.html（建议重新做一个挂件模板，而不是直接修改其文件。）

里面架构了非常多的HTML代码，分别对应后台设置的1级分类，2级分类和3级分类。由于我们不需要3级分类，可以把3级分类中的代码全部删除，只留下1级分类，2级分类。当鼠标不移动到1级分类的时候，2级分类不会显示。当鼠标移动到一级分类会显示2级分类，鼠标移走不会消失，只有到移动到其他的一级分类上才会将该一级分类下的二级分类显示出来。

首先就要重新架构HTML，这个时候对于HTML架构有比较高的要求。我的HTML是外部架构是<ul><li></li></ul>布局，内部是<dl><dt></dt><dd><dd></dl>的架构。

<dt></dt>中放的是一级分类，<dd></dd>中方的是二级分类，并且定义其css为display:none;

其HTML代码下载：default2（文件需另存为）

然后需要写下javascript 来判断鼠标的动作。shopex使用的是mootools框架，写法比原始的写法更加方便。js我就不卖弄了，只会一点皮毛，呵呵。

然后贴下非常重要的css文件内容。

menubar{height:86px;background:url(index_13.gif) no-repeat;position:relative;}
menubar .menu_sort{float:left;}
menubar .menu_site{float:left;}
menubar .menu_sort ul{padding-left:50px;}
menubar ul li{float:left;height:50px;line-height:50px;font-size:14px;background:url(index2_03.gif) no-repeat right 12px;}
menubar ul li a{color:#fff;display:block;padding:0 20px;}
menubar ul li.curr dd{display:block;position:absolute;top:40px;left:140px;font-size:12px;}
menubar ul li.curr{background:url(menu_1.jpg) no-repeat left 7px;}
menubar ul li.curr dt a{background:url(menu2.jpg) no-repeat right 7px;}
menubar ul li.curr dd a{display:inline;padding:0 5px;}
menubar ul li dd{display:none;}
menubar .menu_site ul li.curr a{background:url(menu2.jpg) no-repeat right 7px;}

鼠标进入<li>内会给这个<li>标记添加一个.curr的class，直接会影响其效果和其地下的<dd>标记的显示。

我只写下顶部分类导航的思路，大家可以试验下。纯css也可能写出这样的效果，但是写起来就比较复杂，因为兼容IE6是个大麻烦。