[웹 UI 개발] 메뉴 - 2 / 2단 메뉴
2023. 3. 21. 12:58
본문
2단 메뉴는 메인 메뉴와 서브 메뉴로 구성되어 있다.
실습
아래 조건을 만족하는 2단 메뉴를 제작
- 메인, 서브 메뉴를 가지는 2단 가로 메뉴
- 메인, 서브 메뉴는 가로 중앙 정렬 처리
- 메인 선택 메뉴는 볼드, 컬러 변경 처리
- 서브 선택 메뉴는 볼드, 컬러 변경 처리, 하단 라인 추가 처리
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2단 메뉴</title>
<link rel="stylesheet" href="css/menu2.css">
</head>
<body>
<nav>
<ul class="menu">
<li class="menu_item active">
<a href="#" class="menu_link">웹툰</a>
<ul class="submenu">
<li class="submenu_item active"><a href="#" class="submenu_link"><span>요일별</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>장르별</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>작가별</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>연도별</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>작품별</span></a></li>
</ul>
</li>
<li class="menu_item">
<a href="#" class="menu_link">블로그</a>
</li>
<li class="menu_item">
<a href="#" class="menu_link">지식백과</a>
<ul class="submenu">
<li class="submenu_item active"><a href="#" class="submenu_link"><span>건강백과</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>밀리터리</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>음식백과</span></a></li>
<li class="submenu_item"><a href="#" class="submenu_link"><span>동물백과</span></a></li>
</ul>
</li>
<li class="menu_item">
<a href="#" class="menu_link">카페</a>
</li>
</ul>
</nav>
</body>
</html>
/*menu2.css*/
@charset "UTF-8";
body {
font-family: '나눔고딕', NanumGothic, Dotum, '돋움', sans-serif;
}
body, ul, ol, li, div, a {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
nav {
width: 700px;
margin: 20px auto 0;
text-align: center;
}
.menu_item {
display: inline-block;
}
.menu_link {
display: block;
padding: 13px 20px;
font-size: 20px;
line-height: 24px;
font-weight: bold;
color: #444;
}
.menu_item:hover .menu_link,
.menu_item.active .menu_link {
color: green;
}
.menu_item.active .submenu {
display: block;
}
.submenu {
display: none;
position: absolute;
left: 0;
width: 100%;
min-width: 700px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.submenu_item {
display: inline-block;
}
.submenu_link {
display: block;
padding: 15px 35px;
font-size: 17px;
line-height: 20px;
color: #444;
}
.submenu_item:hover .submenu_link,
.submenu_item.active .submenu_link {
font-weight: bold;
color: green;
}
.submenu_link span {
position: relative;
}
.submenu_item:hover span:after,
.submenu_item.active span:after {
position: absolute;
content: "";
right: 0;
bottom: -15px;
left: 0;
border-bottom: 2px solid green;
}
서브메뉴가 여러개 존재하면 브라우저 화면에서 겹쳐보이기 때문에 active된 메뉴만 서브메뉴가 보이도록("display: block;")한다(나머지 서브메뉴들은 "display: none;").
서브메뉴(.submenu)에 "min-width: 700px;"을 설정하지 않으면 브라우저 화면에 가로로 작아질 때 서브메뉴들이 뭉쳐버리기 때문에 꼭 설정해줘야 한다.
서브 메뉴 텍스트와 같은 길이의 하단 라인을 만들기 위해 메뉴 이름을 <span> 태그로 감싼다.
그 후 after 가상요소를 사용해서 하단 라인을 만들어 준다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/web344
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
'공부 > 웹 UI 개발' 카테고리의 다른 글
| [웹 UI 개발] 이미지 리스트 - 0 (0) | 2023.03.22 |
|---|---|
| [웹 UI 개발] 탭 (0) | 2023.03.21 |
| [웹 UI 개발] 메뉴 - 1 / 1단 메뉴 (0) | 2023.03.21 |
| [웹 UI 개발] 메뉴 - 0 (0) | 2023.03.21 |
| [웹 UI 개발] 레이아웃 - 3 / 고정 레이아웃 (0) | 2023.03.17 |
