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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Drop Down Menu

    Hi there,

    I really want to create a css drop down menu like the one at http://www.webhostingtalk.com (on the top right-hand side of the page where it says "Find a host".

    I want to make it so that when you click on one of "Find a host" selections, the option gets selected (and you are not taken to its URL as it currently is). For instance when I click on HOST QUOTE, I am taken directly to that page. I want HOST QUOTE to be selected instead.

    "Find a host" appear to be an image. I would like to have an image background instead, this way when the option gets selected it has the same background as "Find a host".

    I've looked at a few tutorials and I've tried to study up on this but can't seem to get it. I can't seem to open .css documents either.

    How can I make it so that it gets selected once clicked? I have numerous selections on my site that are all used in one form (this is why I want the option to be selected instead of going to its URL)

    Any help on this would be mostly appreciated.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Either you have to use javascript or you are stuck with the limited styling of a <select> box. CSS only isn't going to do what you want it to here.

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes it is. nested unordered lists and a id for the first list items, not the nested ones.

    google suckerfish dropdowns.
    CATdude about IE6: "All your box-model are belong to us"

  • #4
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yeah I wish I had of found that article 2 weeks ago instead of about 4 days ago. I fought with this wonky javascript nav menu for quite some time before a found a reasonable compromise.

    Only disadvantage is that with the javascript menu you can change one file and the whole site updates which is nice. With CSS you need to change the lists on each page.

    The suckerfish drop down is perhaps one of the greatest CSS innovations I've seen. MY enxt site will certainly be giving it a shot, they really made it look nice too.
    Once I thought I was wrong but I was mistaken.

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Where can I get a hold of this suckerfish tutorial?

    Thanks.

  • #6
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Quote Originally Posted by mrruben5
    Yes it is. nested unordered lists and a id for the first list items, not the nested ones.

    google suckerfish dropdowns.
    Unless I completley misunderstood the question, you're wrong. In a suckerfish dropdown, you're creating the sort of menu he doesn't want: one where if you click on a selection, it goes to the url.

    Instead, he wants it where, if you click on a selection, it becomes selected. In other words, emulating the behavior of a select box.

  • #7
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [ ignore post ]

    I will post in a moment.

  • #8
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help so far everyone.

    Here is what I have done today (I spent all day doing it and feel like I haven't accomplished much).

    http://www.cheapwebhosters.com/final3.html

    This is exactly what I want, however, there are a few things I really need changed.

    When I click on "Option 1" the background goes to "blue.jpg". It should be "test2.jpg" instead.

    If I click one of the options and then go back to it, that option has the background of "test2.jpg". It should instead be "blue.jpg".

    Also I want there to be zero spacing between images. But when I do this, it seems to scrue up the text...how can I fix this?

    Thank you in advance.


  •  

    Posting Permissions

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