SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Nice Dropdown Menu

    Looking to build a main nav dropdown menu similar to http://www.bn.com
    It fades in and out with about a 3 second delay, so you can catch it before it closes (more user friendly)
    Don't care too much about the images on the bottom right of each navigation, just looking to create mine which will fade in and out like they have it.
    Thanks
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  2. #2
    SitePoint Zealot
    Join Date
    May 2008
    Posts
    163
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use CSS to make a completely functional drop-down menu and then use jQuery to modify it as you wish. It should not take you too long to figure it out yourself with Google at hand.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    You can layer superfish on top of the basic suckerfish menu to give added features such as delay and keyboard tabbing.

  4. #4
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    You can layer superfish on top of the basic suckerfish menu to give added features such as delay and keyboard tabbing.
    Do I need to use suckerfish with superfish, or can I incorporate the superfish delay on my own dropdowns?
    Thanks,
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    Superfish can be standalone apart from the suckerfish menus, you just need to make sure the JS code that is in superfish, matches what suckerfish has, otherwise the JS won't target the correct HTML.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Superfish can be standalone apart from the suckerfish menus, you just need to make sure the JS code that is in superfish, matches what suckerfish has, otherwise the JS won't target the correct HTML.
    This is the HTML code that I'm using for the dropdowns:

    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a>
    <ul>
    <li><a href="#">Subnav 1</a></li>
    <li><a href="#">Subnav 2</a></li>
    <li><a href="#">Subnav 3</a></li>
    </ul>
    </li>
    <li><a href="#">Link 3</a></li>
    Perhaps it would be easier for me to do something with jQuery alone, rather then going with Superfish?
    Any help or guidance with getting this dropdown delay set up is much appreciated. 1 second delay with a fade is probably all it needs.

    Hmmm, and when on a mouse over, to have the next dropdown not delay (just like on Barnes & Noble www.bn.com)
    So maybe superfish will save me time after all with all of this, heheh...

    Thanks!
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by revlimiter View Post
    This is the HTML code that I'm using for the dropdowns:
    Yes the superfish should work with with normal unordered lists like that.

    Whether you use, superfish, jquery or plain old JS really depends on your skill level. Basic javascript would be the best approach but if you are already using jquery then superfish would be the easiest option.

  8. #8
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Yes the superfish should work with with normal unordered lists like that.

    Whether you use, superfish, jquery or plain old JS really depends on your skill level. Basic javascript would be the best approach but if you are already using jquery then superfish would be the easiest option.
    I am already using jQuery. Should I just be sourcing the superfish.js file in my <head> tag in order to have the dropdown menu mouseover delay work? What will I need to modify in this .js file to have it hook up to my existing HTML code? The dropdowns are nested ul's, so I believe it should just be a matter of hooking it up to #mainnav li ul to target the dropdowns, but I could be wrong about that. Does anything else need to be hooked up to document_ready in order for the superfish code to work too?

    Thanks
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    Yes, put the superfish JS in the header tag.

    I'd need to see the superfish JS, but generally you only need to make the top level <ul> id match what is written in the javascript file.

    Put the superfish script in first and see if you can get it working. If not, then open the superfish file. They should have comments to help you along the way. If not, post it here and even with most of our limited JS knowledge, we should be able to fix it .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by revlimiter View Post
    I am already using jQuery. Should I just be sourcing the superfish.js file in my <head> tag in order to have the dropdown menu mouseover delay work? What will I need to modify in this .js file to have it hook up to my existing HTML code?
    At the simplest level you would just add the sf-menu class to the ul to hook it up ut As Ryan suggests you should work your way through the examples as there are many options that you can set .

  11. #11
    SitePoint Addict revlimiter's Avatar
    Join Date
    Sep 2005
    Location
    British Columbia, Canada
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! I got it working with the 1 second delay and transition on the dropdowns. Now I would just like the dropdowns to show up quickly when you are already hovered over one. This way the other tabs do not take 1 second to load, the initial 1 second load is only for the first tab that is hovered over.

    Hope this makes sense.
    Thanks!
    "To make an apple pie from scratch,
    you must first create the universe.
    -Carl Sagan

  12. #12
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,762
    Mentioned
    13 Post(s)
    Tagged
    0 Thread(s)
    You'd just modify the JS to only work for hte top level.

    I'd suggest asking in that forum.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I think the hoverIntent plugin can handle that sort of function.


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
  •