斑斓说左侧二级菜单
良多前端新手会写下拉或者其他的菜单,可是一写二级菜单就出错了。
知识点:html标签(div,ul,a),css款式属性(浮动,定位),构造思惟,js根本,逻辑思维。
源码:
*{margin:0px; padding:0px; list-style-type:none; }
Menu{width:285px;height:500px; border:1px solid #ff3366; margin:50px 0px 0px 100px; }
Menu h3{height:45px; background:#ff3366; color:#fff; text-align:center; line-height:45px;
font-size:14px; font-weight:100;}
Menu ul{width:285px; margin:0px auto; }
Menu ul li{height:40px; line-height:40px; font-size:12px;
border-bottom:1px dashed #ddd; background:url("images/ts.png") no-repeat 270px 15px; position:relative;}
Menu ul li a{color:#666; text-decoration:none; margin:0px 8px; font-family:"微软雅黑"; }
Menu ul li a:nth-of-type(1){font-size:14px;}
Menu ul li a.c{color:#ff3366;}
Menu ul li .t{width:285px; height:1px; background:#ff3366; position:absolute; left:0px; top:-1px; display:none;}
Menu ul li .b{width:285px; height:1px; background:#ff3366; position:absolute; left:0px; bottom:-1px;display:none;}
Menu ul li .r{width:1px;height:40px; background:#fff; position:absolute; right:-1px; top:0px;display:none;}
Menu ul li .nav{position:absolute; left:285px; /height:300px; width:200px;/
top:-1px; border:1px solid #ff3366;display:none;}
全数商品
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var timer=null;
$("#Menu ul li").mouseover(function(){
$(this).find("div").show();
});
$("#Menu ul li").mouseout(function(){
$("#Menu ul li").find("div").hide();
});
</script>
本文暂时没有评论,来添加一个吧(●'◡'●)