Sliding Jquery Menu

You can see the effect in action over on the PSDtuts webpage in the top right hand corner. Oh yes and before I forget you can download the source files for free using the button above.

When the button is clicked it rolls out a box full of links, when the button is clicked again it rolls back in. This can be done using jquery and in this tutorial il show you how to do it. Right lets get started, firstly lets get our button done out the way so we can then focus on the code. Open up photoshop and create a new document with your desired size of button, your button can be any size your wish. I'm using a size of 182 x 32 pixels, double click your background layer and add a simple gradient overlay.

On the right hand side of your button add a little white arrow and a vertical divider. The divide consists of two colors #302f2f & #252525.

On the left side add your little icon and some text, I don't think I need to go into too much detail on the button design, as you'll make your own to suit your own site. Here's how mine looks. (save your button image into your images folder)

Now for the exciting bit open up notepad and save a blank notepad document as styles.css, save the file into a folder called sliding menu on your desktop. Once saved close notepad, open up your folder "sliding menu" create two new folders one called js and another called images. Goto the main jquery webpage and download the jquery library "jquery-1.3.1.min.js" rename the file to just "jquery" and stick it into the folder js. Open up dreamweaver and create a new HTML file save the file straight away inside your sliding menu folder. (filename for the HTML file doesn't matter call it what you like, sliding_menu.html might be a good idea.) Now your in dreamweaver click the code view tab.

The most import thing we need to do first is reference our javascript and css files we do this by typing this chunk of code within the "HEAD TAGS".

You will notice there are 3 files we have referenced styles.css, jquery.js and a third slider.js (but I haven't got a slider.js file I hear you cry.) We need to create that now, open up notepad and save a blank notepad document as slider.js, save it inside your js folder. Open up your slider.js file inside dreamweaver and type out the code below.

Let me explain the code above the 1st line means when the document is loaded run the function in our case the sliding menu. The next line means once an image with a class of menu_class is clicked the menu will slide which brings me down to line 3. The menu will toggle down at a medium speed. You can change the speed if you wish from slow, medium or fast. The second and third line are important as they hold key elements referring to our CSS file which is img.menu_class and ul.the_menu. We haven't wrote these yet but will do when we begin to write out our menu. Head over to your HTML in the code view so we can begin to write out our menu.

The first bit of code you see is a simple image which is our button, we specify the width and height of our button we also give it a class. The class will be the images unique anchor point for the js file which we have already wrote. The class also lets us apply any styles via css using the class .menu_class. After that we have a simple unordered list. If we take a look at our menu in our browser this is how it looks.

Open up your CSS file in dreamweaver. Lets set a few style for the main part of our document.

Just some simple text and background styling is needed, set your font family and desired font size, I've also changed the background from white to a darkish gray color. The next bit of styling were going to add is for the ordered and unordered lists, were also going to apply a border to our button image, you may do your border in photoshop on the actual image but I find it best to add it using CSS as changing a bit of code is easier then opening up photoshop to change it.

The next bit of css styling refers to the menu that drops down once the button is clicked.

In these styles you can change the width of the open menu, mine has a width of 300px but this can be what ever you like. I've also given it a 1px border the same as our button. The next bit of styling refers to the background color of our rolled out navigation and also the text colors, sizes and hovers.

The_menu li is the color of the background when the navigation is rolled out, the text in the navigation links wont have any line underneath them as we have used text-decoration:none, we have also spaced out our links by adding 10px padding all the way around our links we also want to display the links in a block. The hover styles are pretty simple, padding the same as the last style, font weight bold = bold text and the color changed to a pinkish color. That's it for the styles you menu should be ready to test. Here's mine.

Just a quick point on positioning, don't use div align to center or right align your button as the rollout will not be aligned up properly, if you want to align your menu button properly wrap it in its own div and position div how you see fit.

See what you can come up with, maybe add some icons to your list objects. Thanks for reading, don't forget to subscribe VIA rss and twitter.

Related Articles

• Sliding Jquery Menu
  Usable web design implies smart usage of a page space. A sliding menu is sure to come into place when you want to give your visitors more control over what they see on your site.
• Jquery Fade In.Fade Out
  In this tutorial Ill show you some simple effects you can use to spice up your websites using jquery.
• jQuery Examples - Horizontal Accordion
  Up until now I have always used Scriptaculous / Prototype for any Java Script animation and effects, but lately Ive heard a lot of good things about jQuery. So, I thought I would give it a try, and start doing some experiments.
• JQuery Navigation
  Besides stunning web design navigation is sure to play decisive role in a final impression of a site. Fade in fade out visual effect is sure to make your menu bar more attractive.
• Common Elements for Website Pages (Exclusive Article)
  Among the common elements for all website pages, I have in mind those elements which are on all pages of the site, elements such as the menu, a tablet with counters, ?the hat?. Often with such elements there can be BIG problems. For example, youve decided to place a new counter, youve registered.....
• CSS Menu Using JavaScript (Revised)
  noticed a flaw with my original JavaScript drop down menu regarding customization using CSS. The problem was this; the LI elements below the #divs that were hidden didnt conform to their own CSS customization and stuck with the rules of the above LIs.
• ASP : SSI Another Way
  This is another SSI tutorial written by a friend, it shows another way of looking at SSI and also shows you some new tricks and tips.
• PHP and Web Design
  Note 1: You dont have to know PHP programming to do this tutorial. Note 2: I assume that your server supports files with .php extension. If not, you wont be able to do this tutorial. For more info on how to install PHP on your PC go to Php.net...
• How To Easily Create A Search-Engine Friendly Navigation Menu For Your Website
  A navigation menu is an important element of a website. A good navigation menu helps your visitors navigate through your website efficiently - in as few mouse-clicks as possible.
• Create Cool Site Navigation In A Flash
  So you were just at a website and were so impressed with their navigation bar you want something just as cool for your own site. No problem. If you know where to look youll find plenty of generators that will allow you to easily pump out some very slick menus.

Contact Web Design Outsource and get started today