본문 바로가기
FE 개발/JavaScript

제이쿼리 모바일 햄버거 메뉴 jQeury mobile burger menu

by Daniel Roh 2023. 6. 24.
반응형

 

제이쿼리 모바일 햄버거 메뉴
jQeury mobile burger menu

 

모바일 환경에서 기본으로 제공되는 햄버거 메뉴를 제이쿼리를 통해 구현해 놓았던 소스 이번 프로젝트에서는 보안 이슈도 있고 기술 블로그 하나쯤은 운영하고 싶어서 이번 기회에 끄적여 본다.

 

들어가기에 앞서

제이쿼리는 요즘은 많이 쓰이지 않는 자바스크립트 라이브러리 중 하나지만 유지관리나 신규 기능 같은 프로젝트를 진행하기 위해서는 알아두어야 하기 때문에 아니 잊지 않으려고 저장해 두고 있다. 많이들 알고 있듯이 개발 환경에 따라 CDN방식을 사용해도 되며, 로컬에 설치하고 사용해도 된다.

<!doctype html>
<html lang="ko">
<head>
  <script src="../../js/jquery-3.5.1.min.js"></script>
  <script src="../../js/jquery-ui.min.js"></script>
</head>
...
</html>
<!doctype html>
<html lang="ko">
<head>
  <!-- google -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <!-- CDNJS -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
</head>
</html>

이번 프로젝트는 아무래도 로컬에 설치하여 진행하는 프로젝트가 될듯하다.

 

 

HTML

이번 프로젝트는 아무래도 로컬에 설치하여 진행하는 프로젝트가 될듯하다.

<!-- S header -->
<header id="header">
    <div class="wrap">
        <h1 class="logo"><a href="#url"><img src="images/common/logo.png" alt="로고"></a></h1>
        <!-- S gnb -->
        <div class="gnb" id="gnb">
            <div id="oe_overlay" class="oe_overlay"></div>
            <div class="oe_wrapper">
                <ul id="oe_menu" class="oe_menu">
                    <li><a href="#url">대메뉴01</a>
                        <div class="depth2">
                            <ul>
                                <li><a href="#url">소메뉴01</a></li>
                                <li><a href="#url">소메뉴02</a></li>
                                <li><a href="#url">소메뉴03</a></li>
                                <li><a href="#url">소메뉴04</a></li>
                                <li><a href="#url">소메뉴05</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#url">대메뉴06</a>
                        <div class="depth2">
                            <ul>
                                <li class="oe_heading">소메뉴01</li>
                                <li class="oe_heading">소메뉴03</li>
                            </ul>
                        </div>
                    </li>
                </ul>	
            </div>
        </div>
        <!--// E gnb -->
        <div class="menuArea">
            <ul>
                <li><a href="#url" target="_blank" class="fontEng">ENG</a></li>
                <li><a href="#allMenu" class="menuAll" id="popMenu"><img src="images/common/menu.png" alt="전체메뉴"></a></li>
            </ul>
        </div>
    </div>
</header>
<!--// E header-->

 

 

 

CSS

#header .gnb {position:absolute;left:200px; width:auto;height:100px;line-height:100px;clear:both;}
#header .gnb .oe_wrapper{position:relative;margin:0 auto;width:1000px;}
#header .gnb .oe_menu{width:1000px;}
#header .gnb .oe_menu li{display:inline;width:16.66%;float:left;}
#header .gnb .oe_menu li a{display:inline-block; width: 100%; font-size:18px; line-height: 60px; color: #333; font-weight:700; text-align: center; padding:0;}
#header .gnb .oe_menu li a:hover,
#header .gnb .oe_menu li.active > a{color:#108adf;}

