Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file

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 are some examples:
http://psd2cssonline.com/tutorials/menu3/index.html

http://psd2cssonline.com/tutorials/menu/index.html
http://psd2cssonline.com/tutorials/menu/T2.psd

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!

How to keep the clicked _hover-Button active after click?

Submitted by Martin_Mueller_1982 on Wed, 01/27/2010 - 12:45.

Hey there,

After click the Layer (for example) "example_link" the Page is loading example.html - okay thats nice - but then after loading the page all Menu-Buttons are Normal links and the clicked link arent active (hover).

- How to keep the clicked _hover-Button active after click? -

dynamic menus with image gallery?

Submitted by samaripa08 on Tue, 06/23/2009 - 15:33.

Was wondering if there was a way to place the image gallery thumbs into a dynamic menu?

Tam

Bravo

Submitted by dexDesign on Sun, 02/22/2009 - 09:13.

It's amaizing how easy can ripp of that css coding and other scripts with psd2css ...All i need to know is Photoshop , the hard stuff is made by this soft...you know i never see something more easy and more efficient like this.Bye-bye coding [i never was a good css or html coder]. Great job man and a wonderful thing ...IT'S FREE .
Bravo.

Drop down hover on a _text layer?

Submitted by lawson on Tue, 01/27/2009 - 16:03.

Is it possible to make a drop down menu on a _text layer? Also, I need the drop down menu to engage with a mouse rollover and not with an OnClick behavior. 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:
<code>
// 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 );
</code>

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

Thanks.

--
Shaun
shaun@psd2cssonline.com

i cant seem to find the

Submitted by Daveaitchison on Sun, 10/04/2009 - 15:33.

i cant seem to find the

clearTimeout( timerId );
timerId = setTimeout( '$("#Layer-10").hide("slow")', 4000 );
</code>

when a open my index page with notepad to look at the html anyone poiont me the right way please

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?