Here is an example that shows how to make the menus toggle or stay open until you click on any menu item again. By default, psd2css Online creates menu code for you that automatically closes your menus for you after a 4 second time out. But if you would rather that your menus stay open until you click on the menu again (toggle) you can follow this example. We'll do this with some small modifications to the code generated by psd2css Online.
menu2 is exactly as psd2css Online generated from the PSD file. menu2_link and menu2_menu layers work together to give you the default psd2css Online menu functionality.
menu1 however has been modified to toggle open and closed when clicked. It has been modified in 2 ways:
Actually, jQuery already has similar functionality built in. You could just change the 'show' call in the click handler to a 'toggle' call and remove the 'hide'. However, in a multiple menu situation like this - that will leave an already open menu open. In this example, if we used the 'toggle' method from jQuery, you could open menu1, then click on menu2 to open it but menu1 would stay open too. The code in this example will close all the other menus when another menu is opened.
You can download the PSD file used to generate this page here:
http://psd2cssonline.com/tutorials/menuclickclose/MenuClickClose.psd
psd2css Online
Free, Fast and Easy CSS Web Pages
psd2css online converts your fantastic, creative, artistic, no holds barred web page designs into strict XHTML compliant CSS web pages automatically. Use Photoshop or The Gimp to express yourself and create the most professional, aesthetically perfect and functional designs you can think of. CSS stands for Cascading Style Sheets and is technically the best way to build your web pages.
Upload your Photoshop design, download your HTML file and images. It's that simple.
