<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>design practice</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#" class="nav-menu">home</a>
<div class="dropdown-menu">
<a href="https://instagram.com"><i class="fa-brands fa-instagram"></i>instagram</a>
<a href="https://google.com"><i class="fa-brands fa-google"></i>google</a>
<a href="https://github.com"><i class="fa-brands fa-github"></i>github</a>
</div>
<script src="app.js"></script>
</body>
</html>html 코드를 위와 같이 작성한다. 폰트아우썸 아이콘을 이용하여 드롭다운 메뉴를 만든다.
a{
text-decoration: none;
color: #333;
}
.dropdown-menu{
width: 20rem;
padding: .5rem;
background: #eee;
z-index: 1;
box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3);
}이렇게 하면 아래와 같이 드롭다운 디자인이 완성된다.
a{
text-decoration: none;
color: #333;
}
.dropdown-menu{
width: 20rem;
padding: .5rem;
background: #eee;
z-index: 1;
box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3);
display: none; /* 추가 */
}
.nav-menu:focus + .dropdown-menu{
display: block;
}이제 드롭다운 메뉴를 보이지 않게 하고, 메뉴를 클릭할때 보이도록 위와 같이 작성한다. 메뉴를 클릭하면 보이고, 메뉴 이외의 영역을 클릭하면 드롭다운이 사라진다.
a{
text-decoration: none;
color: #333;
}
.dropdown-menu{
width: 20rem;
padding: .5rem;
background: #eee;
z-index: 1;
box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3);
display: none; /* 추가 */
}
.nav-menu:focus + .dropdown-menu{
display: block;
}
.dropdown-menu a{
display: block;
transition: .3s;
}
.dropdown-menu a:hover{
background-color: #ccc;
}
.dropdown-menu a i{
margin-right: .5rem;
}드롭다운 메뉴가 세로방향으로 나열되도록 display: block 을 주고, 마우스 호버 효과도 적용한다.
하지만 한가지 문제가 있다. 이렇게 하면 home 메뉴를 클릭할때는 드롭다운 메뉴가 열리지만, 드롭다운 메뉴를 선택할때는 home 메뉴에서 포커스가 사라지기 때문에 드롭다운 메뉴가 닫혀버려서 드롭다운 메뉴의 링크를 클릭하지 못한다. 이를 해결하고자 아래와 같이 드롭다운 메뉴가 클릭될때는 (active 상태) 드롭다운 메뉴가 화면에서 사라지지 않게 한다. 이렇게 하면 링크를 클릭해서 다른 페이지로 이동이 가능하다.
a{
text-decoration: none;
color: #333;
}
.dropdown-menu{
width: 20rem;
padding: .5rem;
background: #eee;
z-index: 1;
box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3);
display: none; /* 추가 */
}
.nav-menu:focus + .dropdown-menu{
display: block;
}
.dropdown-menu a{
display: block;
transition: .3s;
}
.dropdown-menu a:hover{
background-color: #ccc;
}
.dropdown-menu a i{
margin-right: .5rem;
}
.dropdown-menu:active{
display: block;
}
---------------------------------------------------- 이전 수업내용 ----------------------------------------------------------------------------------------
a{
text-decoration: none;
color: #333;
}
.dropdown-menu{
display: none;
width: 20rem;
padding: .5rem;
background: #eee;
z-index: 1;
box-shadow: .3rem .3rem .5rem rgba(0,0,0,.3);
}
.dropdown-menu a{
display: block;
transition: .3s;
}
.dropdown-menu a:hover{
background: #ccc;
}
.dropdown-menu a i{
margin-right: .5rem;
}
.nav-menu:focus + .dropdown-menu{
display: block;
}
/* 드롭다운 메뉴중 하나를 선택할때는 nav-menu 링크의 포커스가 사라지면서 드롭다운 메뉴가 사라지는데 이러면 a 링크를 클릭하지 못함 */
/* 드롭다운 메뉴 영역 내부를 클릭했을때 드롭다운 메뉴가 사라지지 않게 함으로써 a 태그가 동작할 수 있게 함 */
.dropdown-menu:active{
display: block;
}드롭다운 메뉴 클릭시 nav-menu 링크의 포커스가 사라지면서 드롭다운 메뉴 영역의 display 속성이 none 이 된다. 드롭다운 메뉴 내부의 a 태그도 함께 사라지므로 메뉴를 클릭했을때 페이지가 다른 사이트로 이동하지 않는다. 이러한 문제는 드롭다운 메뉴 영역을 클릭한 경우 드롭다운 메뉴 영역이 사라지지 않게 해주면 된다.
'프론트엔드 > 컴포넌트' 카테고리의 다른 글
| 자바스크립트없이 드롭다운 메뉴 만들기 (2) (0) | 2023.04.14 |
|---|---|
| 카드 컴포넌트 및 리뷰 컴포넌트 만들기 (2) (0) | 2023.04.14 |
| 배경이 비취는 투명 텍스트 효과 만들기 (2) | 2023.04.14 |
| 시스루 배경 만들기 (0) | 2023.04.14 |
| 카드 컴포넌트 및 리뷰 컴포넌트 만들기 (0) | 2023.04.13 |