一个导航的前端实现
作者:大米 来源:口碑网ued 发布时间:2008-11-13 12:41:00
标签:导航,前端,代码,设计
前端代码要做到简洁易读、高效,还要考虑后端嵌套的方便性。
前段时间做了一个导航,把整个制作过程重现,希望对大家有帮助。
第一步
代码结构按照逻辑来分析初步构想可以这样:
<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
0
投稿
猜你喜欢
- oracle命令行删除用户: connect / as sysdba; shutdown abort; startup; drop user
- 日期和时间类型MySQL有多个表示各种日期和时间值的数据类型, 比如YEAR和DATE. MySQL存储时间的最精确粒度是秒。 然而, 能做
- 在登陆界面中,通常,最重要的部分为登陆的Form表。一个非常棒的提升体验的做法是,在载入页面时自动聚焦到第一个提供用户输入的表单框,让用户不
- 如果让一个ASP页面以https开始,则在该ASP页面最顶部添加如下代码: <%Response.Buffer =
- →问题提出:我用dw做了一个下拉菜单,但是碰到form的列表项就跑到下面去了,请帮忙解决,先谢谢各位了!请看问题图示如下:→解决问题:由于层
- 两个文章,放在一块了。第二个比较强。====================================================
- 代码如下:Function getTreeRootId(pNodeId) getSQL = "select note_id,par
- CREATE OR REPLACE PROCEDURE PROCSENDEMAIL(P_TXT &
- 在获得SA密码后,往往因为服务器管理者或”前人”将net.exe和net1.exe被限制使用,无法添
- 一、密码式给数据库起一个随机复杂的名称,避免被猜到被下载,这种方式在以前很流行,因为大家都对自己的代码很有自信。但随着错误提示对数据库地址的
- [参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ][操作系统:Windows]
- 组合集总计: group by with rollup/cube grouping sets 子查询按执行方式分:标准子查询、关联子查询 标
- 由于javascript是一种无类型语言,所以一个数组的元素可以具有任意的数据类型,同一个数组的不同元素可以具有不同的类型,数组的元素设置可
- Web标准的web UI——来源、谬误与个人理解序我从2004年末开始接触web标准,2005年5月正式采取完全的web标准方式的网页制作,
- 一、如何理解本条内容:一个“简单”和“复杂”的例子在我和开发人员沟通一个项目需求的时候,他们频频慨叹Mockup的设计所考虑情况之细致,很多
- 在XHTML中定义ID、CLASS都用得上,主要是方面CSS定义样式时能一眼看穿。所以,CSS命名仅作参考。(1)页面结构类容器: cont
- 相信用过Gmail的人都知道Gmail有一个草稿自动保存的功能,每过一段时间,Gmail都会自动保存邮件草稿,这样在一些突 * 况下就能快速地
- 在安装了IIS以后,缺省的服务器端脚本语言被设置成VBScript。许多Web 开发团队在他们的开发环境中保持了这些缺省设置,这是不幸的,因
- 上文:栅格:从混乱到秩序Jacci Howard Bear 的英文原文:http://desktoppub.about.com/od/gri
- 今天在 ajaxian 上看到一篇文章,名为 Five Ajax Anti-pattern ,觉得讲得比较有道理,现粗略翻译一下,加一些自己