Introducing my first jQuery plugin, a horizontal sliding submenu. Has a couple of options and the appearance can be modified in the css. Any comments or feedback would be greatly appreciated.
Required Files
Slide Submenu requires:
- jQuery library
- hoverIntent plugin
- Slide Subnav plugin
License
Licensed under the MIT-license.
Download
Download file includes the commented version and the minified version of the plugin, as well as the demo page to save you writing the css from scratch.
- ssubnav1.1.zip (4.13 KB)
hello
thank you very much for this (very nice!) menu. I’m testing it and it seems to work fine but I have a problem when the submenu items are too numerous. For example if there are 8 submenu items under the menu Item 1, the submenus items don’t appear properly on a second line (there is no more background for example on this second line… ). What would you suggest me to fix this problem? I’d like the menu to adapat the number of submenus items…
thank you for your help
audrey
HI!
Congratulations for this plugin, very easy to adapt and personalize!
Since I’m rubbish at Javascript, I would just know how to make the Subnav bar disappear when making mouse out of the main menu.
After that, this script will directly be integrated to our website, thanks a lot in advance!
Vince
@Vince, good point, I’ll update the plugin shortly.
Hi,
nice Script! It works fine in Firefox, but there is a problem in IE 7 (maybe other versions, too). When I roll over the slidenav, the subnav is shown normally. But then, when I roll on an other point, the subnav is shown, but no text is displayed. So there is only a empty box.
Do you have an idea?
Thanks in advance!
Regards, Chris
@Chris Should be fixed now.
Hi Justin,
thank you for the update. Nice that the speed is now adjustable. But I still have the problem with the Internet Explorer
Do you have an email-address? So I could you send the URL where the problem takes place.
Thanks in advance!
Regards, Chris
Thanks a lot Justin!
If u want to use this menu in my protfolio . should i need to put ur refernce
@Carol,
You don’t need to reference this page on sites that use the plugin.
Thank you … this tutorial has me very helped.
Great plugin, is there way for me to adjust the sliding nav so it doesn’t scroll horizontally from the right to where my cursor is? Everytime the page refreshes (first time I click on a link) it scrolls all the way from the right to where my cursor is for the submenu, but when the page is loaded it and I click on the links it scrolls the way I want, not squeezing the submenu bar to fit the text rather than having the text fit to text immediately.
Ah yeah, I see what you mean, I’ll see what I can do.
Hey Justin, I was wondering if it’s possible to make the bar appear above the menu instead of below? If so, what do I need to change in order to do this? Thanks again for this awesome menu!
Just add this to the .slidenav-box style in the css.
position: relative;
top: -90px;
Hey Justin, thanks for the solution to the position question. One problem has arisen from this however. The menu does appear above now, but you are no longer able to select anything. The other issue is the menu placement. The layout is still set up to make one think the menu will appear on the bottom. I can’t seem to figure out which values to change and if they are in both the javascript and css or just one. Thanks again!
Hi Justin. Very nice work! I would like to ask you how can I add a sub-submenu?
Just wanted to let you know, I figured it out. I just moved the div tags on the html file above the main bar but kept it in the nav container tag. This moves it to the top and allows for navigation too. Thanks again.
The plugin doesn’t support sub-submenus. It might be added in a future release if other people need it also.
sub-sub-menus was the first thing I went looking for :’)
but that probably just me being peverse :’)
.h
Congratulations for this plugin, very easy to adapt and personalize!
Hi Sliding Subnav Plugin Author,
could you please help me for this one. im using your plugin to create the menu navigation. i need the third level access. how to build it.. could you please advise me. it will more helpful to me.
Thanks for your understanding.
@selvabalaji , Sorry but the plugin doesn’t have support for 3rd tier menus.
[...] Slide Subnav [...]
very useful i must say, but i need your help with 2 things
- i need to know if i can set the submenu shown when i enter a page ? so when i enter to the page referred by subemenu-2 lets say, the correspondent submenu will show.
- and i need to know, if on mouseout, i can reshow the submenu already shown, so if the submenu-2 is shown as default, when i hover on the menu-3 it will show, and on mouseout i need to show again the submenu-2
.
appreciate your help very much , thanks
I admire you for such a very nice plugin.
Just have one question though. How do I set the style when using an image as a background with a specified width and height?
[...] Slide Subnav [...]
[...] https://www.justjquery.com/2008/10/01/slide-subnav-plugin/ [...]