왼쪽에서 나오는 메뉴(왼쪽 높이와 오른쪽 높이가 같음)

제이쿼리 사용하여 만든 왼쪽에서 나오는 메뉴입니다.

 

왼쪽 높이와 오른쪽 높이가 같습니다.

 

아래의 코드 보시고 활용하시고 오늘도 좋은 하루 되세요.^^

 

<link type="text/css" rel="stylesheet" href="./reset.css">
		<style type="text/css">
		#footer { position:relative; height:150px; line-height:150px; text-align:center; background:#aaa; }

		#left { position:absolute; left:0; top:0; width:150px; background:#333; z-index:1; }
		#left div.left_inner { position:relative; background:#333; }
		#left h1 { padding:20px 0 0 20px; font-size:25px; }
		#left a {; color:#fff; }
		#left ul#gnb { padding:20px 0 20px 20px; background:#333; }
		#left ul#gnb > li { margin-top:20px; }
		#left ul#gnb > li:first-child { margin-top:0; }
		#left ul#gnb > li > a { display:block; }
		#left ul#gnb div.sub { position:absolute; left:0; top:0; width:150px; background:#000; z-index:-1; }
		#left ul#gnb div.sub ul { padding:70px 20px 20px 20px; }
		#left ul#gnb div.sub ul li { margin-top:10px; }
		#left ul#gnb div.sub ul li:first-child { margin-top:0; }

		#right { position:relative; margin-left:150px; width:800px; background:#eee; }
		#right div.content { padding:30px; }
		</style>

		<div id="wrap">
			<div id="left">
				<div class="left_inner">
					<h1><a href="#">Logo</a></h1>
					<ul id="gnb">
						<li>
							<a href="#">Menu1</a>
							<div class="sub">
								<ul>
									<li><a href="#">SubMenu1-1</a></li>
									<li><a href="#">SubMenu1-2</a></li>
									<li><a href="#">SubMenu1-3</a></li>
								</ul>
							</div>
						</li>
						<li>
							<a href="#">Menu2</a>
							<div class="sub">
								<ul>
									<li><a href="#">SubMenu2-1</a></li>
									<li><a href="#">SubMenu2-2</a></li>
									<li><a href="#">SubMenu2-3</a></li>
								</ul>
							</div>
						</li>
						<li>
							<a href="#">Menu3</a>
							<div class="sub">
								<ul>
									<li><a href="#">SubMenu3-1</a></li>
									<li><a href="#">SubMenu3-2</a></li>
									<li><a href="#">SubMenu3-3</a></li>
								</ul>
							</div>
						</li>
						<li>
							<a href="#">Menu4</a>
							<div class="sub">
								<ul>
									<li><a href="#">SubMenu4-1</a></li>
									<li><a href="#">SubMenu4-2</a></li>
									<li><a href="#">SubMenu4-3</a></li>
								</ul>
							</div>
						</li>
						<li>
							<a href="#">Menu5</a>
							<div class="sub">
								<ul>
									<li><a href="#">SubMenu5-1</a></li>
									<li><a href="#">SubMenu5-2</a></li>
									<li><a href="#">SubMenu5-3</a></li>
								</ul>
							</div>
						</li>
						<li>
							<a href="#">Menu6</a>
							<div class="sub">
								<ul>
									<li><a href="#">SubMenu6-1</a></li>
									<li><a href="#">SubMenu6-2</a></li>
									<li><a href="#">SubMenu6-3</a></li>
								</ul>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<!-- // left -->
			<div id="right">
				<div class="content">
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
					<div>123</div>
				</div>
			</div>
			<!-- // right -->
			<div id="footer">
				Footer
			</div>
		</div>
		<!-- // wrap -->

		<!-- 스크립트 -->
		<script type="text/javascript">
		$(window).on('load', function(){
			var left = $('.left_inner'),
				right = $('#right'),
				sub = $('.sub'),
				lh = left.outerHeight(true),
				rh = right.outerHeight(true);
			if(lh < rh){
				left.css('height', rh);
				sub.css('height', rh);
			}else{
				right.css('height', lh);
				sub.css('height', lh);
			}
			$('#gnb > li > a').on('mouseover focus', function(){
				$('.sub').stop().animate({'left':0}, 300);
				$(this).next().stop().animate({'left': '150px'}, 300);
			});
			$('#gnb').on('mouseleave', function(){
				$('.sub').stop().animate({'left':0}, 300);
			});
		});
		</script>
		<!-- // 스크립트 -->

 

혹시 내용이 도움 되었다면 유튜브 채널오셔서 다양한 정보 보시고

 

구독과 좋아요 부탁드립니다.

 

감사합니다.

 

스톤모두 유튜브 무료 강의 : https://www.youtube.com/channel/UCZUPZrlC-A8u4Y8KbU0HUvQ?sub_confirmation=1

스톤모두 네이버 스토어 : https://smartstore.naver.com/stonemodoo

스톤모두 모두홈페이지 : https://stone.modoo.at/

스톤모두 워드프레스 홈페이지 : https://stonemodoo.com/