View the effect

Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.

Step 1: The HTML

Before we can do anything, we need to link our CSS file and our jQuery file in the header our of HTML document:

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jsfiles/jquery.js"></script>

These two files will contain our styles and the javascript effect library (duh), but before we can style or animate anything, we need to build the list itself. We are going to use a simple unordered list:

<ul class="menu_body">
  <li><a href="#">About Us</a></li>
  <li><a href="#">Portfolio</a></li>

  <li><a href="#">Clients</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Support Forums</a></li>

  <li><a href="#">Gallery</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

What we have here is as simple as it looks. We have an unordered list with the class of "menu_body". Inside we have multiple list items, each containing a navigation link. Next we need to add an image above the list. This image will serve as the list’s heading an all that is visible when the drop down is collapsed. It doesn’t have to be an image, this would work exactly the same with text to launch and collapse the menu, I just wanted something visual. If you want to use mine, you can find it here. With the image added we have our complete HTML:

<img src="images/navigate.png" width="184" height="32" class="menu_head" />

  <ul class="menu_body">
  <li><a href="#">About Us</a></li>
  <li><a href="#">Portfolio</a></li>

  <li><a href="#">Clients</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Support Forums</a></li>

  <li><a href="#">Gallery</a></li>
  <li><a href="#">Contact Us</a></li>
</ul>

We need to give our image a class name, so we have something to reference by when we start our jQuery. I used the class "menu_head". Here is what we have so far, a completely unstyled list with an image on top:

Step 2: The CSS

Next we need to give our list some style. First, lets do our top level styling:

