Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Drop down menu

  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Drop down menu

    Hi Everyone,
    I'm trying to put a drop-down menu onto my website, but desperately need some help; I'd be so grateful if someone could offer some assistance.

    If you click on this link to see the webpage, http://www.ambersupplies.co.uk/newsite/pageone.htm you'll see the drop down menu, and the two problems I'm having with it. Please don't take any notice of the menu content; I'll be styling it all when these problems are sorted.

    Firstly, you'll see that the external drop down list is lying within the table (with the red background) when it should appear outside. I've obviously missed a closing table or td tag somewhere, but can't find it.
    Secondly, the drop down menu should appear on mouseover, and disappear on mouseout; which it does, but as you can see, when the page is firstly or reloaded, the menu is showing.

    I didn't write this drop-down menu code, I copied it from this page with the intention of styling it to my own webpage:
    http://www.w3schools.com/DHTML/tryit...rydhtml_menu10, perhaps this will give someone a clue.

    Can anyone shed a bit of light on this for me, please? I'd be really grateful for any help whatsoever.
    Many thanks in advance.
    Graham

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,859
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I'd like to share an important article, if you are serious about web development. Here it's http://www.hotdesign.com/seybold/. Also, take a look at a good tutorial on making CSS based 2 column layout at http://bonrouge.com/2c-hf-fluid.php

    And here's an article on making a CSS based(which is far superiour over the javascript based) drop down menu at http://www.htmldog.com/articles/suckerfish/dropdowns/
    Last edited by abduraooft; 06-20-2010 at 02:51 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    GNewport (06-20-2010)

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hi,
    Thanks very much for your reply, it was a great help; just what I wanted.
    I've put it into the page now, and uploaded an example. The links haven't been activated yet, it's just so that anyone who might be interested can see how the effective this simple drop-down menu code is. Here's the link:
    http://www.ambersupplies.co.uk/trialpage.htm

    Thanks again.

  • #4
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    question regarding the example at suckerfish - does anyone know how to convert the hover behavior to an on click event - where the menu doesn't drop down until the user clicks on the menu option??

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,602
    Thanks
    78
    Thanked 4,387 Times in 4,352 Posts
    You can't do it with CSS alone. You have to stop using the CSS hover effect and change to JavaScript.

    So if that's really what you want, stop looking at that code and find one that is, indeed, all done in JavaScript.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •