步骤导航很给力！

mseed · 发表于 2012-4-5 14:53:19

转自：http://www.moondyzone.com/css/562.html

基于斜角导航的方式，其实当真正理解到方法之后，就可以延伸出很多效果出来。比如说下面的这个步骤导航（名字是我随便起的），是我在某个实际项目中用到的一个效果，给大家参考下，其实还能再优化一些的。

演示效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.help_step_box {background:#f1f7e4; height:55px; overflow:hidden; border-top:1px solid #FFF;}
.help_step_item {float:left; height:55px; line-height:55px; padding:0 25px 0 45px; cursor:pointer; position:relative; font-size:14px; font-weight:bold;}
.help_step_num {width:19px; height:19px; line-height:19px; position:absolute; text-align:center; top:18px; left:20px; font-size:16px; font-weight:bold; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/num.png); color:#156600;}
.help_step_set {background:#27a806; color:#FFF;}
.help_step_set .help_step_left {width:8px; height:55px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/bak2.jpg) left top no-repeat; position:absolute; left:0; top:0;}
.help_step_set .help_step_right {width:8px; height:55px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/bak2.jpg) left bottom no-repeat; position:absolute; right:-8px; top:0;}
</style>
<body>
<div class="help_wrap">
<div class="help_step_box fa">
<div onclick="javascript:go_fa_step(1)" id="fa_1" class="help_step_item">
<div class="help_step_num">1</div>
拆开方便面
<div class="help_step_right"></div>
</div>
<div onclick="javascript:go_fa_step(2)" id="fa_2" class="help_step_item help_step_set">
<div class="help_step_left"></div>
<div class="help_step_num">2</div>
取出调料包
<div class="help_step_right"></div>
</div>
<div onclick="javascript:go_fa_step(3)" id="fa_3" class="help_step_item" >
<div class="help_step_left"></div>
<div class="help_step_num">3</div>
加热水泡3~5分钟
<div class="help_step_right"></div>
</div>
<div onclick="javascript:go_fa_step(4)" id="fa_4" class="help_step_item" >
<div class="help_step_left"></div>
<div class="help_step_num">4</div>
加入调料并搅拌
<div class="help_step_right"></div>
</div>
<div onclick="javascript:go_fa_step(5)" id="fa_5" class="help_step_item">
<div class="help_step_left"></div>
<div class="help_step_num">5</div>
可以吃了
</div>
</div>
</div>
<script language="javascript">
function go_fa_step(id){
for (i=1; i<6; i++){
document.getElementById("fa_"+i).className='help_step_item';
}
document.getElementById("fa_"+id).className+=" help_step_set"
}
</script>
</body>
</html>

复制代码

风一样潇洒 · 发表于 2012-4-7 22:07:38

！很好玩！

		自动登录	找回密码
密码			立即注册

[教程] 步骤导航很给力！

本帖子中包含更多资源

评分

站长推荐 /1

[教程] 步骤导航 很给力！

本帖子中包含更多资源

评分

站长推荐 /1

[教程] 步骤导航很给力！