티스토리 뷰
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html>
<head>
<title> New Document </title>
< style type="text/css">
#nav {
float: left;
width: 280px;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;
}
#nav li a {
display: block;
padding: 10px 15px;
background: #FFFFFF;
border-top: 1px solid #eee;
border-bottom: 1px solid #999;
text-decoration: none;
color: #000;
}
#nav li a:hover, #nav li a.active {
background: #999;
color: #fff;
}
#nav li ul {
display: none;
}
#nav li ul li a {
padding: 10px 25px;
background: #FFFFFF;
border-bottom: 1px dotted #ccc;
}
< /style>
< script src="</script`>http://code.jquery.com/jquery-1.9.1.min.js"></script>
< script>
$(document).ready(function(){
$("#nav > li > a").mouseenter(function(){
if ($(this).attr("class") != "active"){
$("#nav li ul").slideUp();
$(this).next().slideToggle();
$("#nav li a").removeClass("active");
$(this).addClass("active");
}
});
$("#nav").mouseleave(function(){
$("#nav li ul").slideUp();
});
});
< /script>
</head>
<body>
< ul id="nav">
<li><a href="">Menu1</a>
<ul>
<li><a href="">sub_menu1.1</a></li>
<li><a href="">sub_menu1.2</a></li>
<li><a href="">sub_menu1.3</a></li>
</ul>
</li>
<li><a href="">Menu2</a>
<ul>
<li><a href="">sub_menu1.1</a></li>
<li><a href="">sub_menu1.2</a></li>
<li><a href="">sub_menu1.3</a></li>
</ul>
</li>
<li><a href="">Menu3</a>
<ul>
<li><a href="">sub_menu1.1</a></li>
<li><a href="">sub_menu1.2</a></li>
<li><a href="">sub_menu1.3</a></li>
</ul>
</li>
<li><a href="">Menu4</a></li>
<li><a href="">Menu5</a></li>
< /ul>
</body>
< /html>
'Language > JQuery' 카테고리의 다른 글
| [ JQuery ] ajax 예제 - 검증전 (0) | 2015.11.29 |
|---|---|
| [ JQuery ] AJAX Example (0) | 2015.11.29 |
| [ JQuery ] AlphaNumeric 숫자 / 영문 체크 - 익스플로러만 됨 (0) | 2015.11.29 |
| [ JQuery ] 이메일 유효성 검사 - email - e-mail (0) | 2015.11.29 |
| [ JQuery ] RADIO (0) | 2015.11.29 |