Need help. How did this website make this slide menu?

[perochan]

Hi guys,

 

I came across this site and was wondering how did this  website did the right side menu bar when you click the top right 3 horizontal bar icon? 

 

When you click the 3 horizontal bar icon on the top right corner, a menu slide right out from the right side of browser. Are they using modified jquery UI dialog?

 

any help would be appreciated. :)

 

 

This link to the website

 

http://usepanda.com/app/

 

 

[Ian S.]

Funny you should ask, Neowin's FRONT PAGE has the same style slideout, you should PM Timan or something.

[perochan]

Funny you should ask, Neowin's FRONT PAGE has the same style slideout, you should PM Timan or something.

 

you mean the top menu? if so, that is only on hover. 

 

I want it to stay even when my mouse is out of the way. It is like open a window menu where I can input like form and stuff like that.

[Ian S.]

Sorry, forgot I was in snap view. When you resize (or snap) the front page, it responsively resizes to show a hotdog menu. 

 

See:

[macoman]

Timan may suggest you to learn how to do it, but I don't think he is going to tell you exactly what he did... Top secret ;-)

[xWhiplash]

It is usually most common to use the new CSS3 style to translate2d in the x direction.

transform: translatex(x);

Where x is a pixel value.  

 

When your menu is closed, you will want to translate your navigation to the right:

transform: translatex(-w)

Where w is the width of the navigation element.

 

When you click on the menu bars, you apply a new CSS style to the container (usually labeled as open).  Then with CSS, you can add another style when the parent element has the open class like so:

.open > .nav
{
     transform: translate(0);
}

To animate it, you can use the CSS3 property transition:

transition: translate 1s ease-in-out;

That will transition all translate changes for 1 second while easing in and out.

 

Obviously you will want to use javascript as a fallback if CSS3 is not supported by your client's browsers.  Or you can just leave them hanging which is what I do.  I make sure my pages work in IE8+.  All the extra stuff is just a bonus if they have newer browsers.  I do not bother replicating features to older browsers, but I make sure my page looks good in IE8 before I add any of these extras.

 

You might also want to set it to display: none when it is closed so you do not get scroll bars on your page.

[Seahorsepip Veteran]

Are they using modified jquery UI dialog?

http://usepanda.com/app/

Not everything is made with the jquery UI framework, I hate it personally  :pinch:

 

http://jsfiddle.net/jdLty9ok/1/

 

Here's a quick jsfiddle, I didn't even use javascript so it will even work when js is disabled.

It is usually most common to use the new CSS3 style to translate2d in the x direction.

transform: translatex(x);

Where x is a pixel value.  

 

When your menu is closed, you will want to translate your navigation to the right:

transform: translatex(-w)

Where w is the width of the navigation element.

 

When you click on the menu bars, you apply a new CSS style to the container (usually labeled as open).  Then with CSS, you can add another style when the parent element has the open class like so:

.open > .nav
{
     transform: translate(0);
}

To animate it, you can use the CSS3 property transition:

transition: translate 1s ease-in-out;

That will transition all translate changes for 1 second while easing in and out.

 

Obviously you will want to use javascript as a fallback if CSS3 is not supported by your client's browsers.  Or you can just leave them hanging which is what I do.  I make sure my pages work in IE8+.  All the extra stuff is just a bonus if they have newer browsers.  I do not bother replicating features to older browsers, but I make sure my page looks good in IE8 before I add any of these extras.

 

You might also want to set it to display: none when it is closed so you do not get scroll bars on your page.

Why use translate for something like this when "right: -sidebarwidth;" is better supported?

[xWhiplash]

Not everything is made with the jquery UI framework, I hate it personally  :pinch:

 

http://jsfiddle.net/jdLty9ok/1/

 

Here's a quick jsfiddle, I didn't even use javascript so it will even work when js is disabled.

Why use translate for something like this when "right: -sidebarwidth;" is better supported?

 

As I said, it is MOST COMMON that sites like that use the transform property.  Even the site he linked to had this:

#menu.opened {
  -webkit-transform: translate(-260px);
  -moz-transform: translate(-260px);
  -o-transform: translate(-260px);
  -ms-transform: translate(-260px);
  transform: translate(-260px);
}

Squarespace does something similar.  They slide the container instead of the navigation though:

.not-safari .is--pushed-left .layout, .not-safari .is--pushed-left .navigation-actions 
{
     -webkit-transform: translate3d(-260px,0,0);
     -moz-transform: translate3d(-260px,0,0);
     -ms-transform: translate3d(-260px,0,0);
     -o-transform: translate3d(-260px,0,0);
     transform: translate3d(-260px,0,0);
}

Also, the transition property is less supported than the transform property.  So if you are using CSS3 transition, might as well use CSS3 transform and provide smoother animations.

[perochan]

Timan may suggest you to learn how to do it, but I don't think he is going to tell you exactly what he did... Top secret ;-)

 

Well, I intent to learn it.

 

Thanks, xWhiplash and Seahorsepip. I will play around on both properties and see what works the best for me.

 

appreciated.

[Richard Grant]

First off, don't use 3rd party libraries.

 

I didn't take the time and look at there source code but i will tell you what i would have done.

 

You have the CSS3 option (which is much more effective for animation)

and you have the JavaScript options (problems with safari and firefox)

 

Step 1 know you audience:

Most Linux users use either: Firefox or Safari

Most Windows users use: Chrome, FireFox

Other common browsers: Opera & Internet explorer

 

Don't forget about text based browsers! (for the blind, they can use narrators)

 

 

Step 2 Target an audience:

We know your going to be making a graphical website with animation so we will prioritize:

FireFox, Chrome, Safari

 

We will also support Internet explorer & text based browsers.

 

Step 3 write it:

similar to what you want.

<style type="text/css">
#menu_wrapper{
	transition: 1s;
	position:relative;
    left: 0;
    width:200px;
    height:400px;
    background-color: blue;
}
.show{
	transition: 1s;
    right: 200px;
    display:block;
}
.none{
	transition: 1s;
    right: 0px;
	display:none;
}
#menu_body{
	width:100%;
	height:100%;
	background-color:red;
}
#menu_toggle{
	background-color:green;
	width:100%;
	height:40px;
}
</style>
<script type="text/javascript">
function menu_wrapper(e){
	if(e.parentNode.getAttribute("class") == "show"){
		e.parentNode.style.display = "none";
	}else{
		e.parentNode.style.display = "block";
	}
}
</script>
<div id="menu_wrapper" class="show">
<!-- Written by Richard_Grant -->
	<div id="menu_togge" onclick="menu_wrapper(this)">
		<!-- Add your own html-->
	</div>
	<div id="menu_body">
		
	</div>
</div>

Make sure you can support CSS3