커서 올리면 메뉴 스르륵 보이기 - css 반응형 사이드바, 드롭다운 메뉴 - https://shj0318.tistory.com/m/44
커서 올리면 메뉴 스르륵 보이기 - css 반응형 사이드바, 드롭다운 메뉴
마우스 커서 올리면 메뉴 스르륵 보이기 - 반응형 사이드 바, 드롭다운 메뉴 저번에 포스팅한게 형편없어서 다시 정리해서 올림 1. 메뉴(ul)와 서브메뉴(ul)의 li에 inline-block으로 가로정렬해주기 ul
shj0318.tistory.com
더 알기쉽게 정리한 글입니다 클릭해서 저 글을 봐주세용 … 😃
<nav class = "main-nav"> //검은테두리
<div class = main-nav-left> //빨간테두리
목표)
SHOP에 마우스 커서를 갖다대면
SHOP 밑에서 하위메뉴 박스가 오른쪽 방향 -> 으로 스르륵 열리게 하기
시도)
1. 메인 메뉴바를 감싸고 있는 div태그 (main-nav) 바깥에
또 div태그로 하위메뉴 리스트를 만들어봤지만 실패
2. SHOP을 감싸고 있는 div태그(main-nav-left)에
곧바로 <ul><li>를 이용했지만 SHOP을 가려 실패
3. p태그도 써보고 span태그도 써봤지만 모두 shop을 가리거나 메인 바의 모든 객체들이 뒤섞임
해결)
<html 작성>
SHOP을 감싸고 있는 div태그 (main-nav-left) 안에
서브메뉴를 담을 div를 만들어 <ul><li>를 이용해 하위메뉴 리스트를 작성하였다!
<css 작성>
1. 커서 올리기 전 서브메뉴 안보이게
(서브메뉴 리스트인) ul을 담고 있는 div를
width : 0;
으로 주면 사라짐 !
2. 커서 올리면 서브메뉴 나타나기
SHOP을 담고 있는 div에 hover을 이용해
width : 300px
를 주면
0이었던 폭이 커서를 올리면 300px까지 늘어남
.main-nav-left:hover .sub-menu{
height: 100%;
width: 300px;
overflow: hidden
}여기서 sub-menu는 하위메뉴리스트를 담고 있다.
//hover는 해당 태그 위에 마우스 커서를 올리면 변화를 준다
<html>
<div class = main-nav-left>
<a href="#" class="top-menu">SHOP</a>
<!-- SHOP - 서브메뉴 생성 -->
<div class = "sub-menu">
<ul class = "sub-menu-list">
<li>
<a href="#"><span class = "title">New</span></a>
</li>
<li>
<a href="#"><span class = "title">Basic</span></a>
</li>
<li>
<a href="#"><span class = "title">Best Item</span></a>
</li>
<li>
<a href="#"><span class = "title">SALE</span></a>
</li>
</ul>
</div>
</div><css>
/* SHOP - 서브메뉴 */
.sub-menu {
position: fixed;
width: 200px;
height: 100%;
transition: 0.5s;
}
.sub-menu ul {
list-style: none;
padding: 0;
}
.sub-menu{
width: 0;
height: 100%;
overflow: hidden;
background: chartreuse;
transition-duration: 0.5s;
}
.main-nav-left:hover > .sub-menu{
height: 100%;
width: 300px;
overflow: hidden
}
.sub-menu-list li {
line-height: 3rem;
}
결과물 )
완성시키고 보니 그렇게 어려운건 아니었다
하지만 난 이틀 걸림...
'퍼블리싱' 카테고리의 다른 글
| [CSS] <div> 텍스트 가운데 정렬하는 법! (0) | 2022.03.07 |
|---|---|
| [CSS] box-sizing 속성 완벽 정리! 개념부터 활용법까지 (0) | 2022.03.05 |
| [CSS] margin/ padding/ border 쉬운 이해 ! (0) | 2022.03.04 |
| [CSS] Display 속성 / 블록, 인라인, 인라인-블록 까지 총정리 ! (0) | 2022.03.04 |
| [CSS] 좌우정렬 필요할 땐? 쉽게 float을 사용해보자! (0) | 2022.03.02 |