-
211005_list,hover,slideUp,slideDown,childrenJQuery 2021. 10. 5. 16:08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
<style type="text/css">
a {
text-decoration: none;
}
ul li {
list-style: none;
}
li.main{
float: left;
}
li.main>a {
display: block;
width: 180px;
color: gray;
font-weight: bold;
font-family: 'Nanum Pen Script';
}
li.main>a:hover{
color: orange;
}
ul.sub {
margin-left: 0;
font-size: 13pt;
font-family: 'Nanum Pen Script';
margin-top: 15px;
}
ul.sub>li>a {
display: block;
width: 180px;
height: 20px;
color: gray;
}
ul.sub>li>a:hover {
color: orange;
}
</style>
</head>
<body>
<div>
<ul>
<!-- 1 -->
<li class="main">
<a href="">서울IT정보센터 안내</a>
<ul class="sub">
<li><a href="">초대의 글</a></li>
<li><a href="">시설안내</a></li>
<li><a href="">주변시설</a></li>
<li><a href="">찾아오시는 길</a></li>
</ul>
</li>
<!-- 2 -->
<li class="main">
<a href="">정보센터 안내</a>
<ul class="sub">
<li><a href="">층별안내</a></li>
<li><a href="">강의실</a></li>
<li><a href="">주변 숙소</a></li>
<li><a href="">근처 맛집 안내</a></li>
</ul>
</li>
<!-- 3 -->
<li class="main">
<a href="">이용안내</a>
<ul class="sub">
<li><a href="">이용요금</a></li>
<li><a href="">이용신청</a></li>
<li><a href="">강의커리큘럼</a></li>
<li><a href="">도움말</a></li>
</ul>
</li>
<!-- 4 -->
<li class="main">
<a href="">정보광장</a>
<ul class="sub">
<li><a href="">공지사항</a></li>
<li><a href="">FAQ</a></li>
<li><a href="">Q&A</a></li>
<li><a href="">자유게시판</a></li>
</ul>
</li>
<!-- 5 -->
<li class="main">
<a href="">서울 IT 소개</a>
<ul class="sub">
<li><a href="">CEO 인사말</a></li>
<li><a href="">경영비젼</a></li>
<li><a href="">인재양성</a></li>
<li><a href="">관계회사 소개</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
//서브메뉴 숨기기
//$("ul.sub").hide();
$("ul.sub").slideUp(0); //안에 0초를 넣으면 같음
//메뉴에 마우스를 올려놓으면 서브메뉴 나오기..children
$('li.main').hover(function() {
$(this).children('ul').slideDown('fast');
}, function() {
$(this).children('ul').slideUp('fast');
});
</script>
</body>
</html>
'JQuery' 카테고리의 다른 글
211005_animate (0) 2021.10.05 211005_button(hide,show,toggle,slide,fade) (0) 2021.10.05 211005_list,click,hide,show (0) 2021.10.05 211005_addClass,removeClass (0) 2021.10.05 211005_fadeout,fadein (0) 2021.10.05