CSS, Jquery 메인메뉴, 서브메뉴 만들기

css, js 메인메뉴, 서브메뉴 만들기

 

 

0. 서브메뉴 만들기 

- 메인 메뉴는 보이게, 서브 메뉴는 안 보이게 숨기기(display: none;)
- 서브 메뉴는 마우스를 오버했을 경우에만 나타나게

 

1. 서브 메뉴 전체 떨어지게 만들기

→ header_menu_list 박스와 sub 메뉴 박스를 따로 만들어서 style에서 sub 메뉴의 크기 등의 속성을 따로 줌

 

<nav>
	<ul id="quickmenu">
		<li><a href="#">Home</a></li>
		<li><a href="#">Blog</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

<div class="sub_menu">
	<ul class="sub_menu_list">
		<li><a href="#">홈</a></li>
		<li><a href="#">바로가기</a></li>
	</ul>
	<ul class="sub_menu_list">
		<li><a href="#">일상</a></li>
		<li><a href="#">공부</a></li>
	</ul>
	<ul class="sub_menu_list">
		<li><a href="#">네이버</a></li>
		<li><a href="#">티스토리</a></li>
	</ul>
</div>

#quickmenu, .sub_menu{
	width: 610px;
}

#quickmenu li, .sub_menu ul{
	width: 200px;
	height: 30px;
	line-height: 30px;
	float: left;
	text-align: center;
	background-color: pink;
	margin-right: 5px;
}

.sub_menu{
	display: none;
}

.sub_menu_list li{
	background-color: skyblue;
}

#quickmenu li:last-child, .sub_menu ul:last-child{
	margin-right: 0;
}

 

<script src="jquery-3.6.1.min.js"></script>
<script>
	$(document).ready(function(){ /* 문서가 준비되면 다음 함수 실행 */
		$('#quickmenu').mouseover(function(){ /* quickmenu 에 마우스를 올리면 다음 함수 실행 */
			$('.sub_menu').slideDown(); /* 서브메뉴가 슬라이드 다운(아래로 내려오면서 나타남) */
		});
		$('#quickmenu').mouseleave(function(){
			$('.sub_menu').slideUp(); /* 서브메뉴가 슬라이드 업(위로 올라가면서 사라짐) */
		});
	});
</script>

 

 

2. 서브 메뉴 하나씩 떨어지게 만들기

- ul li 안에 또 다른 ul li 가 들어 있는 구조

→ 바깥의 ul에 ul>li 처럼 '>'을 해줘야 아래의 서브 리스트에 속성(배경색 등)을 따로 지정해줄 수 있다.

→ '>' 표시를 해주지 않으면 ul 아래의 모든 li 에 속성이 적용됨

→ > : 바로 아래의 자식만 포함

 

- 마찬가지로 서브 메뉴는 display: none; 으로 숨겨두기

<ul id="quickmenu">
	<li><a href="#">Home</a>
		<ul class="sub_menu_list">
			<li><a href="#">홈</a></li>
			<li><a href="#">바로가기</a></li>
		</ul>
	</li>
	<li><a href="#">Blog</a>
		<ul class="sub_menu_list">
			<li><a href="#">일상</a></li>
			<li><a href="#">공부</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a>
		<ul class="sub_menu_list">
			<li><a href="#">네이버</a></li>
			<li><a href="#">티스토리</a></li>
		</ul>
	</li>
</ul>

#quickmenu{
	width: 610px;
}
		
#quickmenu>li{
	width: 200px;
	height: 30px;
	line-height: 30px;
	float: left;
	text-align: center;
	background-color: pink;
	margin-right: 5px;
}

.sub_menu_list{
	display: none;
}
				
.sub_menu_list li{
	background-color: skyblue;
}
	
#quickmenu li:last-child{
	margin-right: 0;
}

<script src="jquery-3.6.1.min.js"></script>
<script>
	$(document).ready(function(){
		
		$('#quickmenu>li').mouseover(function(){
			$(this).find('.sub_menu_list').stop().slideDown();
		});
        
		$('#quickmenu>li').mouseleave(function(){
			$(this).find('.sub_menu_list').stop().slideUp();
		});
        
	});
</script>

- toggle() 을 사용하면 한번만 사용해도 접었다, 폈다 할 수 있음

<script src="jquery-3.6.1.min.js"></script>
<script>
	$(document).ready(function(){
		
		$('#quickmenu>li').mouseover(function(){
			$(this).find('.sub_menu_list').stop().toggle();
		});
        
	});
</script>

 

* CSS 만으로 서브메뉴 나타나게 하기

#quickmenu>li:hover .sub_menu_list{
	display: block;
}

#quickmenu 아래의 li 에 호버시 sub_menu_list가 display:block; 으로 화면에 나타나게 하기

 

< 같은 결과 >