반응형
1. HTML Code
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>아코디언 메뉴</title>
<link href="css/ex09.css" rel="stylesheet">
</head>
<body>
<div id='navi'>
<ul>
<li id="menu1"><a href="#menu1">Menu1</a>
<ul>
<li><a href="#">SubMenu1</a>
</li>
<li><a href="#">SubMenu2</a>
</li>
</ul>
</li>
<li id="menu2"><a href="#menu2">Menu2</a>
<ul>
<li><a href="#">SubMenu1</a>
</li>
<li><a href="#">SubMenu2</a>
</li>
</ul>
</li>
<li id="menu3"><a href="#menu3">Menu3</a>
<ul>
<li><a href="#">SubMenu1</a>
</li>
<li><a href="#">SubMenu2</a>
</li>
</ul>
</li>
<li id="menu4"><a href="#menu4">Menu4</a>
<ul>
<li><a href="#">SubMenu1</a>
</li>
<li><a href="#">SubMenu2</a>
</li>
</ul>
</li>
<li id="menu5"><a href="#menu5">Menu5</a>
<ul>
<li><a href="#">SubMenu1</a>
</li>
<li><a href="#">SubMenu2</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
2. CSS Code
@charset "utf-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
ul, li, ol {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
/* 아코디언 디자인하기 */
#navi{
width:150px;
}
#navi ul>li{
background:orange;
line-height:2.5;
text-align:center;
border-radius:5px;
box-shadow:2px 2px 1px black;
margin-top:1px;
}
#navi ul li ul{
background:cyan;
overflow:hidden;
}
#navi ul li ul li{
background:cyan;
height:0;
overflow:hidden;
transition:0.5s;
visibility:hidden;
opacity:0;
}
#navi li:target ul li{
height:35px;
border-bottom:1px dotted black;
visibility:visible;
opacity:1;
}
3. HTML / CSS 파일
ex09.html
0.00MB
ex09.css
0.00MB
4. 미리보기
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| HTML5 - 190701 Basic Study 65(프린터, 모니터 CSS) (0) | 2019.07.01 |
|---|---|
| HTML5 - 190623 Basic Study 64(에릭마이어 reset.css) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 62(드롭다운 네비게이션 바) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 61(세로 네비게이션 바) (0) | 2019.06.23 |
| HTML5 - 190623 Basic Study 60(풍선 도움말) (0) | 2019.06.23 |
