Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi there,
There is an issue with role permissions that is being worked on at the moment.
If you are having trouble with access or permissions on regional forums please post here to get access: https://www.boards.ie/discussion/2058365403/you-do-not-have-permission-for-that#latest

Drop down on hover over link

  • 12-10-2011 2:47pm
    #1
    Closed Accounts Posts: 3,513 ✭✭✭


    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.


Comments

  • Registered Users, Registered Users 2 Posts: 129 ✭✭nager




  • Registered Users, Registered Users 2 Posts: 180 ✭✭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


  • Moderators, Category Moderators, Entertainment Moderators Posts: 36,711 CMod ✭✭✭✭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.


  • Closed Accounts Posts: 3,513 ✭✭✭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.


  • Moderators, Category Moderators, Entertainment Moderators Posts: 36,711 CMod ✭✭✭✭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...


  • Advertisement
  • Closed Accounts Posts: 3,513 ✭✭✭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.


  • Registered Users, Registered Users 2 Posts: 912 ✭✭✭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]


  • Registered Users, Registered Users 2 Posts: 1,784 ✭✭✭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!


Advertisement