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
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.
You can layer superfish on top of the basic [URL=“http://www.htmldog.com/articles/suckerfish/dropdowns/”]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,
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!
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
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 :).
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 [URL=“http://users.tpg.com.au/j_birch/plugins/superfish/#options”]many options that you can set .
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!
You’d just modify the JS to only work for hte top level.
I’d suggest asking in that forum.