Slide Subnav Plugin

Introducing my first jQuery plugin: a horizontal sliding submenu. It 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:

  1. jQuery library
  2. hoverIntent plugin
  3. 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.

Comments

24 responses to “Slide Subnav Plugin”

  1. 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

  2. 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

  3. @Vince, good point, I’ll update the plugin shortly.

  4. Chris

    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

  5. @Chris Should be fixed now.

  6. Chris

    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

  7. Thanks a lot Justin!

  8. carol

    If u want to use this menu in my protfolio . should i need to put ur refernce

  9. @Carol,
    You don’t need to reference this page on sites that use the plugin.

  10. Thank you … this tutorial has me very helped.

  11. Mike

    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.

  12. Ah yeah, I see what you mean, I’ll see what I can do.

  13. 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!

  14. Just add this to the .slidenav-box style in the css.
    position: relative;
    top: -90px;

  15. 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!

  16. Hi Justin. Very nice work! I would like to ask you how can I add a sub-submenu?

  17. 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.

  18. The plugin doesn’t support sub-submenus. It might be added in a future release if other people need it also.

  19. harrywwc

    sub-sub-menus was the first thing I went looking for :’)
    but that probably just me being peverse :’)
    .h

  20. Congratulations for this plugin, very easy to adapt and personalize!

  21. selvabalaji

    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.

  22. @selvabalaji , Sorry but the plugin doesn’t have support for 3rd tier menus.

    [...] Slide Subnav [...]

  23. ziad

    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

  24. 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/ [...]

Leave a Reply

You must be logged in to post a comment.