There are plenty of Responsive menus on the net, which you can incorporate within your project and make an exciting navigation system. But it’s always not easy to achieve desired menu unless you are using some jQuery plugins or one of the CSS framework that comes with inbuilt responsive menu. So today let’s create a simple sliding navigation menu which will fit any screen size and also looks great.
Let’s start by writing the HTML code for the menu. As you can see we have one overly element, a close button and rest are menu links.
I have applied the CSS transition property, which will make our menu sliding smooth. To position the menu bar to right or left of the browser, just change left to right. You must also need to make changes in jQuery code below.
The CSS should work on all modern browsers except IE8 and IE9, but you can always play around until you are satisfied with the look.
In jQuery code we simply change the CSS property of the menu using jQuery .CSS(), since we’ve enabled CSS transition, it should take care of the sliding animation without the help of jQuery.