一个导航的前端实现

前端代码要做到简洁易读、高效，还要考虑后端嵌套的方便性。

前段时间做了一个导航，把整个制作过程重现，希望对大家有帮助。

看到这样的导航，你会怎么设计代码结构和切图？

第一步

代码结构按照逻辑来分析初步构想可以这样：

<ul> <li class="first-current">1 填写店铺信息</li> <li class="middle">2 填写联系人信息</li> <li class="middle">3 确认创建信息</li> <li class="last">4 提交成功</li> </ul>

分三种表现，头、中间、尾，同时，用current标出当前停在第几步。可以用第二个class，就是中间用空格，当然如上中间加-，新用一个class也无妨。

第二步

切图，这是最关键的。

这个导航虽然不是很花哨，但是图形结构也是有一定复杂度。如果直接按1234每个步骤的图直接截下来，左右两头都有图形特殊性，就都需要做滑动门或相似的技术，增加代码的复杂度。
然而，我们这里如果把图切成透明gif图，并且左右覆盖，就会减小步骤之前的耦合性。
于是，自然而然，想到了这样的切图方式：

看上去三种步骤，和对应的current状态，应该可以实现了。

实际写CSS的时候，问题出来了，因为这样的切图，需要前面的步骤的图片去覆盖住后面的步骤，即使定义z-index来控制z轴优先级，也不能完全解决问题。具体来说，可以让步骤1覆盖住步骤2，但要让步骤2覆盖住步骤3，就不可行，因为我们期望兼容中间步骤可以无限多，应用了相同的class，也就表明会有相同的z-index，这样必然的结果是，后面的步骤覆盖前面的步骤。

所以脑子拐个弯，逆向切图。

这样，只要设置负的margin-left，让后面的覆盖住前面，就达到了预期的效果。

考虑到最后一个步骤是两头都有不同表现的，需要用到滑动门或者hook，这里我用了hook。于是HTML代码改造如下：

<ul> <li class="first-current">1 填写店铺信息</li> <li class="middle">2 填写联系人信息</li> <li class="middle">3 确认创建信息</li> <li class="last">4 提交成功<span class="hook"></span></li> </ul>

第三步

CSS，写起来就一气呵成了

div.form-nav {border-bottom:3px solid #E77302;margin-bottom:10px;background:#F2F2F2} div.form-nav ul li {height:29px;float:left;background-image:url(/images/eshop/form/step_arrow.gif);background-repeat:no-repeat;color:white;font-size:14px;font-weight:bold;line-height:29px} div.form-nav ul li.first {background-position:0 0;padding-right:30px;padding-left:8px} div.form-nav ul li.first-current {background-position:0 -150px;padding-right:30px;font-size:16px;padding-left:8px} div.form-nav ul li.middle {background-position:0 -50px;margin-left:-20px;padding-right:30px;padding-left:22px} div.form-nav ul li.middle-current {background-position:0 -200px;margin-left:-20px;padding-right:30px;padding-left:22px;font-size:16px;} div.form-nav ul li.last {background-position:0 -100px;margin-left:-20px;padding-left:22px;position:relative;} div.form-nav ul li.last span.hook {position:absolute;top:0;right:-20px;width:20px;height:29px;display:block;background:url(/images/eshop/form/step_arrow.gif) no-repeat right -100px;} div.form-nav ul li.last-current {background-position:0 -250px;margin-left:-20px;padding-left:22px;position:relative;font-size:16px;} div.form-nav ul li.last-current span.hook {position:absolute;top:0;right:-20px;width:20px;height:29px;display:block;background:url(/images/eshop/form/step_arrow.gif) no-repeat right -250px;}

这儿提供完整的demo