-
css로 드롭다운메뉴 만드는법웹사이트/HTML & CSS 2021. 7. 25. 16:19
flex를 이용한 네비 만드는 법에 소스코드를 이용하겠습니다.
html
<!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>메뉴바 만들기</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/sub_menu.css"> </head> <body> <div class="header"> <div class="section"> <div class="logo"> <a href="#">LOGO</a> </div> <div class="nav"> <ul> <li class="active"> <a href="#">menu1</a> <ul class="sub_nav"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">menu2</a> <ul class="sub_nav"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">menu3</a> <ul class="sub_nav"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> <li><a href="#">menu4</a> <ul class="sub_nav"> <li><a href="#">sub1</a></li> <li><a href="#">sub2</a></li> <li><a href="#">sub3</a></li> </ul> </li> </ul> </div> <div class="profile"> <ul> <li><a href="#">로그인</a></li> <li><a href="#">회원가입</a></li> </ul> </div> </div> </div> </body> </html>css
*{ box-sizing: border-box; color:#eee; text-decoration: none; list-style: none; } body{ background-color: rgba(220, 220, 220, 0.5); } .header{ width: 100%; height:100%; position: relative; } .section{ width: 1720px; height: 100px; background-color: rgba(0,0,0,0.3); margin: 0 auto; position: relative; display: flex; justify-content: space-between; } .logo{ font-size: 32px; line-height: 3.12; margin-left: 30px; } .nav > ul{ font-size: 20px; display: flex; justify-content: center; cursor: pointer; } .nav > ul > li{ width: 100px; margin: 0 15px; text-align: center; line-height: 5; position: relative; } .profile ul{ display: flex; } .profile ul li{ margin-right: 30px; font-size: 16px; line-height: 6.25; } .sub_nav{ background-color:rgba(30, 30, 30, 0.6); font-size: 18px; display: none; } .sub_nav li > a{ display: block; line-height: 2.2; border-bottom: 2px solid rgba(30, 30, 30, 0.6); } .nav > ul > li:hover .sub_nav{ display:block; } .sub_nav li:hover{ background-color:rgba(200, 0, 0, 0.7); }a menu 태그 뒤에 ul태그에 클래스 sub_nav를 주었고
그 안에 li태그들을 넣었습니다.
sub_nav 태그를 display none을 주어 보이지 않게 하고
background-color : rgba(30,30,30,0.6);
rgba(red , green, blue, alpha)입니다.
alpha는 불투명을 조절합니다.
sub_nav li a 태그 안에
display : block
line-height: 2.2 -> 2.2는 높이값에 나누기 폰트 사이즈를 해서 나온 값이 2.2입니다.
44/18px ==> 2.2
. nav > ul > li:hover -> 마우스 호버 시. sub_nav -> display: block;
을 주어 화면 표시되게 했습니다.
완성된 화면입니다.
'웹사이트 > HTML & CSS' 카테고리의 다른 글
flex를 이용한 네비만드는법 (0) 2021.07.23 float를 이용한 네비만드는법 (0) 2021.07.21 inline-block를 이용한 네비만드는법 (0) 2021.07.19 웹디자인퍼블리싱 HTML & CSS (5) (0) 2021.07.17 웹디자인퍼블리싱 HTML & CSS (4) (0) 2021.07.17