[Css] DropDown 메뉴 만들기 예시

우선 리스트의 구조는 메인 메뉴 리스트에 각 메뉴의 서브 메뉴가 들어있는 구조로 진행 하려고 한다.

 

우선 HTML을 살펴보자

<div>
	<ul class="main">
    	<li class="mainMenu">
        	<div class="mainText">
            	<span><a href="">메인1</a></span>
            </div>	
        	//여기서 부터 서브메뉴
            <ul class="sub">
            	<li>서브1</li>
                <li>서브2</li>
                <li>서브3</li>
            </ul>
        </li>
    </ul>
</div>

뭐 요딴 구조로 되어 있다고 가정을 해보자. 그럼 저 메인1을 :hover 했을 때 아래 서브메뉴가 뿅 하고 나오게 하는것이 주기능이다.

 

1. 우선 메인 메뉴가 하나가 아니라 하나 이상일 경우 가로 or 세로로 정렬을 해주는것이 보기도 사용하기도 편할 것이다.

.main {
	display:flex;
    flex-direction: row
}

요렇게 하면 main에 속해있는 <li> 들이 가로로 정렬을 한다.

 

2. 메인 메뉴와 서브메뉴를 동일 선상으로 정렬한다.

간단하게 말해서 메인메뉴 아래 쪽으로 서브 메뉴의 위치를 고정하는것이다.

.mainMenu{
    display: inline-block; // 메인메뉴의 크기를 설정하기 위해 inline block를 사용
    width: 112px; // 넓이는 원하는 크기로 조정해 주면 됨
    position: relative; // 하위 태크가 포지션을 받기위해 우선 설정해준다.
}
.subMenu{
	position: absolute; // 가장 가까운 상위 태그의 위치를 본인의 위치로 설정함.
}

이렇게 진행하면 메인메뉴 아래쪽으로 서브메뉴들이 나열 된다.

hover를 통하여 다른 class를 수정하기 위해서는 hover되는 자신의 하위 class 여야만 한다.

상위 class 또는 형제 class 는 수정될 수 없다.

 

3. 서브메뉴를 안보이게 설정하고 :hover 했을 때 나타나도록 한다.

1) display 사용

2) opacity 사용

3) height 사용

.mainMenu{
    display: inline-block; 
    width: 112px; 
    position: relative; 
}

//1) display 수정
.mainMenu:hover .subMenu{
	display: block;
}
.subMenu{
	position: absolute;
    // absolute를 사용한다면 준비되지 않은 공간에서 갑자기 생성되기 때문에 
    // 하위 객체들이 밀리게 된다.
    // 그래서 아예 fixed를 사용하여 고정시키는 방법도 있다.
    display: none; // 표시되지 않음
    transition: 0.3s; // 속성에 변화가 생기면 서서히 변경하도록 시간 설정
}

//2) opacity 수정
.mainMenu:hover .subMenu{
	opacity: 1; //mainMenu가 hover되면 subMenu의 opacity를 1로 변경한다.
}
.subMenu{
	position: absolute;
    opacity: 0; // 렌더링 될 때 투명하게 설정
    transition: 0.3s; // 속성에 변화가 생기면 서서히 변경하도록 시간 설정
}
//3) height 수정
.mainMenu:hover .subMenu{
	height: 100px; 
}
.subMenu{
	position: absolute;
    height: 0; // 렌더링 될 때 높이값을 주지 않아서 표시되지 않음.
    transition: 0.3s; 
}

 

생각보다 간단하게 드롭다운 메뉴효과를 설정 할 수 있다.