b_jpg_center
flyout_menu
foi1_linkover
foi1_link
foi2_linkover
foi2_link
foi3_linkover
foi3_link
foi4_linkover
foi4_link
foi5_linkover
foi5_link
foi6_linkover
foi6_link
foi7_linkover
foi7_link
flyout_linkover
flyout_link
psd2css Online
menu1_linkover
menu1_link
menu1_menu
menu2_linkover
menu2_link
menu2_menu_jpg
unusual_linkover
unusual_link

Another Menu Demonstration

This page demonstrates a number of different uses of the psd2css Online '_menu' Layer Naming Convention.

There are the 3 drop down menus above, and the fly out menu to the left. Note the image roll overs inside the fly out menu.

All of the menus on this page are exactly as they were drawn in Photoshop and then generated by psd2css Online - no code was added or modified by hand. Now, having said that you will probably want to add URLs to the href tags so your menus actually go somewhere.

There are some options available too about how long the menus stay open, or whether they close on their own at all - there are comments in the generated html code to help you make those modifications if you want. And because all of the animation is jQuery based, you can find tons of examples and information about how to customize this page further if you want.

This is the PSD file used to generate this page: menu3.psd

psd2css Online

Dynamic Web Pages from your Photoshop Designs in Seconds.

psd2css Online converts your creative and artistic web page designs into dynamic XHTML and CSS web pages automatically. Use Photoshop or The Gimp to express yourself and create the most professional, aesthetically perfect, dynamic and functional designs you can think of.

The web application takes instruction from the names of the layers within the PSD file to write XHTML 1.0 transitional and CSS 2.1 valid code and javascript for you.

You get Dynamic Image Galleries, Full Featured Comments Systems, Animated Drop Down and Fly Out Menus, Dynamic Scrolling Content, Working Forms, Image Rollovers, Tooltips, and more.

Upload your Photoshop design, download your HTML file, javascript and images. It's that simple.

http://psd2cssonline.com

u3_linkover
u3_link
u2_linkover
u2_link
u1_linkover
u1_link