jQuery CSS_jquery로 구현된 웹페이지의 2단계 슬라이드다운 메뉴 효과
- WBOY원래의
- 2016-05-16 15:43:011158검색
이 기사의 예에서는 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 프로그래밍 설계에 도움이 되기를 바랍니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.