navgoco_banner.jpg

Navgoco is a simple JQuery plugin which turns a nested unordered list of links into a beautiful vertical multi-level slide navigation, with ability to preserve expanded submenus between sessions by using cookies and optionally act as an accordion menu.

Download v0.2.1 | GitHubDemo | JQuery

Getting Started

Download the plugin, unzip it and copy the files to your application directory and load them inside your HTML.

<head>
	<!-- Load JQuery -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<!-- Load jquery.cookie plugin (optional) -->
	<script type="text/javascript" src="/navgoco/src/jquery.cookie.js"></script>
	<!-- Load jquery.navgoco plugin js and css files -->
	<script type="text/javascript" src="/navgoco/src/jquery.navgoco.js"></script>
	<link rel="stylesheet" href="/navgoco/src/jquery.navgoco.css" type="text/css" media="screen" />
</head>

Sample menu code & Plugin Activation

<ul class="nav">
	<li><a href="#">1. Menu</a>
		<ul>
			<li><a href="#">1.1 Submenu</a></li>
			<li><a href="#">1.2 Submenu</a></li>
			<li><a href="#">1.3 Submenu</a></li>
		</ul>
	</li>
	<!-- etc... -->
</ul>

<script type="text/javascript">
$(document).ready(function() {
	$('.nav').navgoco();
});
</script>

For more information check Readme on github...

v0.2.1 (March 1, 2014)

  • Fixed broken callbacks in leaf menu items
  • Updated demo and documentation

