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