SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS or JS for this drop down?

    Hey guys....

    Wondering if this sub nav can be done with CSS or if I'll have to use jquery or javascript? Here's a photo of the navigation. How the sub nav will work is this....when you put your cursor over the nav link, it will open up (the links below the active one will slide down).

    (Head's up....the picture overlapping the right side of the nav will be removed.)

    Thanks so much!

  2. #2
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest you use jscript much be easier for navigation

  3. #3
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Straight javascript or is there a jquery type of thing? I'm not that versed in js to do that from scratch.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The problem with a menu that expands on hover is that it will probably not work at all if JS is off and it won't work on mobiles, where you can't hover. So it's important that the top-level links can be clicked in situations where the dropdown won't show.

    Anyhow, you could Google something like "jQuery accordion menu", as there are lots of them out there.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ralph, thanks. Good point.

    "So it's important that the top-level links can be clicked in situations where the dropdown won't show."

    If I find something like "jQuery accordion menu", will that allow the top level links to be clickable in those situations?

  6. #6
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or, if you have another design suggestion for the drop downs for the nav in the photo I'm all ears. I had a feeling it wasn't going to be straight forward.

  7. #7
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ralph, I reread your comment. I think I found a jQuery that can be clicked. http://roshanbh.com.np/2008/06/accor...ng-jquery.html.

    Haven't used these much. Will I be able to use the design I posted with this method? Probably a sprite b/c of the arcs? It might even include a sub sub nav.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Perhaps you should go for something like a menu that expands on click, such as here:

    http://www.stunicholls.com/menu/tree_frog_vertical.html
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's an option! Still, can this one and the one I sent be done with the arc?

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Sculley View Post
    That's an option! Still, can this one and the one I sent be done with the arc?
    The arc background looks tricky to me, but I guess it depends on what look you want when the sub list is showing. You could have the arc image as a background on the top level link and the gray color just extending down behnid the sub lists, I guess.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  11. #11
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ralph....thought my last post worked but didn't. So just to be clear....it looks like the arcs are going to be tricky either way - even with top level only. Do you think they can be done or should I change the design to no arcs?

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,114
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It can be done ... though you don't show an image of what you want to see when the dropdown is active. But if that arc is just a background image on the top level LI and you are happy for the darker gray color to continue down as the bg for the sub items, there won't be a problem with that.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  13. #13
    SitePoint Guru
    Join Date
    Feb 2006
    Posts
    980
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I'll give it a try!


Bookmarks

Posting Permissions

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