body{background:#534741;font-family:Arial, Helvetica, sans-serif; font-size:12px;}
ul, li{margin:0; padding:0; list-style:none;}

Nothing too comples here, just setting a background color, font, and font size. Also, we are telling the list to have no padding, margin, or bullets. Now our list is just a heading and a neat column of links:

Now we can style the heading image and each list item. Here is the CSS:

.menu_head{border:1px solid #998675;}
.menu_body {width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}
.menu_body li{background:#493e3b;}
.menu_body li a{color:#FFFFFF; text-decoration:none; padding:10px; display:block;}

Here’s what we just did. We added a light tan border around the image "menu_head". On the unordered list "menu_body" we set a width (the same width as our image), and we added a light tan border to every side but the top (there will already be a line there since we have one around our image). We set a background color for each list item and we styled each link. Every link is now white, not underlines, has a nice amount of padding, and is set to a block display (this will make the whole box around the link clickable, not just the text itself).

Here is what our list should look now:

Step 3: The jQuery

Our first step will be to add the jQuery to tell the list items to alternate their background colors. In the head of your HTML document, add:

<script type="text/javascript">
$(document).ready(function () {$("ul.menu_body li:even").addClass("alt");
});

</script>

This is a basic jQuery function. When the document is ready, the function will add a special class of "alt" to each alternating row of our list. With the new classes applied, we can add a new CSS rule for the class "alt"

.menu_body li.alt{background:#362f2d;}

Now the rows will alternate between lighter and darker shades of brown, like this:

Now the the list has the overall look that we want, we can go ahead and completely hide it with CSS. In the CSS rule for "menu_body" add the property "display:none;" like this:

.menu_body {display:none; width:184px;border-right:1px solid #998675;border-bottom:1px solid #998675;border-left:1px solid #998675;}

If you look at the page now, all you should be able to see if the heading image. For now, the menu has seemingly dissappeared. Time to bring it back with jQuery:

<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");

$('img.menu_head').click(function () {

$('ul.menu_body').slideToggle('medium');

});
});
</script>

We added a new function that runs when the image with the class of "menu_head" is clicked. A click is just one of the events jQuery recognizes. You could also have the function run on mouseover, a key press, or numerous other things. When a click event is registered, jQuery will use the effect slideToggle on the unordered list with the class of "menu_body". jQuery has a large list of effects and various effect plugins, there is really no limit on how you can animate the list sliding open and closed. slideToggle allows you to set a speed, I chose medium, but you can also use "fast", "slow", or define a number in miliseconds.

The menu should now slide open and closed when you click on the heading image:

You could stop now and have a pretty decent animated menu, but with jQuery its very easy to add simple hover effects. First, we need to add some to our CSS:

.menu_body li a:hover{padding:15px 10px; font-weight:bold;}

This will do two things. When one of our links is hovered over, the padding on the top and bottom will be expanded to 15px (making each rolled over area taller and allowing the shift) and chaning the font weight to bold.

Next we can add some jQuery animation:

<script type="text/javascript">
$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");

$('img.menu_head').click(function () {
$('ul.menu_body').slideToggle('medium');
});

$('ul.menu_body li a').mouseover(function () {
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
});


});
</script>

We’ve now added a mouseover function, one that runs anytime you mouseover any list item’s link within our unordered list. The function is set to run on "this" which just means the element will run the function on itself. We are using the jQuery effect animate, which allows for many different parameters, along with a duration of time to run them in. We’ve told the function to change the font size to 14px, change the padding-left to 20px, and to do both things in 50 miliseconds.

At this point, the menu can expand and collapse, and the mouseover effect on the links should be working. Now we just need to tell it to reverse the effect when we mouseoff a link. If we don’t tell it to reset each animation, the links will "stick" in their new font size and position. We, of course, want each link to snap back to its original position. We can easily do this like so:

<script type="text/javascript">

$(document).ready(function () {
$("ul.menu_body li:even").addClass("alt");
$('img.menu_head').click(function () {
$('ul.menu_body').slideToggle('medium');
});

$('ul.menu_body li a').mouseover(function () {
$(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );

});

$('ul.menu_body li a').mouseout.(function () {
$(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
});
});
</script>

This is our last bit of jQuery. It is a function that runs whenever you mouseout of a list item’s link. It will reset the font to the original size (12px), change the padding-left back (to 10px). It will do both things in 50 miliseconds, the same speed as the first half of the animation.

Your menu should now be fully functional. It should be able to click open and close (in a sliding animation) and each link should animate when touched with the mouse (expanding the height, text size, and left-margin). I purposely tried to keep this menu light on images, but this simple effect is really easy to dress up some. For example, each link’s hover state could have an image background. Each image could be specific to each section for a really polished, intuituve menu and it would all fit into a small rectangle when not in use.

You can see the finished menu here.

Download the source files

Introducing QuikTab, a premium CMS style WordPress theme

QuikTab is a standards-compliant, one-page theme powered by WordPress and jQuery. You can buy it at ThemeForest for $12.

Note: This was originally written for PSDTuts.com, so that is why it has that title all over it, but here is the effect we are going for:

This layout consists of four main sections. The header (the brightly colored top of the page), the sidebar (the narrow left column), the navigation (links to other areas of the site), and the content (where all the good stuff goes). As you make more layouts, you will find almost every page you create will require these same basic sections.

Step 1:

First, let me start by saying that for this tutorial, I’m making sort of a ‘mini’ layout. It needs to be small to fit on this page, but when you make yours, make it any size you want, most likely larger. To make things easier, just pretend the examples are the size of a real website. To get started, make a new layer (name it ‘White’), and create a selection with the Rectangle Marquee Tool right in the middle of your workspace. Fill it with white, then double click on the layer to bring up the Blending Options and give it a Drop Shadow with the above settings.

Step 2

Still with the Rectangle Marquee Tool, select an area to be the header, and press Delete to remove the selection, leaving a hole through the layer.

Step 3:

To create the small rounded edge sidebar, we need to make two new selections. First, with the Elliptical Marquee Tool, make a circle hanging out over the edge of the header section (hold shift to make sure the circle stays perfectly round). Next, switch back to the Rectangular Marquee Tool, and, while holding Shift, select the area from the top of the circle out to the edge of the header area. Its alright if the selections hang over the edges a tiny bit, because now we are going to fill them with white. Your ‘White’ layer is now complete.

Step 4:

Next, under the ‘White’ layer, create a new layer (name it ‘Header Color’). Using the Rectangle Marquee Tool, select an area around the hole. Use the Gradient Tool to fill the selection with a bright bit of color. I chose to use a fade from a bright gold to a orange color.

Step 5:

Next we need to make the bright rays in the header. Create a new layer above the ‘Header Color’ layer and name it ‘Rays.’ We are going to make white rays using the Custom Shape Tool. Find the shape named ‘Registration Target 2.’ Since you only need a section of the whole shape, zoom way out (I zoomed out to 25%). Click and drag the shape, covering the whole workspace and most of the document window. Since the header is going to feature a shot of the website, I made the shape a little off center, so the rays will look like they are coming from behind it.

Step 6:

Ctrl + Click on the ‘Header Color’ layer to select it, then hit Select > Inverse and hit delete, getting rid of the extra rays that filled the image. Lower the opacity down a bit, I chose 20%.

Step 7:

Next we need to make a small drop shadow to separate the sidebar area from the content area. Make a new layer above ‘White’ and name it ‘Shadow.’ Using the Gradient Tool (with a ‘Foreground to Transparent’ fade), click and drag from outside the selection into the center. Lower the opacity to 30%, and you should have the main sections of the layout done. We now have a clearly defined header, content, and sidebar area.

Step 8:

The header area needs an image, and I’m going to use a shot of the PSDTuts website, but you can use whatever you want. I pasted the screen shot onto a new layer above ‘Rays’ and named it ‘Website.’ I used Edit > Free Transform to tilt and size down the shot a little bit, then added a thick, low opacity stroke, just to make it stand out a bit.

Step 9:

Next, with the Type Tool, add in the text layers. For my title text, I added a Gradient Overlay and a Stroke, both of which are found in the Blending Options. With the subtitle text, I dropped the opacity down to 50% to make it fit in a little better.

Step 10:

Next we need to add in the site’s navigation. Using the Rectangle Marquee Tool, make a selection around the area of the navigation. Hit Select > Modify > Smooth > 10px. It should round off all the corner, and now you can use the arrow keys to move the selection into place, a little bit up and to the left.

Step 11:

With practice, making pixel perfect selections by eye get easier, but if you are now, you might want to zoom in a little on this step. Still with the Rectangular Marquee Tool, hold Alt and drag over the top part of the selection. It will remove that part from your selection. Again, do the same thing to the overlap on the left of your selection. Hold Alt, and snip off the little bit of extra. You should have a selection that fits perfectly in the space.

Step 12:

Make a new layer named ‘Navigation’ (making sure its under the ‘Shadow’ layer to give the layout a little more depth). Fill the selection with a light tan, then double click the layer to bring up the Blending Options and add a Gradient Overlay.

Step 13:

Using the Type Tool, I added some Navigation links. That’s pretty much it. Filling in the sidebar and content areas isn’t really something I can cover in a tutorial, since coming up with content for a site is really up to you, but that’s the fun part! This simple layout has all the bits that make Web 2.0 a great visual style. Its clean, bright, and looks inviting, and it was made mostly by only creating and filling selections. This method gets easier with practice, so after you finish one, start another. Once you fine tune your skills, its easy to mock up a whole site in just a few minutes.

Note: This was originally written for PSDTuts.com, so that is why it has that title all over it, but here is the effect we are going for:

The look and techniques used here are very flexible, so this is a good skill to pick up.

Step 1:

I’ve started with a 600×400 space, but if you are doing this for a real website, it should be larger. Create a new layer, and use the Rectangular Marquee Tool to make a selection across the top of the image. Select the Gradient Tool and pick two colors you like that are slightly lighter and darker shades of the same color. I went with a cool blue, but you can use whatever colors you want.

Step 2

Click and drag within the selection, and it should fill with a gradient. Holding down Shift while you drag will make sure your resulting gradient is straight. Now we need a pattern to lay over the blue. I made some diagonal stripes you can use, just open the file in Photoshop, and click Edit > Define Pattern. Now, back in the other file (with the rectangular selection still active) make a new layer, then click Edit > Fill and select your new pattern. If you don’t like the stripes… experiment! This is a good step to add a personal touch. Scanlines, pinstripes, and even old looking victorian patterns are popular now.

Step 3:

Adjust the opacity of the pattern layer. I dropped mine way down to 15%. Create a new layer, and make a thin selection along the bottom of blue bar, and fill it with black.

Step 4:

Create a new layer, and use the Rectangular Marquee Tool to make a selection and fill it with white (this will be the main body of our layout).

Step 5:

Add a drop shadow to the white layer the Blending Options panel (In the layers palette, double click on the white layer, or right click the white layer and select ‘Blending Options’). Use the settings in the image.

Step 6:

Now we need to flatten the Blending Options to change them from being a layer effect to being part of the actual layer. Create a new layer, then CTRL + Click on both layer titles. Now you can merge the two layers (CTRL + E, or click Layer > Merge Down).

Step 7:

With your new flattened white layer, click Add Layer Mask at the bottom of the Layers Palette. Select the gradient tool and set your colors to plain black and white.

Step 8:

Click and drag to make the bottom half of the white layer fade out. That’s the basic drop shadow overhang, now its time to turn it into a layout.

Step 9:

Add title text with the type tool. I added a reflective effect using the same methods as the overhang. To achieve this, I duplicated the type, hit Edit > Transform > Flip Vertical, placed it underneath, clicked Add Layer Mask in the layers palette, and used the gradient tool to fade off the bottom half. Lower the opacity a bit and you get a nice reflection. See what I mean about this being a flexible technique? Layer masks make it easy to pull off an otherwise complex effect.

Final:

Add a line of text for a menu, or try something else, maybe buttons or tabs. Fill it with some content and you are on your way to having a finished layout featuring the Drop Shadow Overhang.