집 > 기사 > 웹 프론트엔드 > jquery_jquery로 구현된 페이드인 및 페이드아웃 드롭다운 메뉴 효과

jquery_jquery로 구현된 페이드인 및 페이드아웃 드롭다운 메뉴 효과

WBOY원래의: 2016-05-16 15:42:581255검색

이 기사의 예에서는 jquery로 구현된 페이드인 및 페이드아웃 드롭다운 메뉴 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

페이드 인 및 페이드 아웃 효과가 있는 jQuery 드롭다운 메뉴입니다. 드롭다운 탐색 메뉴의 템플릿으로 사용할 수 있습니다. 보시고, 2차 하위 메뉴를 포함한 메뉴 항목 위로 마우스를 가져가시면, 2차 메뉴 그라데이션이 표시되는데, 호환성도 매우 좋습니다.

런닝 효과 스크린샷은 다음과 같습니다.

온라인 데모 주소는 다음과 같습니다.

http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-style-codes/

구체적인 코드는 다음과 같습니다.

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery下拉菜单效果</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{margin:0; padding:0}
table{border-collapse:collapse; border-spacing:0}
fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal}
ol, ul{list-style:none}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
q:before, q:after{content:''}
abbr, acronym{border:0}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
a { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }
a { color: black }
#nav li { float: left; position: relative; }
#nav li a { background: #d6cfbd; border: 3px solid #4f4026; color: #333; display: block; margin: 0 5px 0 0; padding: 5px 8px; }
#nav li a:hover { background: #f7f7f7; text-decoration: none; }
#nav { display: block; height: 35px; padding: 10px 0; width: 500px; z-index: 100; position: absolute;}
#nav > li > a { border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;}
#nav li ul { background: #e1ddd3; border: 3px solid #4f4026; color: #333; display: none; margin: -3px 0 0 0; width: 200px; position: absolute; }
#nav li ul li { width: 100% }
#nav li ul li a { background: none; border: none; line-height: 30px; margin: 0; padding: 0 0 0 5px; }
#nav li ul li a:hover { background: #f7f7f7;}
#nav li.current > a { background: #f7f7f7; }
#nav li:hover > ul.child { display: block; }
</style>
<!--<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&#63;ver=1.4.2'></script>-->
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){ 
 $("#nav ul.child").removeClass("child");
 $("#nav li").has("ul").hover(function(){
  $(this).addClass("current").children("ul").fadeIn();
 }, function() {
  $(this).removeClass("current").children("ul").hide();
 });
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="content">
<h2>jQuery sub-navigation with CSS fall-back</h2>
<ul id="nav">
<li><a href="#">网站主页</a></li>
<li><a href="#">开源源码</a>
<ul class="child">
 <li><a href="#">PHP源码</a></li>
 <li><a href="#">ASP源码</a></li>
 <li><a href="#">JSP源码</a></li>
 <li><a href="#">Ajax源码</a></li>
</ul>
</li>
<li><a href="#">服务</a>
<ul class="child">
 <li><a href="#">广告业务</a></li>
 <li><a href="#">Installations</a></li>
 <li><a href="#">Setups</a></li>
</ul>
</li>
<li><a href="#">关于我们</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>

이 기사가 모든 사람의 jquery 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：jquery 이미지 스크롤 확대 코드 공유 (1)_jquery다음 기사：jquery 이미지 스크롤 확대 코드 공유 (1)_jquery

jquery_jquery로 구현된 페이드인 및 페이드아웃 드롭다운 메뉴 효과

관련 기사