CSS HTML jQuery-Ajax Tutorials

How to Create Simple Sliding Menu Using CSS & jQuery





There are plenty of Responsive menus on the net, which you can incorporate within your project to make an exciting navigation system. But more often than not we end up fixing and tweaking things with those menus! So today let’s focus on creating our own simple sliding navigation menu which will fit any screen size and also looks great.

slidebar-nav-menu

HTML

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.

CSS Style

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.

jQuery

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

That’s it, you can further improve this code by adding various functions like disabling scrollbar, changing colors and designs and hopefully making it better. I am eager to hear your experience, please do share by commenting below

View Demo Here








 

Related Post

Share this
  • 6
    Shares

Leave a Reply

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