Comments

  1. Tim #38   Tim | Mar 26, 2014 at 10:41

    please disregard my previous question, thanks :)

  2. Tim #37   Tim | Mar 26, 2014 at 09:57

    I have another question. I was using jquery to add a class="open" to the parents of a child. I was expecting that when I do this, all the parents of the child will open. Can this be done?

  3. Chris #36   Chris | Mar 25, 2014 at 09:17

    Hi peter,

    If you change the css part

    .nav li > a > span { float: right; font-size: 19px; font-weight: bolder; }

    to something like this:

    .nav li > a > span { float: left; margin-right: 4px; font-size: 19px; font-weight: bolder; }

    you will get the caret to the left of the links.

  4. Petter #35   Petter | Mar 23, 2014 at 21:27

    Hi again Never mind the last issue in my last message: I figured out "content: '\25be';" was the code for the arrow. Still haven´t fixed the indent thing though...

  5. Petter #34   Petter | Mar 23, 2014 at 20:15

    Sorry, I have really tried a lot, but I don´t know how to code and can´t figure this one out. Float: left indents the following link and I can´t find anything in the code that determines the direction or look of the arrows...

  6. Chris #33   Chris | Mar 23, 2014 at 10:52

    @petter

    It's up to you to modify the stylesheet to make the caret to float to the left and edit the appearance. If you need some extra html markup inside the caret modify the caretHtml option: see readme.

  7. Petter #32   Petter | Mar 22, 2014 at 23:17

    Thanks for the update. Can I ask another question: Can I change the look of the carets and put them on the left side, like in Finder on Mac osX?

  8. Tim #31   Tim | Mar 14, 2014 at 05:51

    Great update *thumbs up* thank you :)

  9. Chris #30   Chris | Mar 9, 2014 at 00:02

    @peter, @rest

    Take a look at the new version with support for clickable parent links. To toggle those submenus click the caret/arrow. Anchor links work as usual, there was no bc breaks there. If you customized the caret option though please read the complete changelog for tips on how to update.

    Thx for your feedback!

  10. Petter #29   Petter | Mar 8, 2014 at 08:12

    Great menu, many thanks! Is there a way to make the parents clickable and expanding submenu, but being able to also only open submenu by klicking at the parents arrow? See function at http://handbok.alternativ.nu/

  11. Chris #28   Chris | Mar 6, 2014 at 21:35

    @Tim Currently it's not possible but it's on the @todo list of navgoco's next release.

  12. Tim #27   Tim | Mar 6, 2014 at 09:09

    Is it possible to modify this to only hide/show submenu when the user clicks on the arrow? What I wanted is that when I click on a menu, instead of showing the submenu, it will open a page.

  13. Chris #26   Chris | Feb 28, 2014 at 19:42

    @raju For now the only way to achieve that is by destroying and re-initializing the plugin every time you make a change.

  14. Gus #25   Gus | Feb 24, 2014 at 19:54

    I looked, but I didn't find a real demo. Meaning a working copy that shows me what the plugin might look like. So, sorry, but I'll look elsewhere.

  15. raju #24   raju | Feb 18, 2014 at 15:41

    how to add data dynamically?

  16. Chris #23   Chris | Feb 12, 2014 at 18:55

    Check out the demo, you can run multiple instances of navgoco in the same page.

  17. deepak #22   deepak | Feb 8, 2014 at 13:59

    hi, this plugin is very nice, but i had a problem, i want to use multiple instances of this plugin in same page... i dn't know how to do it. please help?

  18. sofiaherrla #21   sofiaherrla | Jan 22, 2014 at 08:34

    Hi Thank you so much to share the great collection

  19. alex #20   alex | Dec 16, 2013 at 18:48

    Thanks for this script! I was wondering, is it easy to connect this script to a tabs system? thanks, keep up the good work!

  20. a2clicks #19   a2clicks | Dec 16, 2013 at 09:51

    Simply great, Thank You!

  21. Chris #18   Chris | Nov 24, 2013 at 15:43

    Please use github for reporting bugs, it's tough to keep track of issues through comments.

    Thank you.

  22. bikeman #17   bikeman | Nov 24, 2013 at 10:44

    I am finding that the submenus down expand. Clicking 'expand all' sometimes gets things going but often the menus just mopve a bit but don't expand. What could be the problem?

  23. Alibaba #16   Alibaba | Nov 5, 2013 at 11:15

    Great work and very easy to implement - thank you for sharing! I'll make sure to keep navgoco in mind for the next vertical menu. Right now I tested it with a (one-level) horizontal navigation, which is also working well, but naturally the menu ought to close after an item/link has been clicked.

  24. AGus #15   AGus | Oct 30, 2013 at 09:28

    Big thanks about this. Very nice menu and easy to use

  25. Momar #14   Momar | Oct 29, 2013 at 19:00

    There are some bugs!

  26. Chris #13   Chris | Oct 27, 2013 at 07:12

    @Dao, @Acid Currently no it's not possible, i 'll look into it.

    @ken I guess you also try to add a proper link on a parent menu ?

  27. Dao #12   Dao | Oct 15, 2013 at 09:38

    Is there anyway that on level0 has menu items bellow, if you click on the link, it will navigate to an url that associate with the item, and if you click on the caret or similar, the sub menus will open. I think in many cases parent item has link itself and should not be disabled.

    Do you have an idea?

  28. Ken #11   Ken | Oct 14, 2013 at 20:44

    Great menu! This is a really basic question but for some reason I can't figure it out. How do I activate a URL change on click? When I change <a href="#"> to whatever I want my link to be, it does not register when you click it, it just stays on the current page.

  29. Accid #10   Accid | Oct 10, 2013 at 08:31

    Is it possible to make the accordion parent clickable? so even if it has subs that it opens the link on the accordion parent but also shows the subs?

  30. eLB #09   eLB | Sep 24, 2013 at 18:45

    Thanks a lot for sharing with us +1 Very great work !

  31. chrissk #08   chrissk | Sep 2, 2013 at 01:38

    Thank you for your work. can I ask one? I just want add callback function in navgoco's options. Can u show some example how to add callback function?

    I'm not english user. please understand my words.

  32. Chris #07   Chris | Aug 31, 2013 at 16:36

    Yeah that's probably a bug, i hadn't considered the possibility of a first level menu item without a submenu.

    Thanks for reporting it, i will fix it as soon as possible.

    ````Edit````

    Just released v0.1.4 to fix this issue.

    Thx for reporting, please use github to report issues from now on.

  33. Acidy #06   Acidy | Aug 31, 2013 at 11:17

    I try it further. So first of all, i need cookies. Then the code you gave me can't close first level link that don't have submenu. Am I right? For example here is my menu:

    • 1.Home
    • 2.Works
      • 2.1 Equipement
        • 2.1.1 Equ 1
        • 2.1.2 Equ 2
      • 2.2 Activity
      • 2.3 Houses
    • 3. Downloads
    • 4.Contact Us

    When I go to 2.1.2 and then click on 1.Home . The 2.1 menu stay displayed, or I need to hide it.

  34. Acidy #05   Acidy | Aug 31, 2013 at 11:02

    The website I'm working on use php with url parameter to navigate. I try your solution, I understand the idea, but, in my case it always close all.

  35. Chris #04   Chris | Aug 31, 2013 at 10:41

    Oh i get it now, you are using the menu to navigate from anchor to anchor in the same page or do something with ajax ?

    Here a quick and dirty solution...

    https://gist.github.com/tefra/6397468

    Let me know if this works for you. I will incorporate it to the plugin's features.

  36. Acidy #03   Acidy | Aug 31, 2013 at 08:36

    Thank you for your response. But indeed my menu is in accordion mode. What I want to be able to do, if I take the example of the demo (accordion version!) is when I click on "About" > "Contact Us" and then on "Public Relation" (or any uplevel menu that don't have submenu) it hides the "Contact Us" submenu. And this is not the case in the demo. I think it would be useful and user friendly for big submenu. I hope my question is clear, it's not easy to explain in a foreign language! Thank you.

  37. Chris #02   Chris | Aug 30, 2013 at 00:13

    Enable accordion mode, see demo

  38. Acidy #01   Acidy | Aug 29, 2013 at 15:18

    Very nice menu, thank you for sharing your work. Can you tell me how to modify the script to hide submenu when user click on any of level 1 link? Thank you in advance

Leave a Comment
It will not be published.