Slide Subnav Plugin

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:

  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

27 Responses to “Slide Subnav Plugin”

  1. audrey says:

    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. Vince says:

    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 says:

    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 says:

    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. Vince says:

    Thanks a lot Justin!

  8. carol says:

    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. Webagentur says:

    Thank you … this tutorial has me very helped.

  11. Mike says:

    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. Oren Panitch says:

    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. Oren Panitch says:

    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. Thanos says:

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

  17. Oren Panitch says:

    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 says:

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

  20. kral oyun says:

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

  21. selvabalaji says:

    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.

  23. ziad says:

    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. justin pierce says:

    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?

Leave a Reply

You must be logged in to post a comment.