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

文章 by kulolo    3 评论

我们先来看下简单版本的顶部导航效果,点击看大图

鼠标移动上去有高亮效果，但是有的朋友说能不能做，当前页面高亮效果，我只能说部分可以，由于shopex系统只支持伪静态，通过javascript很难定位当前页面的子页面。下面会详细讨论下，我们先看下这个效果。

首先要在photoshop中切出黑色导航背景，高亮图的背景，这部分就不说了。

顶部导航一般放在header.html中，所以在header.html放上一个<div>标记，然后在这个<div>添加一个挂件位，如：

<div id=”menu”>

<{widgets id=”menu”}>

</div>

然后去商店后台添加挂件。添加版块 > 导航相关 > 商店导航菜单

版块边框选择无边框。导航数量决定了顶部导航的版块数量，如写上6，代表超过6个版块将显示下面的文字。一般显示文字我填成空。超过的就隐藏了。但是这里有个诡异的问题，就是即使是隐藏了也会在页面写有一个<li>的代码段。最好的解决方法是在后台的页面管理 > 站点栏目 只显示必要的栏目。

我们可以保存后看下效果，这时的效果文字是竖排的，如下图：

现在我们用firebug插件看下HTML代码，然后用css来修饰导航，让他变成我们想要的效果。

对于初学者来说，尽量不要修改挂件的HTML代码。当然修改HTML代码带来的好处有很多。比如精简代码。

css代码如下

*{margin:0;padding:0;}
#menu{background:url(nav.gif) no-repeat;padding:15px 30px;height:44px;}
#menu ul li{float:left;}#menu ul li a{color:#fff;padding:0 25px;height:44px;
line-height:44px;display:block;float:left;}/*float:left;是兼容IE6*/
#menu ul li a:hover{background:url(a_bg.gif) repeat-x;color:#333;}

那么一个简单的商店顶部导航就做好了，它的管理是在 页面管理 > 站点栏目 中，当然简单的商品分类也能这样添加。

下次讲的是商品分类多层的商店导航。