#header .gnb .oe_menu li .depth2{display:none; position:absolute;top:100px;left:0; background:transparent; width:100%;height:250px;float:right;}
#header .gnb .oe_menu li:nth-child(3) .depth2{margin-left:180px;}
#header .gnb .oe_menu li:nth-child(4) .depth2{margin-left:500px;}
#header .gnb .oe_menu li:nth-child(5) .depth2{margin-left:500px;}
#header .gnb .depth2 ul{box-sizing:border-box;width:16.66%;min-height:250px;float:left;}
/*#header .gnb .depth2 ul:first-child{border-left:1px dotted #ddd;}*/
#header .gnb .depth2 li{margin-bottom:5px;width:100%;height:20px;line-height:20px;clear:both;}
#header .gnb .depth2 li a{display:block;padding-left:40px; height:20px;line-height:20px; font-weight:300;color:#666;font-size:14px;text-align:left;}
#header .gnb .depth2 li a:hover{color:#666}
#header .gnb .depth2 .oe_heading{ margin:20px 0; height:30px; line-height:30px;color:#108adf;font-size:18px;font-weight:400;text-align:center;}
#header .gnb .depth2 .oe_heading a{background:none; padding-left:0;height:30px; line-height:30px;color:#108adf;font-size:18px;font-weight:400;text-align:center;}
#header .gnb .depth2 .oe_heading a:hover{color:#108adf}

 

 

 

jQuery

// GNB new
$("#gnb").ready(function () {
	var $oe_menu	= $('#oe_menu');
	var $oe_menu_items	= $oe_menu.children('li');
	var $oe_overlay	= $('#oe_overlay');

	$oe_menu_items.bind('mouseenter',function(){
		var $this = $(this);
		$this.addClass('slided selected');
		$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
			$oe_menu_items.not('.slided').children('div').hide();
			$this.removeClass('slided');
		});
	}).bind('mouseleave',function(){
		var $this = $(this);
		$this.removeClass('selected').children('div').css('z-index','1');
	});

	$oe_menu.bind('mouseenter',function(){
		var $this = $(this);
		$oe_overlay.stop(true,true).slideDown(200);
		$this.addClass('hovered');
	}).bind('mouseleave',function(){
		var $this = $(this);
		$this.removeClass('hovered');
		$oe_overlay.stop(true,true).slideUp(200);
		$oe_menu_items.children('div').hide();
	});
	$oe_menu_items.bind('focusin',function(){
		var $this = $(this);
		$this.addClass('slided selected');
		$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
			$oe_menu_items.not('.slided').children('div').hide();
			$this.removeClass('slided');
		});
	});
	$oe_menu.bind('focusin',function(){
		var $this = $(this);
		$oe_overlay.stop(true,true).slideDown(200);
		$this.addClass('hovered');
	});
});

// menu all
$("#gnb").ready(function () {
	$(".menuAll").mouseenter(function () {
		$("#oe_overlay").hide();
	});
	$(".menuAll").focusin(function () {
		$("#oe_overlay, .depth2").hide();
	});
});


// mobile
$("#mMenu").ready(function () {
	$('.openBtn').on('click', function(){
		$('body').css('overflow','hidden');
		$('body').css('height','100%');
		$('.menuBg, .mMenuArea').show();
		$('.mMenuArea').animate({
			right:0
		});
	});
	$('.closeBtn, .menuBg').on('click', function(){
		$('body').css('overflow','scroll');
		$('body').css('height','auto');
		$('.menuBg, .mMenuArea').hide();
		$('.mMenuArea').animate({
			right: '-' + 80 + '%' 
		});
	});
});

$(".mMenuArea").ready(function () {
	$('.submenu, .submenu2').hide();
	$('.menuWrap a').click(function () {
		// $(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('.submenu, .submenu2').slideUp();
		}
		else {
			element.addClass('open');
			element.children('.submenu, .submenu2').slideDown();
			element.siblings('li').children('.submenu, .submenu2').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('.submenu, .submenu2').slideUp();
		}
	});
});

 

 

반응형

'FE 개발 > JavaScript' 카테고리의 다른 글

[반응형 UI] PC Mobile 한번에 사용가능 한 제이쿼리(jQuery) 햄버거 GNB 메뉴  (1) 2024.01.04
제이쿼리 jQuery 햄버거 메뉴 만들기  (0) 2023.06.24

관련글

티스토리툴바