jquery는 아름다운 보조 드롭다운 메뉴를 구현합니다.
- WBOY원래의
- 2016-05-16 15:42:201297검색
이 기사의 예에서는 jquery를 사용하여 아름다운 보조 드롭다운 메뉴를 구현하는 코드를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.
여기에서는 검정색 스타일의 jquery 기반 웹사이트 드롭다운 메뉴를 소개합니다. 이 메뉴는 보조 메뉴를 풀다운하려면 메인 메뉴 뒤에 있는 작은 삼각형 기호를 클릭해야 하는 메뉴입니다. 마우스를 메인 메뉴 위로 이동시켰을 뿐입니다. 어느 쪽인지는 개인 취향에 따라 다릅니다.
먼저 달리기 효과를 살펴보겠습니다.
온라인 데모 주소는 다음과 같습니다.
http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-menu-codes/
구체적인 코드는 다음과 같습니다.
<!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=gb2312">
<title>jQuery二级菜单</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul.subnav").parent().append("<span></span>");
$("ul.topnav li span").click(function() {
$(this).parent().find("ul.subnav").slideDown('fast').show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow');
});
}).hover(function() {
$(this).addClass("subhover");
}, function(){
$(this).removeClass("subhover");
});
});
</script>
<style type="text/css">
body {
margin: 0; padding: 0;
font: 10px normal Arial, Helvetica, sans-serif;
background: #ddd url(images/body_bg.gif) repeat-x;
}
.container {
width: 960px;
margin: 0 auto;
position: relative;
}
#header {
padding-top: 120px;
}
#header .disclaimer {
color: #999;
padding: 100px 0 7px 0;
text-align: right;
display: block;
position: absolute;
top: 0; right: 0;
}
#header .disclaimer a { color: #ccc;}
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: left;
width: 920px;
background: #222;
font-size: 1.2em;
background: url(images/topnav_bg.gif) repeat-x;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative;
}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(images/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span {
width: 17px;
height: 35px;
float: left;
background: url(images/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}
ul.topnav li ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525;
border-bottom: 1px solid #444;
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(images/dropdown_linkbg.gif) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover {
background: #222 url(images/dropdown_linkbg.gif) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
</style>
</head>
<body>
<div class="container">
<div id="header">
<ul class="topnav">
<li><a href="#">网站首页</a></li>
<li>
<a href="#">网页菜单</a>
<ul class="subnav">
<li><a href="#">ASP导航</a></li>
<li><a href="#">JSP导航</a></li>
<li><a href="#">ASP.net导航</a></li>
<li><a href="#">PHP导航</a></li>
</ul>
</li>
<li>
<a href="#">网页特效</a>
<ul class="subnav">
<li><a href="#">层和菜单</a></li>
<li><a href="#">鼠标特效</a></li>
<li><a href="#">表单特效</a></li>
<li><a href="#">表格特效</a></li>
<li><a href="#">CSS特效</a></li>
<li><a href="#">jQuery特效</a></li>
</ul>
</li>
<li><a href="#">搜索引擎</a></li>
<li><a href="#">博客营销</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</div>
</body>
</html>
이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.