来源：http://www.ido321.com/750.html
header部分代码
1: <div class="top span12"> 2: <ul> 3: <li class="topli"><a href="#" data-target="#login" role="button" data-toggle="modal">登陆</a></li> 4: <li class="topli"><a href="#" data-target="#register" role="button" data-toggle="modal">注册</a></li> 5: <li class="topli"><i class="icon-shopping-cart icon-white"></i> <a href="#">我的购物车(0)</a></li> 6: <li class="topli"><i class="icon-star-empty icon-white"></i> <a href="#">我的收藏</a></li> 7: <li class="topli"><i class="icon-question-sign icon-white"></i> <a href="#">帮助中心</a></li> 8: <p style="float:right;margin-right:10px;">100%正品保证</p> 9: </ul> 10: </div> 登陆部分：
1: <div id="login" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 2: <div class="modal-header"> 3: <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 4: <h3 id="myModalLabel">登陆</h3> 5: </div> 6: <div class="modal-body"> 7: <form class="form-horizontal"> 8: <div class="control-group"> 9: <label class="control-label" for="inputEmail">用户名：</label> 10: <div class="controls"> 11: <input type="text" id="inputEmail" placeholder="Email"> 12: </div> 13: </div> 14: <div class="control-group"> 15: <label class="control-label" for="inputPassword">密码：</label> 16: <div class="controls"> 17: <input type="password" id="inputPassword" placeholder="Password"> 18: </div> 19: </div> 20: <div class="control-group"> 21: <div class="controls"> 22: <label class="checkbox"> 23: <input type="checkbox"> Remember me 24: </label> 25: </div> 26: </div> 27: <div style="margin-left:60px;"> 28: <label class="control-label" > 29: <a href="#">忘记密码</a> 30: </label> 31: <label class="control-label"> 32: <a href="#" data-target="#register" role="button" data-toggle="modal" id="aregis">立即注册</a> 33: </label> 34: </div> 35: </form> 36: </div> 37: <div class="modal-footer"> 38: <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button> 39: <button class="btn btn-primary" id="qdl">确定</button> 40: </div> 41: </div> 效果：
导航部分：
1: <ul> 2: <li class="navli"><a href="#" id="ananshi">男士</a></li> 3: <li class="navli"><a href="#" id="anvshi">女士</a></li> 4: <li class="navli"><a href="#" class="no">儿童</a></li> 5: <li class="navli"><a href="#" class="no">设计师品牌</a></li> 6: <li class="navli"><a href="#" style="color:red" class="no">折扣品</a></li> 7: <li class="navli" style="float:right"> 8: <form action="?" method="?" class="input-append"> 9: <input type="text" value="搜索" placeholder="搜索" class="input-medium"> 10: <span class="add-on"><i class="icon-search"></i></span> 11: </form> 12: </li> 13: /ul> 子菜单
1: <div class="row-fluid"> 2: <div class="span9" id="nanshi"> 3: <div class="row-fluid"> 4: <div class="span3"> 5: <div class="box"> 6: <img src="./img/header_1.jpg"> 7: </div> 8: </div> 9: <div class="span3"> 10: <div class="boxp"> 11: <h5>类别索引</h5> 12: <p><a href="#">服装</a></p> 13: <p><a href="#">包袋</a></p> 14: <p><a href="#">鞋履</a></p> 15: <p><a href="#">配饰</a></p> 16: <p><a href="#">珠宝首饰</a></p> 17: <p><a href="#">时尚首饰</a></p> 18: </div> 19: </div> 20: <div class="span3"> 21: <div class="boxp"> 22: <h5>类别索引</h5> 23: <p><a href="#">服装</a></p> 24: <p><a href="#">包袋</a></p> 25: <p><a href="#">鞋履</a></p> 26: <p><a href="#">配饰</a></p> 27: <p><a href="#">珠宝首饰</a></p> 28: <p><a href="#">时尚首饰</a></p> 29: </div> 30: </div> 31: <div class="span3"> 32: <div class="boxp"> 33: <h5>类别索引</h5> 34: <p><a href="#">服装</a></p> 35: <p><a href="#">包袋</a></p> 36: <p><a href="#">鞋履</a></p> 37: <p><a href="#">配饰</a></p> 38: <p><a href="#">珠宝首饰</a></p> 39: <p><a href="#">时尚首饰</a></p> 40: </div> 41: </div> 42: </div> 43: </div> 44: </div> body部分效果
导航的js,用了一种比较笨的方法
1: $("#ananshi").hover( 2: function(){ 3: $(this).parent().css({border:"1px solid #DBD1D1",backgroundColor:"#DBD1D1"}); 4: /*$('#nanshi').show();*/ 5: $('#nanshi').show(); 6: $('#nvshi').hide(); 7: $('#anvshi').parent().css({border:'none',backgroundColor:'#FFFFFF'}); 8: }, 9: function(){ 10: $('#nanshi').hover( 11: function(){ 12: $("#ananshi").parent().css({border:"1px solid #DBD1D1",backgroundColor:"#DBD1D1"}); 13: }, 14: function(){ 15: $("#ananshi").parent().css({border:'none',backgroundColor:'#FFFFFF'}); 16: $(this).hide(); 17: } 18: ); 19: } 20: ); 完整的效果展示：http://szshuo.sinaapp.com/szspeak/ 完整的代码下载：http://download.csdn.net/detail/u011043843/7966783