Auto-Nav Template with Unique CSS Classes
Permalink 4 users found helpful
I've seen a lot of people looking for something like this, where the auto nav applies a unique CSS class to each LI item in the nav so you can assign a unique background image to each individual nav item.
Here is a working model to use if anyone is interested. Just place this in your blocks/autonav/templates directory. I named mine custom_nav.php
All I did was call the $_c->getCollectionID() method to add it to each navigation item and I moved the nav-selected class into an ID. Otherwise, this is exactly the same as the existing auto-nav.
Enjoy!
Here is a working model to use if anyone is interested. Just place this in your blocks/autonav/templates directory. I named mine custom_nav.php
All I did was call the $_c->getCollectionID() method to add it to each navigation item and I moved the nav-selected class into an ID. Otherwise, this is exactly the same as the existing auto-nav.
Enjoy!
<?php defined('C5_EXECUTE') or die("Access Denied."); $aBlocks = $controller->generateNav(); $c = Page::getCurrentPage(); echo("<ul class=\"nav-header\">"); $nh = Loader::helper('navigation'); $isFirst = true; foreach($aBlocks as $ni) { $_c = $ni->getCollectionObject(); if (!$_c->getCollectionAttributeValue('exclude_nav')) { $target = $ni->getTarget(); if ($target != '') { $target = 'target="' . $target . '"'; } if ($ni->isActive($c) || strpos($c->getCollectionPath(), $_c->getCollectionPath()) === 0) {
Viewing 15 lines of 44 lines. View entire code block.
Come to think of it, this should be in core.
Raverix, are you on the github? I agree that this should be in core -- the autonav template is the most-often-customized, and cleaning it up would be a great help especially for non-coders who need to get in there.
(Great suggestion by the way, nice and clean and easily extendable)
(Great suggestion by the way, nice and clean and easily extendable)
I am now, been meaning to check out git for a while, guess this was as good a time as any. I made the changes, and in fact some more, but I'm having trouble getting the current head of C5 to install on my server... once I figure that out I'll try to submit the patch.
This will now add the following classes:
nav-selected - no change
nav-path-selected - no change
nav-first - Applied to the first li in the list, marginal uses
nav-item-{cid}
It'll now also check for a new attribute if you have it defined, 'nav_item_class', so if you wanted to give your your class a name better than nav-item-94, you can do nav-item-contact-popup or whatever.
This will now add the following classes:
nav-selected - no change
nav-path-selected - no change
nav-first - Applied to the first li in the list, marginal uses
nav-item-{cid}
It'll now also check for a new attribute if you have it defined, 'nav_item_class', so if you wanted to give your your class a name better than nav-item-94, you can do nav-item-contact-popup or whatever.
<? defined('C5_EXECUTE') or die("Access Denied."); $aBlocks = $controller->generateNav(); $c = Page::getCurrentPage(); $containsPages = false; $firstNavLi = true; $nh = Loader::helper('navigation'); //this will create an array of parent cIDs $inspectC=$c; $selectedPathCIDs=array( $inspectC->getCollectionID() ); $parentCIDnotZero=true; while($parentCIDnotZero){ $cParentID=$inspectC->cParentID; if(!intval($cParentID)){ $parentCIDnotZero=false;
Viewing 15 lines of 88 lines. View entire code block.
Come to think of it... this whole nested levels and comparing this level to that level in the view seems kind of clunky... shouldn't the data be delivered in a form which indicates the hierachy? Perhaps something such as:
Perhaps for backwards compatibility, we could create:
Perhaps for backwards compatibility, we could create:
$aBlocks = $controller->generateNavHierarchy();
Yea, I didn't think about the ID thing until just now when I realized that I have a parent and a child nave item both with the ID of "nav-selected" which isn't very good for validation!
I like your approach better...seems to make the most sense.
I like your approach better...seems to make the most sense.
This is the error I got when testing the code you provided. Not really sure how to fix it:
Warning: in_array() [function.in-array]: Wrong datatype for second argument in /blocks/autonav/templates/custom_menu_compatible.php on line 48
Warning: in_array() [function.in-array]: Wrong datatype for second argument in /blocks/autonav/templates/custom_menu_compatible.php on line 48
That means that $selectedPathCIDS is not an array, which it should defined in the stock view.php
So...how do I fix it?
It means you must have accidentally changed something else in the template, or perhaps you completely overwrote the view.php file with just Raverix's code (instead of only replacing that one chunk of code he pointed out)?
If that's not the case, or if you can't figure it out, please post your template file here (ZIP it up if the forum software prevents you from uploading php files).
If that's not the case, or if you can't figure it out, please post your template file here (ZIP it up if the forum software prevents you from uploading php files).
Reference the above code for the complete solution.
I guess I'm not really sure what I'm looking at. Here is my full custom_nav.php file located in my blocks/autonav/templates folder.
This code throws the error I mentioned above.
Reading through these posts, I'd be interested to see an autonav block that 1.) Outputs nested lists and 2.) assigns a unique CSS class to each nav LI item.
Anyways...here's what I have that doesn't work:
This code throws the error I mentioned above.
Reading through these posts, I'd be interested to see an autonav block that 1.) Outputs nested lists and 2.) assigns a unique CSS class to each nav LI item.
Anyways...here's what I have that doesn't work:
<?php defined('C5_EXECUTE') or die("Access Denied."); $aBlocks = $controller->generateNav(); $c = Page::getCurrentPage(); echo("<ul class=\"nav-header\">"); $nh = Loader::helper('navigation'); $isFirst = true; foreach($aBlocks as $ni) { $_c = $ni->getCollectionObject(); if (!$_c->getCollectionAttributeValue('exclude_nav')) { $target = $ni->getTarget(); if ($target != '') { $target = 'target="' . $target . '"'; } if ($ni->isActive($c) || strpos($c->getCollectionPath(), $_c->getCollectionPath()) === 0) {
Viewing 15 lines of 48 lines. View entire code block.
Your code only accounts for a <ul> one level deep, try replacing your entire file with this:
<? defined('C5_EXECUTE') or die("Access Denied."); $aBlocks = $controller->generateNav(); $c = Page::getCurrentPage(); $containsPages = false; $firstNavLi = true; $nh = Loader::helper('navigation'); //this will create an array of parent cIDs $inspectC=$c; $selectedPathCIDs=array( $inspectC->getCollectionID() ); $parentCIDnotZero=true; while($parentCIDnotZero){ $cParentID=$inspectC->cParentID; if(!intval($cParentID)){ $parentCIDnotZero=false;
Viewing 15 lines of 88 lines. View entire code block.
Thanks, Raverix.
This is the error I get when i do that:
Parse error: syntax error, unexpected T_ARRAY in /blocks/autonav/templates/custom_menu_compatible.php on line 69
This is the error I get when i do that:
Parse error: syntax error, unexpected T_ARRAY in /blocks/autonav/templates/custom_menu_compatible.php on line 69
Somehow an '=' went missing, I've updated the above. Oh, and if it works, let me know where I can see the output... I still haven't even run the code :)
Raverix, that worked PERFECT!
THIS is how the autonav block should work right out of the box.
Here is the working output. I just transitioned this site to C5 from Joomla.
http://ribapalooza.com
THIS is how the autonav block should work right out of the box.
Here is the working output. I just transitioned this site to C5 from Joomla.
http://ribapalooza.com
Looks very handy from a builders point of view. How about a package in the marketplace?
yeah we need a free addon menu on the marketplace ;-)
I'm trying to do you one better by getting this into core.
I created a file called custom_nav.php and put this code into it, nothing else. I added that file to MYSITE/blocks/autonav/templates folder. I then went into edit mode and changed the template in use for my main nav. I did not get the same result as leinteractive got when I go to his site - with custom classes for the nav li tags.
Am I missing something?
Thanks,
Result is here: http://designsbytierney.com/levin-c5/facilities-and-services/...
Am I missing something?
Thanks,
Result is here: http://designsbytierney.com/levin-c5/facilities-and-services/...
Hello autonav-interested people. I have created a drastically-simplified autonav template that is *much* easier to work with than the built-in one:
https://raw.github.com/jordanlev/c5_clean_block_templates/master/aut...
(Save that file to YOURSITE/blocks/autonav/view.php).
It contains a ton of features from all over the forums and is very easy to customize as well. It even includes this "add a class for every item" feature, although it's disabled by default so you'll have to uncomment it (scroll down to the "DESIGNERS: CUSTOMIZE CSS CLASSES HERE..." section for that).
And I've also put up some other cleaned-up templates for the Form and Page List block, in case you're interested in those as well:
https://github.com/jordanlev/c5_clean_block_templates/...
-Jordan
https://raw.github.com/jordanlev/c5_clean_block_templates/master/aut...
(Save that file to YOURSITE/blocks/autonav/view.php).
It contains a ton of features from all over the forums and is very easy to customize as well. It even includes this "add a class for every item" feature, although it's disabled by default so you'll have to uncomment it (scroll down to the "DESIGNERS: CUSTOMIZE CSS CLASSES HERE..." section for that).
And I've also put up some other cleaned-up templates for the Form and Page List block, in case you're interested in those as well:
https://github.com/jordanlev/c5_clean_block_templates/...
-Jordan
Briljant! just what I need!
jordanlev - I added the view.php script above and saw no change. I was expecting to see custom class names added to each nav li tag that I could then style. I did not see that.
Was that supposed to be part of the script you mentioned above, the first of the two added in your post above?
thanks,
Was that supposed to be part of the script you mentioned above, the first of the two added in your post above?
thanks,
Take a look at the actual code. There's an extremely well-documented section commented out where it prepares the nav classes array. You can enable many pre-set checks or put your own in there as well.
Thanks. I did look through it but must have missed that. I thought that part was automatic and the commented out parts were the extra options stated at the top.
Will look again.
Will look again.
Here's a blog post I wrote that explains how to customize this template in more detail:
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...
Honestly, the way I'd recommend doing this, and all future code is to modify this:
And turn it into this:
//Disclaimer: I wrote the above code while posting, so it might have errors.