728x90
반응형
SMALL
codePen의 화면이 너무 작다면 아래의 코드를 복사해서 Visual Studio에서 확인해보자.
아래의 코드중 드랍다운에서 가장 중요한 코드는 position이다.
🟰HTML로 만드는 드랍메뉴의 조건(자바스크립트를 쓰지 않고 만들기)
☀️ 숨길 메뉴의 상위 요소에 position : relative를 걸어 기준점을 만들어준다.
☀️숨길 메뉴의 요소에 position : absolute를 걸어 기준점에 대한 절대 위치를 지정해준다.
☀️ top, left, right, bottom을 통해 위치를 조정해준다.
☀️width, font-size등을 통해 세부 위치를 조정해준다.
☀️세부위치를 모두 조정했다면 숨길 요소에 display:none, visibility : hidden , opacity : 0등을 통해 요소를 숨긴다.
☀️상위 요소 :hover옵션시 하위 옵션에서 지정했던 none, hidden, 0등의 요소를 다시 원래 상태로 돌려준다.
☀️ 메뉴가 천천히 올라오도록 하고 싶다면 transition-duration을 통해 시간을 지정해주도록 한다.
See the Pen Untitled by 이선로 (@ttxvrsis-the-animator) on CodePen.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mall_menu ar.html</title>
<style>
.sb{
display: flex;
}
a{
text-decoration: none;
color: #353535;
}
ol,ul{
display: none;
padding-left: 0;
}
#tab{
width: 100%;
margin-top: 100px;
}
#tab > ul {
justify-content: space-evenly;
height: 60px;
width: 100%;
border: 1px solid rgb(0, 0, 0,.09);
font-size: 13px;
letter-spacing: -.25px;
}
#tab >ul >li{
display: flex;
position: relative;
text-decoration: none;
justify-content: center;
align-items: center;
min-width: 180px;
}
#tab >ul >li:first-child{
display: flex;
position: relative;
text-decoration: none;
justify-content: center;
align-items: center;
min-width: 70px;
}
a:hover{
opacity: 0.7;
}
ul> li> ol {
list-style: none;
}
ul> li:hover >ol {
position: absolute;
display: block;
margin-top: 0;
box-sizing: border-box;
top: 40px;
left: -2px;
border: 1px solid rgb(0, 0, 0,.09);
margin: 20px auto;
}
ul > li:hover > ol > li{
width: 168px;
padding: 10px;
background-color: white;
text-align: left;
height: fit-content;
overflow: hidden;
}
ul > li:hover > ol > li:hover{
background-color: rgb(0, 0, 0,.05);
cursor: pointer;
}
details ol{
display: block;
position: static;
width: fit-content;
height: fit-content;
list-style: decimal;
font-size: 1rem !important; /* !important : 상속및 선택자 상세도에 상관없이 무조건 적용*/
}
</style>
</head>
<body>
<div id="tab">
<ul class="sb">
<li>🟰</li>
<li><a href="#" style="color: rgb(225, 106, 146);">Rona universe</a></li>
<li>
<a href="#">남성의류</a>
<ol>
<li>아우터</li>
<li>탑</li>
<li>바텀</li>
<li>악세서리</li>
</ol>
</li>
<li><a href="#">아우터</a></li>
<li>
<a href="#">탑</a>
<ol>
<li>니트</li>
<li>셔츠</li>
<li>블라우스</li>
<li>후드,맨투맨</li>
<li>반팔T</li>
<li>긴팔T</li>
</ol>
</li>
<li>
<a href="#">드레스</a>
<ol>
<li>롱/미디</li>
<li>미니</li>
</ol>
</li>
<li>
<a href="#">바텀</a>
<ol>
<li>팬츠</li>
<li>스커트</li>
</ol>
</li>
<li>
<a href="#">악세서리</a>
<ol>
<li>ER</li>
<li>NC</li>
<li>BC</li>
<li>Etc</li>
</ol>
</li>
</ul>
</div>
</body>
</html>
728x90
반응형
SMALL
'HTML' 카테고리의 다른 글
| 비공개 (41) | 2023.08.14 |
|---|---|
| HTML15강 - css파일과 javascript파일 분리하기(간단 예시) (0) | 2023.08.11 |
| HTML13강 - position 속성 (0) | 2023.08.04 |
| HTML- 12강 :hover (마우스오버시 효과) (1) | 2023.08.03 |
| HTML11강 - flex요소 (세로가 아닌 가로로배치하기) (0) | 2023.08.02 |