63

Navgoco: Multilevel Slide Menu

Portfolio Jul 5, 2013 at 10:50 237,033 Views

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 | GitHub | Demo | 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. gomesh munda #63   gomesh munda | Oct 30, 2015 at 06:28

    Hi! Chris many-many thanks to you for giving us such a wonderful menu.I really like it. I am trying to use your menu in my under development Shopping Cart website.I am using 2 level menus i.e. Main Menus and under it some submenus. 1. Biscuits & Cookies 1.1 Biscuits 1.2 Cookies ................ Say, on Page-1 when i click on (1.1 Biscuits); I want on Page-2 (1.1 Biscuits) submenu to be highlighted. Is it possible to do somehow ??? . If yes, then please explain me with working codes. I am eagerly waiting for your reply.Thanks in advance.

  2. Mike Rapp #62   Mike Rapp | Oct 22, 2015 at 18:02

    Hello,

    I am using your menu system on the above site. Two issues, which you will notice when you test:

    1. Parent menu items do not go to links; 2. Clicked parent items collapse and then expand the child menu items.

    I've tested your options and don't see anything that would fix these two issues. Thank you!

  3. Chris Still #61   Chris Still | Jul 28, 2015 at 12:22

    Thank You, Works Great, Adds just the right functionality, Again, Thank You Very Much.

  4. John Perry #60   John Perry | Jul 25, 2015 at 02:32

    Since the author of this chose not to address the link issue, I thought I'd go ahead and address it for him.

    To get links to work, add this to the end of the inline jquery:

    $(document).ready(function() { window.location.href = href; //This will force the browser to refresh with the new URL }); });

  5. cheri #59   cheri | Jul 24, 2015 at 19:28

    When I view my menu online it is already opened to the sub menus? Any help with this would be appreciated.

  6. Alexander Wilhelm #58   Alexander Wilhelm | May 22, 2015 at 12:01

    Thanks for this awesome menu. Works great!

  7. Jacq #57   Jacq | Apr 13, 2015 at 18:48

    This is such a nice script! I even using it as sort of horizontal mega menu on desktop as well, and as sidebar on mobile.

    But... any chance that is is possible that instead of toggling indexes using another value? My menu is dymanically contstucted so the indexes vary with each menu update. In this particular case I would only like to toggle the first nested ul only.

    Would love to hear from you.

  8. Ad #56   Ad | Feb 20, 2015 at 00:39

    HELP please I've put the menu on a website Changed it beautifully to fit the design.it took me a few hours, but..very happy But .... links don't work. Also not in the demo.html It must be in jquery.navgoco.js but where? Please help

  9. tinusmile #55   tinusmile | Feb 16, 2015 at 11:12

    Great navigation, thanks. I have the mobile navigation only running below 1025px, means I style the menu with media queries for bigger screens. My problem is when a desktop browser is resized to smaller size and then back to bigger than 2014, the mobile menu is still activated. Any solution for this? Thanks in advance.

  10. Jens #54   Jens | Feb 5, 2015 at 14:50

    This is a very cool way to make a menu and it (almost) works perfectly for me, but I am trying to figure out how to get a top-level link to list the submenu attached and also open a URL afterwards.

    For the link to be a top-level with submenu, it must be a so I am trying with some sort of callback, but I won't work: < script type = "text/javascript" > $(document).ready(function() { $('.nav').navgoco({ onClickAfter: function(submenu, opening) { $("a").prop("href", "/?page=123"); }, }); }); < /script> Can someone help me a bit on the way here? Thanks :-)

  12. MOONY #52   MOONY | Dec 11, 2014 at 16:44

    the best menue ever

  13. Katrin #51   Katrin | Nov 20, 2014 at 22:27

    Hello! Please excuse my bad English. The menu is great, but I have a problem: When I click on a top menu item to open a submenu and simultaneously open a page. example: Menu 1 -> Page Menu 1 Menu 1.1 -> should open

    But I do not know where I need to change something in the code. Can anyone help with?

    kind regards

  14. bamboosn #50   bamboosn | Oct 30, 2014 at 03:01

    How amazing that doctors said Women UGG is not benefit for women. If they come to Ugg factory, they will find how silly they are. Polo Outlet

  15. SHeri #49   SHeri | Oct 24, 2014 at 16:56

    Sorry if you have answered this before, but I am not seeing it in the comments. I am trying to use this as navigation. However when I put in a page to go to in the href, instead of the #, nothing is happening. It's not a top-level part of the accordion, it's the first option within the accordion. I don't understand all the terminology in the read me, do I have to enable something to allow the links to function as links? In the demo, none of the links are real links so I can't actually compare my code to yours to see if there's something I am doing wrong.

  16. Tex #48   Tex | Oct 22, 2014 at 19:12

    Great menu! I'm using it to open jsp pages in another content div.

    My question is: is there anyway to have the menu dynamically change to reflect the current page in the content div?

    What I mean is: - I click a menu link and the content pane changes (awesome!) - I click a link in the content pane to .load another page in the same content pane (so far so good) - the menu needs to update to reflect the content change

    Is there any easy way to do this? A nice function I can call to open the menu based on href value?

  17. Trevor #47   Trevor | Sep 8, 2014 at 21:54

    Great menu. I made a few changes to the layout, but I have not touched the core. My menu stays open when I hit the back button on the browser. Is there a way to force it to close? Thanks in advance!

  18. JF #46   JF | Aug 27, 2014 at 15:31

    Hi.

    First, it's a very nice plugin that i use in my websites. Second, it's a great idea to put it into github so everyone can improve it and customization... Last, it's possible to add separators between the blocks of

    . Like this:

    1. Home ------------ 2. Products ----------------- 2.1 - Plants 2.2 - animals 3. Tools ----------- etc....

    TIA

  19. software gurs #45   software gurs | Jun 25, 2014 at 11:58

    Hi Chris, thanks for this plugin...But a small question for plugin. I want to make, second ul list hover function not clickabla and show li child? is it possible for code ?

  20. karabey #44   karabey | Jun 12, 2014 at 13:42

    One of my Menus with Submenu keeps hidden in active status.

    • I am using this Code to keep add .active class to the Menu $(document).ready(function () { var url = window.location; // Will only work if string in href matches with location $('ul.navmenu a[href="' + url + '"]').parent().addClass('active'); // Will also work for relative and absolute hrefs $('ul.navmenu a').filter(function () { return this.href == url; }).parent().addClass('active').parent().parent().addClass('active'); });
  21. Ghufron #43   Ghufron | May 22, 2014 at 15:55

    For many reason, I only use a standard responsive navigation menu

  22. Shanmugam #42   Shanmugam | Apr 30, 2014 at 07:36

    very good share, useful menu code for all developers Thank you!

  23. Logisan #41   Logisan | Apr 26, 2014 at 03:14

    I realize this is a menu system and it is really nice. Is it possible to include HTML content other than links in the menu-ing system?

    I have grouped dated (1-3 levels deep) that I think this would be a good candidate for.

  24. jason #40   jason | Apr 2, 2014 at 11:33

    how do I change the color of individual links ,thanks

  25. Serg #39   Serg | Mar 29, 2014 at 09:38

    Need your help. How to completely remove accordion provided that the screen resolution is more than 768px ("destroy"- does not work as it should). I need only accordion menu tablet version.

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

    please disregard my previous question, thanks :)

  27. 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?

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

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

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

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

  32. 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?

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

    Great update *thumbs up* thank you :)

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

  35. 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/

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

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

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

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

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

    how to add data dynamically?

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

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

  42. 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?

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

    Hi Thank you so much to share the great collection

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

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

    Simply great, Thank You!

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

  47. 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?

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

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

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

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

    There are some bugs!

  51. 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 ?

  52. 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?

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

  54. 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?

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

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

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

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

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

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

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

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

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

    Enable accordion mode, see demo

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