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
Hi. I need some help please. Iv'e seen a couple of posts around that users can't get the links to work. That is also my problem. I have been playing with it all day, After uploading it and trying a couple of links, nothing happened. I figured I had removed something that I shouldn't have, so did a clean install and it still does the same thing. What is the fix for this please. Incidentally, this is the best menu I have seen. So thanks for the good work.
Tracy
Thank you, this menu has me very helped.
Whenever I clicked submenu to go the website, it didn't work even I put address instead of '#'. I struggled to solve this issue. and I referred John Perry's comment. when I put this source, sliding menu doesn't work. anybody help me for solving the problem? ======================================================================== 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 }); }); ========================================================================
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.
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!
Thank You, Works Great, Adds just the right functionality, Again, Thank You Very Much.
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 }); });
When I view my menu online it is already opened to the sub menus? Any help with this would be appreciated.
Thanks for this awesome menu. Works great!
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.
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
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.
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 :-)
Thanks for sharing ! But I have a problem. After I changed to (take google for example), I could only open the website by right clicking of the mouse and choosing "open link in new tab". How could I open the website by directly clicking the link?
the best menue ever
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
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
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.
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?
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!
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
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 ?
One of my Menus with Submenu keeps hidden in active status.
For many reason, I only use a standard responsive navigation menu
very good share, useful menu code for all developers Thank you!
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.
how do I change the color of individual links ,thanks
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.
please disregard my previous question, thanks :)
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?
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.
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...
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...
@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.
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?
Great update *thumbs up* thank you :)
@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!
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/
@Tim Currently it's not possible but it's on the @todo list of navgoco's next release.
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.
@raju For now the only way to achieve that is by destroying and re-initializing the plugin every time you make a change.
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.
how to add data dynamically?
Check out the demo, you can run multiple instances of navgoco in the same page.
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?
Hi Thank you so much to share the great collection
Thanks for this script! I was wondering, is it easy to connect this script to a tabs system? thanks, keep up the good work!
Simply great, Thank You!
Please use github for reporting bugs, it's tough to keep track of issues through comments.
Thank you.
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?
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.
Big thanks about this. Very nice menu and easy to use
There are some bugs!
@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 ?
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?
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.
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?
Thanks a lot for sharing with us +1 Very great work !
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.
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.
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:
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.
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.
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.
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.
Enable accordion mode, see demo
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