学了点jQuery，心里难免有点飘，看着网上一些教程，用jquery写了一些菜单优化。
一个正常的菜单，但它是用jQuery实现的。
<html>
<head>
<title></title>
<style>
ul{
list-style: none;
display: table;
margin: 0 auto;
padding: 0;
overflow:hidden;
height: auto;
}
ul li{
float: left;
}
ul li a{
color: red;
text-decoration: none;
text-align: center;
background: #dedede;
display: block;
padding: 10px;
width: 120px;
font-weight: bold;
}
ul li ul{
display: none;
}
ul li ul li{
float: none;
list-style: none;
margin-top: 2px;
}
</style>
<script type="text/javascript" src="../jQuery/jquery.js"></script>
<script>
$(document).ready(function(){
$(".nav").mouseover(function(){
$(this).children("ul").show();
});
$(".nav").mouseout(function(){
$(this).children("ul").hide();
});
});
</script>
</head>
<body>
<ul>
<li class="nav"><a href="#home">HOME</a>
<ul>
<li><a href="#home1">HOME1</a></li>
<li><a href="#home2">HOME2</a></li>
</ul>
</li>
<li><a href="#new">NEW</a></li>
<li><a href="#contect">CONTECT</a></li>
<li><a href="#about">ABOUT</a></li>
</ul>
</body>
</html>下面的就有点炫酷了，用css或js或jq写出来的一些特效。
如你所见，这个有三角符号，还有圆角，很明显用了html5和css3的新特性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.nav{
width: 960px;
margin:60px auto;
list-style: none;
border: 1px solid #222;
background-color: #111;
background-image: linear-gradient(#444,#111);
border-radius: 6px;
box-shadow: 0 1px 1px #777;
padding: 0;
}
.nav:before,.nav:after{ /* 清除浮动*/
content: " ";
display: table;
}
.nav:after{
clear: both;
}
.nav li{
float: left;
border-right: 1px solid #222;
box-shadow: 1px 0 0 #444;
position: relative;
}
.nav li a{
float: left;
padding: 10px;
color: #999;
font: bold 12px;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
.nav li a:hover{
color: #fafafa;
}
.nav li ul{
visibility: hidden;
position: absolute;
list-style: none;
top:40px;
z-index: 1px;
padding: 0;
background-color: #444;
background-image: linear-gradient(#444,#111);
box-shadow: 0 -1 0 rgba(255,255,255,3);
border-radius: 3px;
opacity: 0;
margin: 20px 0 0 0;
transition: all .2x ease-in-out;
}
.nav li:hover > ul{
opacity: 1;
visibility: visible;
margin: 0;
}
.nav ul li{
float: none;
display: block;
border:0;
box-shadow: 0 1px #111;
}
.nav ul a{
padding: 10px;
width: 120px;
text-align: center;
display: block;
float: none;
}
.nav ul a:hover{
background:#0186ba;
background-image: linear-gradient(#04acec,#0186ba);
}
.nav ul li:first-child>a{
border-radius: 3px 3px 0 0;
}
.nav ul li:last-child>a{
border-radius: 0 0 3px 3px;
}
.nav ul li:first-child >a:before{ /*在第一个li的a标签前面添加内容*/
content: " ";
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
.nav ul li:first-child >a:hover:before{
border-bottom-color: #04acec;
}
.nav ul ul{
top: 0;
left: 140px;
margin: 0 0 0 20px;
box-shadow: -1px 0 rgba(255,255,255,.3);
}
.nav ul ul li:first-child a:before{
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
.nav ul ul li:first-child a:hover:before{
border-bottom-color: transparent;
border-right-color: #0299d3;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">HOME</a>
<ul>
<li><a href="#">HOME1</a>
<ul>
<li><a href="#">home3</a></li>
</ul>
</li>
<li><a href="#">HOME2</a></li>
</ul>
</li>
<li><a href="#">CONTECT</a></li>
<li><a href="#">NEW</a></li>
<li><a href="#">ABOUT</a></li>
</ul>
</body>
</html>下面这玩意，表面看起来没啥，其实他是有动画效果的，具体的可以拿走源代码去试试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
overflow:hidden;
}
a{
text-decoration: none;
padding: 10px;
text-align: center;
background-color: #999;
display: block;
width: 120px;
color: White;
font-weight: bold;
}
a:hover{
background-color: red;
}
ul li{
float: left;
}
ul li ul{
position: absolute;
padding: 0;
display: none;
}
ul li ul li{
float: none;
}
</style>
<script type="text/javascript" src="../jQuery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menu li:eq(0)").mouseover(function(event) {
/* Act on the event */
$("#menu li ul").slideDown('1000');
});
$("#menu li:eq(0)").mouseleave(function(event) {
/* Act on the event */
$("#menu li ul").slideUp("1000");
});
});
</script>
</head>
<body>
<ul id="menu">
<li><a href="#">home</a>
<ul>
<li><a href="#">home1</a></li>
<li><a href="#">home2</a></li>
</ul>
</li>
<li><a href="#">new</a></li>
<li><a href="#">about</a></li>
<li><a href="#">content</a></li>
</ul>
</body>
</html>下面这个就更炫酷了，但也没办法展示出来，贴出源代码给你们看，但注意的是，里面我有加入的箭头图片和jq文件，你们要改成你们自己的路径或者图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.navlist{
position: absolute;
top: 10px;
}
a{
text-decoration: none;
color: white;
}
.navlist a{
margin-left: 60px;
color: #666;
width: 120px;
}
.expand{
height: 0px;
background-color: #333d4d;
overflow: hidden;
position: relative;
top: 30px;
width: 100%;
}
.expdiv{
height: 130px;
width: 500%;
}
.expdiv_list{
width: 20%;
text-align: center;
float: left;
line-height: 110px;
color: white;
}
.expand .close_btn{
width: 120px;
height: 20px;
/*background-color: red;*/
background: url("向上箭头.png") no-repeat 47px 0;
position: absolute;
left: 50%;
bottom: -2px;
margin-left: -60px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="../jQuery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#menulist").on('click', 'a', function(event) {
event.preventDefault();
/* Act on the event */
if($(this).hasClass("btn-active")){
$("#expandZone #closebtn").click();
return false;
}
var curIndex = $(this).index(), mlValue = "-" + curIndex*100 + "%";
if($("#expandZone").hasClass('active')){
$("#expandZone .expdiv").animate({marginLeft:mlValue});
}
else{
$("#expandZone .expdiv").css({marginLeft:mlValue});
$("#expandZone").animate({height:"130px"}).addClass('active');
}
$(this).addClass('btn-active').siblings().removeClass('btn-active')
return false;
});
$("#expandZone #closebtn").on("click",function(){
$("#expandZone").animate({height:"0px"}, function(){
$(this).removeClass("active");
$("#menulist .btn-active").removeClass('btn-active');
});
return false;
});
});
</script>
</head>
<body>
<div id="menulist" class="navlist">
<a href="#">首页</a>
<a href="#">课程大厅</a>
<a href="#">学习中心</a>
<a href="#">个人中心</a>
<a href="#">关于我们</a>
</div>
<div id="expandZone" class="expand">
<div class="expdiv">
<div class="expdiv_list">
<a href="#">慕课网主页</a>
</div>
<div class="expdiv_list">
<a href="#">前端课程</a>
<a href="#">手机开发</a>
<a href="#">后台编程</a>
</div>
<div class="expdiv_list">
<a href="#">JavaScript</a>
<a href="#">CSS</a>
<a href="#">jQuery</a>
</div>
<div class="expdiv_list">
个人信息：
</div>
<div class="expdiv_list">
地址：
</div>
</div>
<div id="closebtn" class="close_btn"></div>
</div>
</body>
</html>
6511
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
