반응형
결과
HTML
<!--index.html--> <!DOCTYPE html> <html> <head> <title>menu</title> <meta charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <script src="script/jquery-1.12.3.js" type="text/javascript"></script> <script src="script/script.js" type="text/javascript" defer="defer"></script> <link rel="stylesheet" href="css/style.css" type="text/css" /> </head> <body> <div id="container"> <!--세로형 1--> <br><p>세로형 메뉴바 1유형 : 드롭다운</p><br> <ul id="nav-v1"> <li class="menu-v1"><a href="#">menu-1</a> <ul class="submenu"> <li><a href="#">SubMenu 1</a></li> <li><a href="#">SubMenu 2</a></li> <li><a href="#">SubMenu 3</a></li> <li><a href="#">SubMenu 4</a></li> </ul> </li> <li class="menu-v1"><a href="#">menu-2</a> <ul class="submenu"> <li><a href="#">SubMenu 1</a></li> <li><a href="#">SubMenu 2</a></li> <li><a href="#">SubMenu 3</a></li> <li><a href="#">SubMenu 4</a></li> </ul> </li> <li class="menu-v1"><a href="#">menu-3</a> <ul class="submenu"> <li><a href="#">SubMenu 1</a></li> <li><a href="#">SubMenu 2</a></li> <li><a href="#">SubMenu 3</a></li> <li><a href="#">SubMenu 4</a></li> </ul> </li> <li class="menu-v1"><a href="#">menu-4</a> <ul class="submenu"> <li><a href="#">SubMenu 1</a></li> <li><a href="#">SubMenu 2</a></li> <li><a href="#">SubMenu 3</a></li> <li><a href="#">SubMenu 4</a></li> </ul> </li> </ul> <div class="clear"></div> <!--세로형 2--> <br><p>세로형 메뉴바 2유형 : 하위메뉴 오른쪽 부착</p><br> <ul id="nav-v2"> <li class="menu-v2"><a href="#">menu-1</a> <ul class="submenu"> <li><a href="#">sub 1-1</a></li> <li><a href="#">sub 1-2</a></li> <li><a href="#">sub 1-3</a></li> <li><a href="#">sub 1-4</a></li> </ul> </li> <li class="menu-v2"><a href="#">menu-2</a> <ul class="submenu"> <li><a href="#">sub 2-1</a></li> <li><a href="#">sub 2-2</a></li> <li><a href="#">sub 2-3</a></li> <li><a href="#">sub 2-4</a></li> </ul> </li> <li class="menu-v2"><a href="#">menu-3</a> <ul class="submenu"> <li><a href="#">sub 3-1</a></li> <li><a href="#">sub 3-2</a></li> <li><a href="#">sub 3-3</a></li> <li><a href="#">sub 3-4</a></li> </ul> </li> <li class="menu-v2"><a href="#">menu-4</a> <ul class="submenu"> <li><a href="#">sub 4-1</a></li> <li><a href="#">sub 4-2</a></li> <li><a href="#">sub 4-3</a></li> <li><a href="#">sub 4-4</a></li> </ul> </li> </ul> <div class="clear"></div> </div> </body> </html>
CSS
/*style.css*/
@charset "utf-8";
*{
margin:0;
padding:0;
list-style:none;
font-family:"malgun gothic";
box-sizing:border-box;
}
a{text-decoration:none;color:inherit;}
.clear{clear:both;}
#container{background-color:#fff;width:1000px;}
/*v1*/
#nav-v1{width:150px;text-align:center;}
.menu-v1{
line-height:2;
border:1px solid #222;
}
.menu-v1:hover{background-color:#000;}
.menu-v1:hover>a{color:white;font-weight:bold;}
.menu-v1 .submenu{
margin-top:7px;
background-color:#fff;
display:none;
}
.menu-v1 .submenu li:hover{
background-color:#000;color:white;font-weight:bold;
}
/*v2*/
#nav-v2{width:150px;text-align:center;}
.menu-v2{
line-height:2;
border:1px solid #222;
position:relative;
}
.menu-v2 .submenu{
position:absolute;
width:150px;
left:149px;
border:1px solid #222;
background-color:#222;
color:white;
top:-1px;
display:none;
}
.menu-v2:hover{
background-color:#222;
color:white;
}
.menu-v2 .submenu>li:hover{
background-color:white;
color:#222;
}
JavaScript
//script.js
$(document).ready(function(){
//menu v1
$(".menu-v1").mouseover(function(){
$(this).children(".submenu").stop().slideDown();
});
$(".menu-v1").mouseleave(function(){
$(this).children(".submenu").stop().slideUp();
});
//menu v2
$(".menu-v2").mouseover(function(){
$(this).children(".submenu").show(200);
});
$(".menu-v2").mouseleave(function(){
$(this).children(".submenu").hide(200);
});
});
반응형
'HTML CSS JavaScript JQuery' 카테고리의 다른 글
| 티스토리 신고버튼 없애기 (1) | 2025.04.15 |
|---|---|
| 티스토리 댓글 비허용 | 티스토리 댓글창 없애기 (0) | 2025.04.05 |
| 웹디자인기능사 2019 공개문제 풀이 관련 코드 (0) | 2019.04.09 |
| 탭 + 팝업창 구현 (0) | 2019.03.25 |