본문 바로가기

Python_WEB/HTML

HTML5 - 190623 Basic Study 63(아코디언 네비게이션 바)

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. 미리보기

< 아코디언 네비게이션 바 >