Design

Hamburger Menu

မဂၤလာပါရွင့္။

ညီမကေတာ့ 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 ရလာပါမည္။အခ်ိန္ေပးၿပီးဖတ္ရႈေပးခဲ႔ၾကတဲ႔အတြက္ ေက်းဇူးတင္ပါတယ္ရွင္႔။

Hello

Leave a Reply

Your email address will not be published. Required fields are marked *