网页菜单制作
这个的菜单,花了几天下班的时间.把它作为CSS入门作吧.
本博客所写的菜单，并不是一次成形的，制作过程中改了好几次。初衷是要实现一种统一、方便生成菜单的方式，成果基本达到初衷的要求。
代码依赖jquery,使用jqery选择元素和绑定事件实在方便.
下面描述代码：
.h-menu{} 横向菜单
.v-menu{} 纵向菜单,尚未实现
.up-menu{} 上弹菜单,尚未实现,较困难
.down-menu{} 下弹菜单
.left-menu{} 左弹菜单
.right-menu{} 右弹菜单
以上class都用作修饰UL,上一张效果图
代码:
<!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 type="text/css">
#container{
width:900px;
border-width:1px;
border-color:red;
border-style:dotted;
margin:0 auto;
min-height:600px;
}
#header{
height:30px;
border-bottom-style:solid;
border-bottom-color:black;
border-bottom-width:1px;
margin-top:0;
}
#main{
height:500px;
}
#footer{
height:30px;
border-top-color:black;
border-top-style:solid;
border-top-width:1px;
}
.h-menu{ /* 指示ul为横向菜单*/
margin-top:0;
list-style:none;
}
.h-menu li{
float:left;
margin-left:50px;
padding-left:5px;
padding-right:5px;
padding-top:3px;
padding-bottom:3px;
width:50px;
position:relative;
}
.h-menu li:hover{
background-color:#bed742;
}
.h-menu li a{
text-decoration:none;
}
.v-menu{
}
.up-menu{
}
.down-menu{
list-style:none;
margin-top:0;
position:absolute;
padding-left:0;
left:0;
display:none;
}
.down-menu li{
width:100px;
position:relative;
margin-left:0;
}
.right-menu{
list-style:none;
margin-top:0;
padding-left:0;
top:0;
left:110px;
position:absolute;
display:none;
}
.right-menu li{
width:100px;
margin-left:0;
position:relative;
}
.left-menu{
list-style:none;
margin-top:0;
padding-left:0;
top:0;
left:-110px;
position:absolute;
display:none;
width:110px;
}
.left-menu li{
width:100px;
margin-left:0;
position:relative;
}
ul{
background-color:#afb4db;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" >
$(function(){
$(".h-menu > li,.down-menu > li,.left-menu > li,.right-menu > li").each(function(){ // .h-menu的子一级li
补充：web前端 , HTML/CSS ,
