<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메뉴 만들기</title>
<!-- css 파일을 불러오는 코드 -->
<!-- 아이콘 사용을 위한 Font Awesome 6 CDN -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- 구글 웹 폰트 사용을 위한 CDN -->
<!-- 내가 만든 CSS 파일-->
<link rel="stylesheet" type="text/css" href="commons.css">
<link rel="stylesheet" type="text/css" href="test.css">
<style>
/*
메뉴는 계층형 구조를 가지는 가장 대표적인 도구
list tag를 이용하여 구현(ol, ul, li)
1차메뉴
- 2차메뉴
- 3차메뉴
- 3차메뉴
- 2차메뉴
- 3차메뉴
- 3차메뉴
- 3차메뉴
- 2차메뉴
1차메뉴
- 2차메뉴
- 3차메뉴
- 3차메뉴
- 2차메뉴
- 3차메뉴
- 3차메뉴
- 3차메뉴
- 2차메뉴
ul.menu
- li - a
- ul
- li - a
- li - a
- li - a
- li - a
- ul
- li - a
- li - a
- li - a
*/
/* 디자인 초기화 */
ul.menu,
ul.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
}
ul.menu a {
color: inherit;
text-decoration: none;
}
/* 1차 메뉴의 배치를 가로 배치로 변경 */
.menu > li {
display: inline-block;
}
/* 색상 변경 및 크기 설정 */
.menu,
.menu ul
{
font-size: 24px;
background-color: #2d3436;
}
.menu li {
color: white;
background-color: #2d3436;
width: 150px;
}
/* 메뉴에 마우스가 올라가면 하이라이트 효과 */
.menu li:hover {
background-color: #636e72;
}
/*
1차메뉴의 아래쪽에 2차메뉴가 위치하도록 position 변경
*/
.menu li {
position: relative;
}
.menu ul {
position: absolute;
z-index: 99999;
top: 100%;
left: 0;
}
/*
2차 이상의 메뉴를 숨김 처리
*/
ul.menu > li ul {
display: none;
}
/*
마우스가 올라간 메뉴 항목의 하위메뉴를 표시
*/
ul.menu li:hover > ul {
display: block;
}
/*
a 태그에 말줄임표 처리 구현
*/
ul.menu a {
display: block;
width:100%;
padding: 0.5em;
/* 말줄임표 처리를 위한 디자인(반드시 폭이 있어야 함) */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<a href="#">1차메뉴1</a>
<ul>
<li><a href="#">2차메뉴1</a></li>
<li><a href="#">2차메뉴2</a></li>
<li><a href="#">2차메뉴3</a></li>
<li><a href="#">2차메뉴4</a></li>
</ul>
</li>
<li>
<a href="#">1차메뉴2</a>
<ul>
<li><a href="#">2차메뉴1</a></li>
<li><a href="#">2차메뉴2</a></li>
<li><a href="#">2차메뉴3</a></li>
<li><a href="#">2차메뉴4</a></li>
</ul>
</li>
<li>
<a href="#">1차메뉴3</a>
<ul>
<li><a href="#">2차메뉴1</a></li>
<li><a href="#">2차메뉴2</a></li>
<li><a href="#">2차메뉴3</a></li>
<li><a href="#">2차메뉴4</a></li>
</ul>
</li>
<li>
<a href="#">1차메뉴4</a>
<ul>
<li><a href="#">2차메뉴1</a></li>
<li><a href="#">2차메뉴2</a></li>
<li><a href="#">2차메뉴3</a></li>
<li><a href="#">2차메뉴4</a></li>
</ul>
</li>
</ul>
</body>
</html>
'CSS' 카테고리의 다른 글
| 홈페이지 레이아웃(favicon) (0) | 2023.11.21 |
|---|---|
| 자주 사용하는 디자인 코드 (0) | 2023.08.29 |
| 폰트 어썸을 이용해보자! (2개다 사용해볼것) (0) | 2023.08.28 |
| 아이콘 사용법(Font Awesome) (0) | 2023.08.28 |
| 선택자(selector) (0) | 2023.08.25 |