jQueryはカスケードメニュー効果を実現します。
3951 ワード
初めてHTM+DIV+CSSlを学んだ学生たちもきっと淘宝网のトップのメニューアニメーションを作りたいでしょう。今日はカスケードメニューの表示をご紹介します。簡単な効果を実現しただけですが、全体的には原理は同じですよ。まず効果図を見せてください。この効果を実現するには、もちろんjQueryを使用します。どうやって作るかを説明します。まず、htmlとcssのコード
<!DOCTYPE html>
<html>
<head>
<title>menu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../css/menu.css">
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../js/menu.js"></script>
</head>
<body>
<ul>
<li class="menu">
<div class="title">
<span> </span>
</div>
<ul class="content">
<li class="optn"><a href="#"> </a>
<ul class="tip">
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
</ul>
</li>
<li class="optn"><a href="#"> </a>
<ul class="tip">
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
</ul>
</li>
<li class="optn"><a href="#"> </a>
<ul class="tip">
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
</ul>
</li>
<li class="optn"><a href="#"> </a>
<ul class="tip">
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
<li><a href="#"> 1</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
@CHARSET "UTF-8";
*{
margin: 0px;
padding: 0px;
}
ul,li{
list-style-type: none;
}
.menu{
width: 190px;
border: 1px red solid;
background-color: #fffdd2;
}
.optn{
width: 190px;
line-height: 28px;
border-top: 1px red dashed;
}
.content{
padding-top:10px;
clear: left;
}
a{
text-decoration: none;
color: #666;
padding: 10px;
}
.optnFocus{
background-color: #fff;
font-weight: bold;
}
div{
padding: 10px;
}
.tip{
width: 190px;
border: 2px red solid;
position: absolute;
background-color: #fff;
display: none;
}
.tip li{
line-height: 23px;
}