Layer 4 copy
doc
tut
blog
forum
doc
tut
blog
forum
home

Upload your PSD file...

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


 

Please wait - we are now uploading and converting your file...

 

Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

Hover Menus: Just Point with your Mouse to Open a Menu

Hover Menus: Just Point with your Mouse to Open a Menu

Here is a video tutorial showing you how to use the new '_hmenu' Layer Naming Convention. This feature works very similar to the '_menu' feature, but instead of having to click on a _link or _linkover to make the menu open, you only have to hover your mouse over the _linkover to make it open. Again, there is no coding involved, you just draw how you would like your menus and links to look in Photoshop or Gimp, save the PSD file and then let psd2css Online convert it to a working web page for you.

A particular '_hmenu' layer is associated with a particular '_link' and '_linkover' because the first part of the layer name matches. So the image roll over made from 'sales_link' and 'sales_linkover' would make the hmenu 'sales_hmenu' appear. The '_hmenu' part of that layer name tells psd2css Online to write all the code to make it work and the 'sales' part of those layer names are what tie them all together.

Here is the finished page:
http://psd2cssonline.com/tutorials/hmenu/index.html

Here is the PSD file used to create the example:
http://psd2cssonline.com/tutorials/hmenu/kiteboard.psd

Here is the high resolution video tutorial:
http://psd2cssonline.com/tutorials/hmenu/hiresvid.html

Still having problems

How does this work with text instead of boxes so how do I make the text drop down?

Ahhhh Wont work :(

I have copied the PSD from the tutorial and can get this to work. Please can you tell me whats wrong?
http://www.reidbuck.com/Files/Index-merged-wordpress2.psd

I want it to show the gifts menu when the cursor hovers over the gifts link, and the menu menu (i know!) when the cursor hovers over the menu link.

This site is awesome and when my trial is up i am going to pay for the service. It saves hours of my time :)

Ahhhh Wont work :(

I have copied the PSD from the tutorial and can get this to work. Please can you tell me whats wrong?
http://www.reidbuck.com/Files/Index-merged-wordpress2.psd

I want it to show the gifts menu when the cursor hovers over the gifts link, and the menu menu (i know!) when the cursor hovers over the menu link.

This site is awesome and when my trial is up i am going to pay for the service. It saves hours of my time :)

Hover time

Hey, thanks for the great tutorial, the hover menus work great!

I was just wondering if there's a way to control for how long they're open after I scroll away from them. They seem to stay open for quite a long time after I've dragged my mouse in a different direction and it looks like the site is a bit slow.

If there's any way around this I would greatly appreciate the advice. Thank you!

editable text

Is there a way to keep the text in the menu editable even when there is a colored box area as a link over state?

This site is amazing and the tutorials are easy to follow. Thanks for providing such a useful service.

copyright (c) 2009 psd2css Online, Inc.

 

 

User login

Become a Fan of our Facebook Page

Need help or have a question?
support@psd2cssonline.com

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content