집 > 기사 > 웹 프론트엔드 > 3단계 menu_jquery를 구현하는 jQuery 코드

3단계 menu_jquery를 구현하는 jQuery 코드

WBOY원래의: 2016-05-16 09:00:281764검색

지난주에 3단계 메뉴를 구현하기 위해 jquery 코드가 필요한 새로운 웹사이트 구축 작업을 맡았습니다. 사실 편집자가 참고용으로 코드를 공유해 드릴 것입니다.

먼저 렌더링을 보여드리겠습니다. 괜찮으시다면 구현 코드를 참고해주세요.

HTML 코드:

<body> 
<div class="navMenu"> 
<ul> 
<li><a href="#">首页</a> 
<ul> 
<li><a href="#">JavaScript+</a> 
<ul> 
<li><a href="#">三角函数</a></li> 
<li><a href="#">矩形</a></li> 
</ul> 
</li> 
<li><a href="#">语文</a> 
<ul> 
<li><a href="#">唐诗</a></li> 
<li><a href="#">宋词</a></li> 
</ul> 
</li> 
<li><a href="#">英语</a></li> 
</ul> 
</li> 
<li><a href="#">课程大厅</a></li> 
<li><a href="#">学习中心+</a> 
<ul> 
<li><a href="#">JavaScript+</a> 
<ul> 
<li><a href="#">三角函数</a></li> 
<li><a href="#">矩形</a></li> 
</ul> 
</li> 
<li><a href="#">语文</a> 
<ul> 
<li><a href="#">三角函数</a></li> 
<li><a href="#">矩形</a></li> 
</ul> 
</li> 
<li><a href="#">英语</a></li> 
</ul> 
</li> 
<li><a href="#">帮助</a></li> 
</ul> 
</div> 
</body>

js 코드:

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$("li").has("ul").mouseover(function(){ 
$(this).children("ul").css("display","block"); 
$(this).css("backgroundColor","#0066FF"); 
}).mouseout(function () { 
$(this).children("ul").css("display","none"); 
$(this).css("backgroundColor","#eee"); 
}) 
}) 
</script>

css 코드:

*{ 
padding:0; 
margin:0; 
} 
/*一级菜单*/ 
.navMenu { 
width:570px; 
margin:0 auto; 
} 
.navMenu ul li{ 
float: left; 
position: relative; 
} 
li{ 
list-style: none; 
background-color: #eee; 
width: 140px; 
height: 40px; 
text-align: center; 
margin-right: 2px; 
margin-bottom: 2px; 
} 
ul li a{ 
line-height: 40px; 
text-align: center; 
font-size: 20px; 
color: #000; 
text-decoration: none; 
display: block; 
padding:0 10px; 
} 
/*二级菜单*/ 
.navMenu ul li ul { 
display: none; 
position:absolute; 
left: 0; 
top:0; 
margin-top:42px; 
} 
.navMenu ul li ul li{ 
float:none; 
} 
/*三级菜单*/ 
.navMenu ul li ul li ul{ 
display: none; 
left:140px; 
top:-42px; 
}

위 내용은 에디터가 소개한 3단계 메뉴를 구현하기 위한 jQuery 코드입니다. 도움이 되셨으면 좋겠습니다!

성명：

이전 기사：반투명 마스킹 효과를 달성하기 위해 CSS+JavaScript 또는 순수 js를 사용하는 공유 예_javascript 기술다음 기사：반투명 마스킹 효과를 달성하기 위해 CSS+JavaScript 또는 순수 js를 사용하는 공유 예_javascript 기술

3단계 menu_jquery를 구현하는 jQuery 코드

관련 기사