Navigator module (navigation builder)
Development and Programming
Hi all,
I’ve written this module to make it easier for people to maintain navigation for their websites. The module allows you to create navigation groups (f.i. Main Navigation, Sub-nav, Footer links) containing links to any part of your EE powered website or any custom URL.
Some of the module’s features are: - custom ordering of items - ordering by title and even tite length (number of characters in the item’s title) - sorting (asc, desc) - alternating row colors (switch parameter) - advanced conditionals
All items (links) are dynamic, which means that if you change the name of a template_group, template, category, entry title or url_title, they will automagically keep working like they should.
Navigator is a free module, and you can download it right here, right now.
Cheers
EDIT 20090609: Updated download link to version 1.3
Cool, can’t wait to try it…Thanks!!!
This is a great Module, Thanks! Installed it for a test. How can navigator do something like this?:
A vertical nested List:
MAIN ONE - sub one (= current page) - sub two - sub three MAIN TWO MAIN THREE
Then if i click on MAIN TWO it becomes:
MAIN ONE MAIN TWO (= current page) - sub one - sub two - sub three MAIN THREE
That would be exactly what i need.
Thank you Silvia
Thanks for the feedback.
At the moment the module does not have an easy way for building submenu’s. I am still investigating how to implement this. There are so many ways to do menu’s…
For now there are several ways to accomplish what you described but all methods require some JavaScript knowledge.
In this example I used the {nav_properies} field to specify which items are MAIN items just by typing “main” in the Properties field. Here is an example of the code:
Not the most elegant solution, but it works. If you want only one your main item open at a time (collapsing all others) you need some extra lines of JavaScript.
Cheers
Yes, i’ve got to have only one MAIN item open and all others stay collapsed until I click on another MAIN item (otherwise the menu gets too crowded). Do you know where I can get a good script that does it? I have seen it somewhere before but can’t remember where. Anyway, i think your module can become a very important part of EE’s functionality pallet, so: consider this a feature request, also for some flexible current page highliting with a choice to highlite by template, by weblog, by category… Keep up the good work!
This should do the trick:
to open a specific item in a template just call the function from the body onload handler:
<body ></code></pre>
<p>or place this script somewhere after the Navigator menu code:</p>
<pre><code><script type="text/JavaScript">
<!--
toggleMenu('main_1')
//-->
</script>The above examples will open the first submenu when your document loads, provided the first item’s ID is “1”.
Thanks for your request, I’ll see what I can do.
[edit]Posted some unwanted code, removed it.
What can i say: You are incredible!! I will try this tomorrow. Thank you so much.
I tried it and it works just fine, GREAT! One thing though: Neither the body onload nor the little script shows “main_1” expanded after loading that Template. All MAIN items appear in their collapsed state after loading the page so I still have to click to show the sub items. Any idea how to fix that?
I’d have to see the source code of your page, do you have a link to your site, or a file?
OK, found it, works like a charme now. As usual it was just a typo on my side, sorry for the intrusion. The site is currently running offline on a MAMP server for development. I’ll send you a link when it’s online. Guess I owe you a view beers! That was so helpful. Thank you, Silvia
Me again, I was looking for a way to include things like: title=”homepage”, onfocus=”if(this.blur)this.blur()”, with the Navigator generated links. I also found Navigator links are triggering IE’s Whitespace Bug when displayed in an Unordered List, so it would be useful to have an option for whitespace-less markup. Do you plan to add such in a future »escape«? Just asking, You know 😉
Hi,
You can use the Properties field for ehm… properties, but you could also use the Description field. Just paste your - title=”homepage” onfocus=”if(this.blur)this.blur() - etc. in there and include the variable in your code.
Here is an example that does just that, and also removes the whitespace you mentioned.
<ul id=”nav”>{exp:navigator group="1"} <li>{nav_title}</li>{/exp:navigator} </ul>
If this doesn’t solve your whitespace bug, have a look at one of the CSS fixes floating around the net.
Cheers
You can also use this plugin I wrote some time ago. It is called “Clean” and it cleans your html code by removing newline characters and/or tabs 😉
Enjoy
Ahh, I used the Description field now, works well. In CSS, li { display: inline;} fights my unwanted IE whitespace Slow, but learning.
great module, thanks 😊