A Hover drop-down menu with button images and links?

  • 1
  • Question
  • Updated 10 years ago
  • Answered
I figured out how to hover over one of my buttons which would drop down to another button. What I can't figure out is how to allow the user to click on the sub-menu button. Does anyone know who to do this?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
  • always thinking of the complicated things

Posted 10 years ago

  • 1
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Have you had a look here littleus?
http://www.dynamicdrive.com/dynamicin...
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Woops, needs externally hosted files, sorry!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Well.. I figured out how to get the sub-menu button to stay for the user to click on it, but now I have to figure out how to make the button collapse when the user moves the mouse away.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Need you ask??!! OF COURSE you can take a look!

Its: http://dejavuapparel.synthasite.com/s...
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Password protected !!!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
No it can't be! I made sure that it was open cuz I know I always do that!! I just double-checked.. and yep.. it's public. Please try again.
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
Sorry, I was trying to go into the "enter here" - that is password protected !
I see now.... you are talking about the "contact page" button right.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
yep.. that's the one I'm talking about! =)
Photo of Boomer

Boomer, Champion

  • 2055 Posts
  • 84 Reply Likes
I think this one is a lot harder than it at first appears (words that come to mind at the moment are cyclic loop dependency and catch 22).

I'm thinking along the lines of using an image map or sticking with what you got and using a "transparent gif" image for the "onmouseout"

Let me think about it ..........
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Think away my friend.. think away! =)
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
Hi littleus...I got your code on another post to put a border around text and it works fine but....Do you have a code that will let me make a radius on the corners?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hey John

Unfortunately, I don't have a code for you that makes rounded corners. But, I did find this! I hope that this will help:

http://www.roundedcornr.com/
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
Cool site...gives me some other ideas...Thanks...I will keep looking for the rounded corners also...If i find something I will share it.
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
css is the best way to go for rounded corners - the html method is heavy code, it works by using lots of little tables, the CSS is the best way ( i believe)
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
I saw some CSS concerning rounded corners....I didn't think we could add CSS
Photo of Peter

Peter

  • 2569 Posts
  • 113 Reply Likes
Hi John, You can use some limited CSS for such stuff.

The CSS that we can't use is to do with setting up templates. Same stuff but different application and purpose.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Here's some more stuff I found on rounded corners. I haven't tried any of them so I don't know their compatibility with Yola. Always be sure to try a new code on a test site.

http://www.cssjuice.com/25-rounded-co...
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
I think I have a code that is working but I can't seem to post it here.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
try wrapping the code with <!-- and -->
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
I have no idea where to add that and am lucky I got this to work ...so I did this screen shot
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Thanks for posting that John.

Just so that you know for next time for wrapping a code - it would look like this:

<!--<div style="width:281px;height:211px;-moz-border-radius:10px;border:4px solid #000000;">YOUR TEXT HERE</div>-->
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Okay.. I finally got my mouseover drop down menu thing to work but I need an extra snippet of code to make it work perfectly I think. Is it possible to have a mouseout function or mouseout timer so that the user does not have to mouseover the main link to close up the rest of the menu?

Here's the page where I currently have my code:

http://dejavuapparel.synthasite.com/s...
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
can you not add a mouseout tag to the bottom two images?
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
I can't figure out how to do that though. Do you have any experience in this area?
Photo of UK Duke

UK Duke, Champion

  • 3321 Posts
  • 213 Reply Likes
no, maybe at the start of the code where you have onmouseover="showHideMe('div1')" after that add mouseout=close div -- but i dont how to write it and how to add it to the java.
Maybe boomer will.
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Yah.. I did try to mess around with the mouseout close div after that onmouseover thing.. but to no avail. The code was actually for onclick.. but I changed it to onmouseover. Thanks for your suggestion though. It's reassuring knowing that I'm not off track here.