Menus without writing code!

Submitted by shaun on Mon, 05/12/2008 - 16:03.

That's right, you can now have psd2css Online generate drop down and fly out menus for you quickly and easily without writing a single line of code.

Use the '_menu' Layer Naming Convention in conjunction with the '_link' or '_linkover' conventions and instantly you have a menu. You can have more than one on the same page. You can even have nested levels or submenus. It's all up to what you decide to draw in Photoshop.

For example, suppose you have a layer in your .psd file that you've named 'products_link'. You have designed that layer to look like a button your users will click to view your product line. But now you would like a menu to open that shows the various categories of product that you offer. So you simply design in photoshop exactly what you want the menu to look like, and where on the page it will show up. Then name the outermost or containing layer 'products_menu'. That's it. Your done. Really.

Here is an example:
http://psd2cssonline.com/tutorials/menu/index.html
http://psd2cssonline.com/tutorials/menu/T2.psd

Here's another:
http://psd2cssonline.com/tutorials/menu2/index.html

Here is a video tutorial showing how to make a menu for a '_linkover' layer already in another .psd file:

Thanks!

other menus not working

Submitted by Daniel Gonell on Tue, 07/29/2008 - 12:54.

Hey, wonderful tutorial, im working on a page right now and I added a couple of menus like the one you created, and placed them inside each of the buttons layer folder, and only the last one work, meaning the one before the background layer. Please let me know if im doing something wrong, and if there is a way to make the menu stay open for more than 4 seconds. Thank you.

Hi Daniel - I'm not certain

Submitted by shaun on Wed, 07/30/2008 - 05:17.

Hi Daniel -

I'm not certain exactly what your describing regarding the 'buttons layer folder' - I'll note that psd2css Online ignores the actual folders - it's just the order that the layers show up in the list (with all folders expanded - like there weren't any folders). If you could post a link to the PSD or just email it to me we'll figure out what's going on there.

As far as the 4 seconds goes, look for this section of code in the generated HTML file:
// Remove the following 2 lines if you don't want this menu to dissappear // automatically. Change how long the menu stays visible by changing // the 4000 to another number of milliseconds clearTimeout( timerId ); timerId = setTimeout( '$("#Layer-10").hide("slow")', 4000 );

You can remove the 'clearTimeout...' and 'timerId =' lines to get rid of the 4 second thing.

Thanks.

--
Shaun
shaun@psd2cssonline.com

Close Menus

Submitted by AZSuperman01 on Sat, 05/17/2008 - 18:49.

This is an awesome addition.

How do I make the menu close without making someone opening a new menu or navigate to a new page, like your "close flyout" link in your second example?