# 24.메뉴

# 1. 요소의 크기 얻기

CDN
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>

<div class="box">box</div>

jQuery
console.log('height:' + $('.box').height()); //
console.log('innerHeight:' + $('.box').innerHeight());
console.log('outerHeight:' + $('.box').outerHeight());

메서드	설명
`height()`	선택한 요소의 높이를 반환하거나 설정합니다. 패딩(padding), 보더(border), 마진(margin)은 포함하지 않습니다.
`innerHeight()`	선택한 요소의 높이를 반환하거나 설정합니다. 패딩(padding)은 포함하지만, 보더(border), 마진(margin)은 포함하지 않습니다.
`outerHeight()`	선택한 요소의 높이를 반환하거나 설정합니다. 패딩(padding)과 보더(border)가 포함되며, 선택적으로 마진(margin)을 포함할 수 있습니다.

VanillaJS
console.log('height:' + document.querySelector(".box").clientHeight;
console.log('offsetHeight:' + document.querySelector(".box").offsetHeight;
console.log('outerHeight:' + document.querySelector(".box").scrollHeight;

속성	설명
`element.clientHeight`	요소의 내부 높이(픽셀)를 반환합니다. 패딩(padding)은 포함하지만, 테두리(border), 마진(margin), 스크롤바는 포함하지 않습니다.
`element.offsetHeight`	요소의 전체 높이(픽셀)를 반환합니다. 패딩(padding), 테두리(border), 그리고 수평 스크롤바(있는 경우)를 포함합니다. 마진(margin)은 포함하지 않습니다.
`element.scrollHeight`	요소의 전체 높이(픽셀)를 반환합니다. 스크롤된 내용과 패딩(padding)을 포함합니다. 하지만 테두리(border), 마진(margin), 스크롤바는 포함하지 않습니다.

# 투뎁스 구조작성

실행화면

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<header>
			<nav>
				<ul class="df">
					<li>
						1st menu
						<ul>
							<li>2nd menu</li>
							<li>2nd menu</li>
							<li>2nd menu</li>
							<li>2nd menu</li>
							<li>2nd menu</li>
						</ul>
					</li>
					<li>
						1st menu
						<ul>
							<li>2nd menu menu</li>
							<li>2nd menu</li>
						</ul>
					</li>
					<li>
						1st menu
						<ul>
							<li>2nd menu</li>
							<li>2nd menu</li>
						</ul>
					</li>
					<li>
						1st menu
						<ul>
							<li>2nd menu</li>
							<li>2nd menu</li>
						</ul>
					</li>
				</ul>
			</nav>
		</header>
		<script src="http://code.jquery.com/jquery-1.3.1.min.js"></script>
		<!-- <script src="js/script.js"></script> -->
		<script src="js/script2.js"></script>
	</body>
</html>

* {
	margin: 0;
	padding: 0;
}
ul li {
	list-style: none;
}
.df {
	display: flex;
}
body {
	background: green;
	overflow-y: scroll;
}
header {
	margin-top: 20px;
	background: linear-gradient(white 50px, rgba(255, 255, 255, 0.5) 50px, rgba(255, 255, 255, 0.5));
	height: 50px;
	overflow: hidden;
	transition: all 1s;
}
header.active {
	margin-top: 20px;
	background: linear-gradient(black 50px, rgba(0, 0, 0, 0.5) 50px, rgba(0, 0, 0, 0.5));
	height: 50px;
	overflow: hidden;
}
header.active a,
header.active li {
	color: #fff;
}

nav {
	width: 960px;
	margin: 0 auto;
}
nav > ul > li {
	line-height: 50px;
	padding: 0 40px;
	position: relative;
}
nav > ul > li:hover {
	background-color: red;
}
nav > ul > li ul {
	width: 100%;
	display: block;
	position: absolute;
}
nav > ul > li ul li {
	white-space: nowrap;
}

jQuery
var mainmenu = $('nav > ul > li '), //원뎁스 li 할당
	subMenu = mainmenu.find('ul'), //투뎁스 ul 할당
	header = $('header'), //header 할당
	headerHeight = header.height(), //header 높이할당
	subMenuHeight = subMenu.height(), //subMenu 높이할당
	totalHeaderHeight = headerHeight + subMenuHeight + 30; //totalHeaderHeight 변수에 header 높이+subMenu높이 할당

mainmenu.mouseenter(function () {
	header
		.addClass('active')
		.stop()
		.animate({ height: totalHeaderHeight + 'px' }, 300);
});
mainmenu.mouseleave(function () {
	header
		.removeClass('active')
		.stop()
		.animate({ height: headerHeight + 'px' }, 300);
});

vanillaJS
const mainmenu = document.querySelectorAll('nav > ul > li'); // 원뎁스 li 할당
const header = document.querySelector('header'); // header 할당

mainmenu.forEach((menu) => {
	const subMenu = menu.querySelector('ul'); // 투뎁스 ul 할당

	menu.addEventListener('mouseenter', function () {
		const headerHeight = header.clientHeight; //header 높이할당
		const subMenuHeight = subMenu.clientHeight; // subMenu 높이 할당
		const totalHeaderHeight = headerHeight + subMenuHeight + 30; // totalHeaderHeight 변수에 header 높이+subMenu 높이 할당

		header.classList.add('active');
		header.style.transition = 'all 0.5s';
		header.style.height = totalHeaderHeight + 'px';
	});

	menu.addEventListener('mouseleave', function () {
		header.classList.remove('active');
		header.style.transition = 'all 0.5s';
		header.style.height = 'auto';
	});
});

jquery jquery + javascript 메뉴 ui