Drop down on hover over link

donalg1

Can anyone tell me the best way to get a drop down box when I hover over a link, something similiar to what appears when you hover over the (boards.ie & adverts.ie) at the top of this site. Basically I have a link to a photograph page, on this page there are small photo's linking to individual pages which have galleries of thumbnail images which can be enlarged. What i want to do is create a drop down box on the top navigation bar so when i hover over the link to the main photograph page a box drops down with links to the individual gallery pages.

Sorry for the poor explanation.

nager

You should find something here to suit.

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm

Ste_D

yeah, you just need 2 things to make a basic example work.

1 - a hidden div with the menu on it, and
2 - a 'onmouseover' event in the hyperlink that will call a javascript function to show the hidden div (and align it with the hyperlink).

if you are stuck later I can try and come up with some basic code

pixelburp

I only took a glance at the Dynamic Drive examples & to be honest they look overly complex if you're just looking to get a simple menu to appear below a set of horizontal links. you'll learn more if you try and put it together yourself with some CSS & JS, than copying & pasting a chunk of code.

So if your HTML was something like (I think this is semantically OK)
<a href="..." class="myLink"><span>my link's text</span>
<span class="myMenu">
menu content in here...
</span>
</a>

Most of the grunt work can be done in the CSS; you'd add some styles so the <a> looks like a button, and the menu can be easily made to appear below the button with some judicious use of position relative (on the <a>) & absolute (on the .myMenu span)

Then if the menu is hidden with display: none, you can use JS (easiest to use Jquery for tidier scripting) to write a dropdown menu in a couple of lines:

$("a.myLink").hover(
function(){ $(this).find(".myMenu").show(); },
function(){ $(this).find(".myMenu").hide(); }
);

So that (should!) code looks for an <a> with class myLink, and when you hover over it, toggle a child tag with class myMenu.

donalg1

Manage to sort it finally using the following link.

http://www.dynamicdrive.com/dynamicindex1/flexdropdown.htm

I got very close using the code you posted pixelburp but was a case of close but not quite i just couldnt figure it. Thanks very much for the help though, boards has come through again.

pixelburp

donalg1 wrote: »

Manage to sort it finally using the following link.

http://www.dynamicdrive.com/dynamicindex1/flexdropdown.htm

I got very close using the code you posted pixelburp but was a case of close but not quite i just couldnt figure it. Thanks very much for the help though, boards has come through again.

What was it doing (or not doing) if you don't mind me asking? I usually find with anything like this it's just something small that needed tweaking...

donalg1

i could get the button to work, and the list to work although i couldnt get them to link together if that makes sense, i had them both positioned where i needed and was able to hide the drop down only i couldnt get it to appear when i hovered on the link button. I reckon it was on the js side of things this is where i struggle most.

chakotha

Could do it in CSS only but there would be no sliding/fade effects.

As a bare bones in one level:

[HTML]<style>
* { margin:0; padding:0; }
ul { list-style-type:none; }
ul li { float:left; padding-right: 2em; }
ul li ul { display:none; }
ul li:hover ul { display:block; }
ul li ul li { display:block; float:none; padding-right:0em; }
</style>

<ul>
<li><a href=#>Main Menu Item</a></li>
<li><a href=#>Main Menu Item</a>
<ul>
<li><a href=#>Sub-Menu Item</a></li>
<li><a href=#>Sub-Menu Item</a></li>
<li><a href=#>Sub-Menu Item</a></li>
<li><a href=#>Sub-Menu Item</a></li>
</ul>
</li>
<li><a href=#>Main Menu Item</a></li>
<li><a href=#>Main Menu Item</a></li>
</ul>[/HTML]

im...LOST

chakotha wrote: »

Could do it in CSS only but there would be no sliding/fade effects.

As a bare bones in one level:

[HTML]<style>
* { margin:0; padding:0; }
ul { list-style-type:none; }
ul li { float:left; padding-right: 2em; }
ul li ul { display:none; }
ul li:hover ul { display:block; }
ul li ul li { display:block; float:none; padding-right:0em; }
</style>

<ul>
<li><a href=#>Main Menu Item</a></li>
<li><a href=#>Main Menu Item</a>
<ul>
<li><a href=#>Sub-Menu Item</a></li>
<li><a href=#>Sub-Menu Item</a></li>
<li><a href=#>Sub-Menu Item</a></li>
<li><a href=#>Sub-Menu Item</a></li>
</ul>
</li>
<li><a href=#>Main Menu Item</a></li>
<li><a href=#>Main Menu Item</a></li>
</ul>[/HTML]

Was just gonna say this.

CSS3 it up and you could get some animations and fades going using that!