0%

Hey! Do you have any query related to front end?

Sign in Sign up

Side pusher hamburger menuBack

About hamburger menu:

Side pusher hamburger menu is to display some links on the same page but in hidden form. This way you can put more content on the page.

Pusher hamburger menu HTML

ArrowHamburger Menu

CSS required for hamberger menu:

.hamburgerMenu{
    ................
    top:0;
    right: 0;
    position: fixed;
    width: 16%;
    z-index: 1;
    .................
    .................

}

Animation CSS applied:

CSS3 transition CSS has been applied to these elements: .hamburger class and .contentSection class, for slide in and slide out.

.hamburgerMenu{
    ................
    transition: right ease-out .5s;
    .................
    .................

}

and

.contentSection{
   .................
    transition: margin-left ease-out .5s;
    ................
    ................
}

jQuery required:

//Calculate window height on document ready
var winH = $(window).height();

Assign height to hamburger menu.

//Declare a function ahich will set win h to any element pass as parameter 
function setObjWinH(elem){
	$(elem).css("height",winH+"px");
}

//Call function which will assign window height to hamburger class element
setObjWinH(".hamburgerMenu");

Now add click event to hamburger anchor class element.

//Set click event to side anchor point
$(".hamburgerMenu span.anchor").click(function(){
//Check if hamburger menu has shiefted right or not
	if($(this).parents(".hamburgerMenu").css("right") == "0px"){

		//If shifted then set bg to anchor, animate hamburger and content area accordingly
		$(this).css("backgroundPosition","0 center");
		$(this).parents(".hamburgerMenu").css("right","-"+hamburgerW+"px");
		$(".contentSection").css("marginLeft","0");
	}else{

		//If not animated then set bg to anchor, animate hamburger and content area accordingly 
		$(this).css("backgroundPosition","-60px center");
		$(this).parents(".hamburgerMenu").css("right","0");
		$(".contentSection").css("marginLeft","-"+hamburgerW+"px");
	}
	
});

Concept behind this:

The main concept behind this example is listed below:

1. Animate hamburger menu by left or margin-left property.
2. At the same time animate content container by left or margin-left property.
3. Add class class or style accordingly.

And you are done.

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Removing file extension

    Remove file extension via .htaccess

    • 1
    • 0
    • 1
    • facebook icon
    • twitter icon
    • google plus
  • Real time content edit

    Edit content at client side.

    • 189
    • 1
    • 189
    • facebook icon
    • twitter icon
    • google plus
  • Load images visible to user after page load

    Load only those image which is visible to visitor

    • 322
    • 8
    • 322
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 3 years ago

amit singhabout 3 years ago

rahmat aliabout 3 years ago

mandavi tiwariabout 3 years ago

rahul sharmaabout 3 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back
Username
Password