⚡리스트 태그 사용해서 서브메뉴 만들기 연습⚡
메뉴에 마우스 올렸을 때 다음과 같이 서브메뉴가 나타나도록 하기 위해 어떻게 코드 작성하는지 알아 보자.
- 색깔 입혀주는 css 코드는 별도로 하단에 올려 두었으니 <head>태그 안에 <style>태그 열어서 적용시켜주거나 스타일 시트를 하나 추가해서 연결해주면 된다. 외부 CSS 파일을 HTML 파일에 링크하려면 HTML 파일의 <head> 태그 내에 <link> 태그를 사용하여 CSS 파일을 불러와주면 된다.
<link rel="stylesheet" href="styles.css">
1. 메인메뉴 (1 depth 메뉴)
우선 1 depth 메뉴를 작성해야 한다. 메뉴 구조에 마우스를 올리기 전에 보이는 주메뉴를 1 depth 메뉴라고 한다. 해당 메뉴에서 한 칸씩 하위 메뉴로 내려 가면 2 depth, 3 depth 식으로 명명한다.
<body>
<nav class="dropdownmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Articles on HTML5 & CSS3</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
2. Submenu 서브메뉴 구조
마우스를 올리기 전에 보여질 메뉴를 먼저 생성한 후에 About us의 서브메뉴를 생성한다. 이 때 About us <li> 태그가 닫히기 전에 새로운 리스트를 생성해야 하는 것이 중요하다. 이 서브메뉴가 depth2 메뉴이다.
<body>
<nav class="dropdownmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Me</a></li>
<li>
<a href="#">Articles on HTML5 & CSS3</a>
<ul id="submenu">
<li><a href="#">Difference between SVG vs. Canvas</a></li>
<li><a href="#">New features in HTML5</a></li>
<li><a href="#">Creating links to sections within a webpage</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</body>
3. CSS
<style>
.dropdownmenu ul, .dropdownmenu li {
margin: 0;
padding: 0;
}
.dropdownmenu ul {
background: gray;
list-style: none;
width: 100%;
}
.dropdownmenu li {
float: left;
position: relative;
width:auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px; /* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
#submenu li {
float: none;
width: 100%;
}
#submenu a:hover {
background: #DF4B05;
}
#submenu a {
background-color:#000000;
}
</style>
CSS 코드 해설
위 CSS 코드의 의미를 살펴보자. 위 코드에서 가장 핵심 2가지는
- submenu가 안보이다가 메뉴바에 마우스를 올렸을때 submenu가 나오게 하는 드롭다운 구현
- 마우스를 올렸을 때 서브메뉴가 부드럽게 나타나도록 함
3-1. 드롭다운 구현
<style>
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px; /* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
</style>
#submenu의 초기 상태:
<style>
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
</style>
- left: 0: 서브메뉴의 왼쪽 위치를 부모 요소의 왼쪽에 맞춤
- opacity: 0: 서브메뉴를 보이지 않게 설정
- position: absolute: 서브메뉴를 부모 요소 기준으로 절대 위치
- top: 35px: 서브메뉴의 위쪽 위치를 부모 요소의 아래로 35픽셀 떨어지게 설정
- visibility: hidden: 서브메뉴를 숨김
- z-index: 1: 서브메뉴가 다른 요소들 위에 표시되도록 설정
부모 li 요소에 마우스를 올렸을 때 #submenu를 표시하는 부분:
<style>
li:hover ul#submenu {
opacity: 1;
top: 40px; /* adjust this as per top nav padding top & bottom comes */
visibility: visible;
}
</style>
- opacity: 1: 서브메뉴를 보이게 설정
- top: 40px: 서브메뉴의 위쪽 위치를 부모 요소의 아래로 40픽셀 떨어지게 설정합니다.
- visibility: visible: 서브메뉴를 보이게 설정
이 CSS 코드는 서브메뉴가 마우스를 올렸을 때 (li:hover) 나타나도록 함. 즉, 부모 li 요소에 마우스를 올리면 자식 #submenu가 보이도록 설정된 것
3-2. 서브메뉴 부드럽게 나타나게 하기
서브메뉴가 부드럽게 나타나게 해주는 부분은 #submenu와 li:hover ul#submenu에 적용된 transition 속성. 이 속성은 서브메뉴의 opacity와 top 속성 변경 시 애니메이션 효과를 적용하여 부드럽게 나타나도록 한다.
<style>
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
</style>
위 코드에서 -transition: all .25s ease; 부분이 부드러운 전환 효과를 주는 코드이다.
일단 앞에 -webkit-이 붙은 코드를 기준으로 살펴 보자. .25는 0.25초를 뜻한다. 단위는 초단위로 써 주어야 한다.
- -webkit-transition: all .25s ease; 모든 속성의 변화에 대해 0.25초 동안 부드럽게 전환되도록 설정. 웹킷 브라우저용
- -moz-transition: all .25s ease; 모질라 브라우저용
- -ms-transition: all .25s ease; 인터넷 익스플로러 브라우저용
- -o-transition: all .25s ease; 오페라 브라우저용
- transition: all .25s ease; 표준 속성
'html&css' 카테고리의 다른 글
| [html&css] ⚡ CSS의 선택자 총정리, 선택자 우선순위 ! (0) | 2024.05.23 |
|---|---|
| [html&css] ⚡ CSS 크기의 단위 px, em, rem 차이 (0) | 2024.05.23 |
| 리스트 태그의 종류 ul, ol, dt 및 사용법 (+주의점, 틀린 사용법 예시) (0) | 2024.05.22 |
| [html&css] 웹디자인 기능사 채점기준 (0) | 2024.04.30 |
| [html&css] html 특수문자 표현, 엔터티 코드 (Entity Code) (0) | 2024.04.29 |
