집 > 기사 > 웹 프론트엔드 > jQuery CSS_jquery로 구현된 웹페이지의 2단계 슬라이드다운 메뉴 효과

jQuery CSS_jquery로 구현된 웹페이지의 2단계 슬라이드다운 메뉴 효과

WBOY원래의: 2016-05-16 15:43:011128검색

이 기사의 예에서는 jQuery CSS로 구현된 웹페이지의 보조 슬라이드다운 메뉴 효과를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

웹페이지용 간단한 jQuery CSS 보조 슬라이드다운 메뉴입니다. 필요에 따라 미화하여 사용할 수 있습니다. 기본 애니메이션 효과, 메뉴 슬라이드다운 효과, 그라데이션 효과가 만들어졌습니다. .. IE에서도 사용 가능합니다. Firefox에서는 메뉴가 깜박이는 현상을 발견했습니다. 시간이 나면 계속 수정하겠습니다.

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

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

http://demo.jb51.net/js/2015/jquery-css-web-2level-menu-style-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>
<title>CSS jQuery HTML二级下滑菜单</title>
<style type="text/css">
body,ul,li,a{margin: 0;padding: 0;font:16px "微软雅黑";}
ul,li{list-style-type: none}
.menu{width: 270px;height: 30px;line-height: 30px;background: #0f67a1}
.menu li{width: 120px;float: left;display: inline;position: relative;z-index: 10;text-align: center;}
.menu li: hover{background: #426d9c;}
.menu .menuUl{width: 120px;height: auto;display: none;background: #426d9c;position: absolute;z-index: 20;left: 25px;top: 30px;padding:3px;}
.menuUl li{width: 100%;float: left;text-align: left;}
a{color: #eee;text-decoration: none}
a: hover{color: #000;text-decoration: none}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">  
$(document).ready(function() {
 $(".menu li").hover(function() {
 $(this).find(".menuUl").show('50');
 },
 function() {
 $(this).find(".menuUl").hide('50');
 });
})   
</script>
</head>
<body>
<ul class="menu">
<li><a href="">源码类</a>
 <ul class="menuUl">
  <li><a href="#" >论坛源码</a></li>
  <li><a href="#" >博客源码</a></li>
  <li><a href="#" >Ajax源码</a></li>
 </ul>
</li>
<li><a href="">特效类</a>
 <ul class="menuUl">
  <li><a href="#" >导航菜单</a></li>
  <li><a href="#" >表单效果</a></li>
  <li><a href="#" >HTML5特效</a></li>
  <li><a href="#" >jQuery特效</a></li>
 </ul>
</li>
</ul>
</body>
</html>

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

성명：

이전 기사：jquery 주소 표시줄 링크와 link_jquery 태그를 일치시키기 위한 특수 효과 코드 요약다음 기사：jquery 주소 표시줄 링크와 link_jquery 태그를 일치시키기 위한 특수 효과 코드 요약

jQuery CSS_jquery로 구현된 웹페이지의 2단계 슬라이드다운 메뉴 효과

관련 기사