မင်္ဂလာပါရှင့်။

ညီမကတော့ Spiceworks Myanmar Company  တွင် Web Designer အဖြစ် ဝင်ရောက် အလုပ်လုပ်ကိုင်နေတဲ့ မဇင်နုထွေး ဖြစ်ပါတယ်ရှင့်။
ဒီတစ်ပတ်မှာတော့ header menu ရေးနည်းပုံစံအမျိုးမျိုးရှိတဲ့ အထဲကမှ Hamburger Menu ရေးနည်းလေးအကြောင်းကို အနည်းငယ်ရှင်းပြပေးသွားမှာဖြစ်ပါတယ်။
ပထမဆုံးအနေနဲ့ မိမိတို့ လိုချင်တဲ့ menu item အရေအတွက်ပေါ်မူတည်ပြီး အောက်ပါအတိုင်း html code ကိုရေးရပါမည်။
HTML code

<div class="common_menu">
           <div class="menu_content">
               <ul class="row common_menu_list clearfix">
                   <li class="grid_01 grid_sp_01">
                        <ul class="row list_01 clearfix">
                            <a href="/profile">
                                <li class="grid_01">
                                    <div class="menu_item">Profile</div>
                                </li>
                            </a>
                            <a href="/team">
                                <li class="grid_01">
                                    <div class="menu_item">Team</div>
                                </li>
                            </a>
                            <a href="/services">
                                <li class="grid_01">
                                    <div class="menu_item">Services</div>
                                </li>
                            </a>
                            <a href="/projects">
                                <li class="grid_01">
                                    <div class="menu_item">Projects</div>
                                </li>
                           </a>
                  </ul>
               </li>
           </ul>
       </div>
 </div>

ပုံတွင်ပြထားသည့်hamburger menu icon ဖြစ်လာရန် အောက်ပါအတိုင်း HTML code နှင့် CSS code အားရေးရပါမည်။
HTML code

<div class="btn_menu">
 <div class="icon_menu">
 <span></span>
 </div>
 </div>

CSS code

header .icon_menu:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 4px;
	background: #ffffff;
}
header .icon_menu span{
	position: absolute;
	top: 50%;
	left: 0;
	-webkit-transform: translateY(-50%);
	   -moz-transform: translateY(-50%);
	    -ms-transform: translateY(-50%);
	     -o-transform: translateY(-50%);
	        transform: translateY(-50%);
	width: 100%;
	height: 4px;
	background: #ffffff;
}
header .icon_menu:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width:100%;
	height: 4px;
	background: #ffffff;
}

Hamburger menu iconအား click ပြီး menu ပွင့်လာသည့်အချိန်တွင် cross ပုံစံအဖြစ်ပြောင်းလဲလို၍ css file ထဲတွင် အောက်ပါအတိုင်းရေးရပါမည်။
CSS code

header .btn_menu.is_active .icon_menu:before{
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(45deg);
	   -moz-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	     -o-transform: rotate(45deg);
	        transform: rotate(45deg);
}

header .btn_menu.is_active .icon_menu span{
	opacity: 0;
}
header .btn_menu.is_active .icon_menu:after{
    content: "";
    position: absolute;
    bottom: 13px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #ffffff;
    -webkit-transform: rotate(-45deg);
	   -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	     -o-transform: rotate(-45deg);
	        transform: rotate(-45deg);
}

ထို css code အားရေးပြီးလျှင် အောက်ပါပုံအတိုင်းပေါ်လာပာမည်။

Hamburger icon အား click နှိပ်လျှင် menu item များပေါ်လာစေရန်အရေးကြီးဆုံးအနေနဲ့html file တွင်
အောက်ပါ jquery.min.js အားချိတ်ရပာမည်။
HTML code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

jquery.min.js အား ချိတ်ပြီးလျှင် အောက်ပါ js code အားရေးရပါမည်။
JS code

$( "header .btn_menu" ).click(function(event) {
 if ($(this).hasClass('is_active')) {
      $('body').css('overflow','auto');
      $('header .common_menu').css('display','none');
      $('header .common_menu').removeClass('is_active')
      $(this).removeClass('is_active');

  }else{
      $('body').css('overflow','hidden');
      $('header .common_menu').css('display','block');   
      setTimeout((function() {
        $('header .common_menu').addClass('is_active');
      }), 300);
      
      $(this).addClass('is_active');
  }
});

အထက်တွင်ဖော်ပြပြီးခဲ့သော code များအတိုင်းရေးပြီးလျှင် လိုချင်တဲ့ Hamburger Menu ရလာပါမည်။အချိန်ပေးပြီးဖတ်ရှုပေးခဲ့ကြတဲ့အတွက် ကျေးဇူးတင်ပါတယ်ရှင့်။