custom class for each li in autonav

Permalink 3 users found helpful
Hi,

I want to use the autonav, but each li in my nav has a custom class. Each li pulls in a different image.

Any suggestions?

cheers,
Anthony

apc123
View Replies: View Best Answer
12345j replied on at Permalink Reply
12345j
try using this
<?php 
  $a = new Area('sidebar');
  $a->setBlockWrapperStart('<div class="box">');
  $a->setBlockWrapperEnd('</div>');
  $a->display($c); 
?>

you'll have to change the wrapper start and end values, but I think it should work- either that or you could use a custom template.
creatovisguru replied on at Permalink Reply
creatovisguru
I'd just create a custom autonav template.

1. mkdir /blocks/autonav
2. mkdir /blocks/autonav/templates
3. cp /concrete/blocks/autonav/view.php /blocks/autonav/templates/<name_of_custom_autonav>.php

4. Edit the output generation code in <nave_of_custom_autonav>.php with the logic necessary to do what you're asking, which is adding a unique class for each nav item generated at the appropriate level.

5. In Concrete5 editor, add a new autonav block where you want the nav.

6. Once you've added the new block, and still in Concrete5 editor, click on it and choose "Custom Template", then apply your new custom template.

7. Tada!


Of course you could use jQuery to accomplish this as well. Create an array map of elements -> images. Have jQuery add the appropriate classes to the specified elements.
jordanlev replied on at Permalink Reply
jordanlev
Hi Anthony,
I think I understand what you're trying to do, and so I don't think 12345j's answer will work (because that would apply the same class to all of the <li>'s). creatovisguru is correct about the approach, but doesn't actually provide the updated code you'd need. I am attaching a template you can use to achieve this (I had to do this same thing for a client recently). To install it, download the attachment and unzip it. Then follow creatovisguru's steps 1 and 2. Now copy the "list_item_classes.php" file (the unzipped attachment) into that new folder you created in step 2. Now continue with steps 5, 6, and 7 (in step 6, the name of the custom template will be "List Item Classes").

Note that it is impossible to specify exactly what the names of each class should be, so it only outputs "nav-page-#" (where # is the page ID of that particular nav item). What that means is that you will have to add the autonav block with that custom template to your site first, then view source to see what the actual class names it uses are, then write your CSS accordingly. It is simply not possible to do it any other way because that autonav block dynamically outputs list items based on the pages in your site, which could be different all the time because you could add/remove/change pages in your site at any time.

ALSO NOTE that those class names will only work on the site that you first built it for. If you use this template on another project, you'll need to go through the same process of adding the autonav block first and checking what the class names are by "viewing source" -- it will be different from the first site you tried!

Hope this makes sense -- let me know if you run into trouble.

EDIT: Removed this attachment because it had bugs. See followup comment below for new attachment.
apc123 replied on at Permalink Reply
apc123
Hey Jordan,

Thanks for the input. I applied your new template but now the page outputs this:
<li nav-page-<?php echo $_c->getCollectionID(); ?>>


I'm not a php person so it is not obvious to me what in the list_item_classes.php file needs to change.

cheers,
Anthony
jordanlev replied on at Permalink Reply
jordanlev
Hi Anthony,
Oops -- I had some major issues in there (that's what I get for banging out code without testing it!).
Sorry about that.

Im attaching an updated version that should work as advertised.

Thanks for letting me know!

-Jordan
apc123 replied on at Permalink Reply
apc123
Hi Jordan,

This is the current error:
Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING in /concrete_stable/blocks/autonav/templates/list_item_classes.php on line 68

cheers,
Anthony
jordanlev replied on at Permalink Best Answer Reply 1 Attachment
jordanlev
Ugh... I am not having a good day :-/
Okay here's a new one that doesn't have even more typos in it.
apc123 replied on at Permalink Reply
apc123
perfect.
this is exactly what I needed and could not do myself.

thanks,
Anthony
michaelPassion replied on at Permalink Reply
Hi Jordan,
I know this is an older thread, hopefully you'll respond.
I've followed the instructions here and they workrd fine for giving my individual list items seperate classes.
However, two of the list items had a dropdown sub-menu that no longer works with the new changes.
The way I added the nav area in the header was:

<div id="nav">
   <?php 
     $a = new Area('Navbar');
     $a->display($c);
   ?>
     </div>


The code that this replaced was a lot more complicated, and made references to 'displaySubPages'.

<div id="nav">
   <?php 
    $bt = BlockType::getByHandle('autonav');
    $bt->controller->displayPages = 'top';
    $bt->controller->orderBy = 'display_asc';                    
    $bt->controller->displaySubPages = 'all'; 
    $bt->controller->displaySubPageLevels = 'custom';
         $bt->controller->displaySubPageLevelsNum = '1';                   
    $bt->render('templates/main_menu');
   ?>
     </div>


I have tried to include this in various ways, to no avail. Any help would be much appreciated.
Thanks.

P.S. The dropdowns work if I'm on one of the pages the dropdown lists.
Weird....
jordanlev replied on at Permalink Reply
jordanlev
Sorry, I don't quite understand what the problem you're having is :(

It looks like you replaced a hard-coded autonav block with an "Area". Did you then add an autonav block to that area via the web interface? Did you add it to every page (or put it in the Page Defaults and then "Setup on Child Pages")?

What settings do you have for the autonav block? Did you tell it to show all sub-pages?
michaelPassion replied on at Permalink Reply
To be honest Jordan, I'm not entirely sure what I'm doing myself.

The autonav that was originally part of the 'Luminous Theme' from C5 mix. I took that out & replaced it with an Area. I then added an Autonav to that area.
Next I just followed the steps on this page to create custom classes for each list item.
I then styled my list items and copied to the scrapbook for the other pages on the site.
This worked fine, but as I said, the dropdown menu no longer works.

Probably not the most effective, or efficient way to do it, but I'm still at the steep end of my concrete5 learning curve.

Thanks for the reply.
jordanlev replied on at Permalink Reply
jordanlev
I'm assuming you put the custom classes cod into a custom template for the autonav block -- did you choose that custom template after you put the block on the page?
michaelPassion replied on at Permalink Reply
That's the code you gave in the attachment?
Yes, I done that.
Scratching my head at this point...
jordanlev replied on at Permalink Reply
jordanlev
Can you provide a link to the site? It's really hard to tell because it could be any of a number of things. I imagine it's probably an issue with your CSS not styling the template html properly, but I'd have to see the site to know for sure.
jordanlev replied on at Permalink Reply
jordanlev
I think the problem is you have "dropdown level" set to "1". The autonav is tricky in a lot of ways (as you know), one of which is that it sometimes treats the home page as being on "top" of all other site pages, and other times treats the home page as being "above" all other site pages. Since you've set your menu to show items 1 level deep, when you're on the home page it interprets that as meaning all of the top-level pages of your site (look at your sitemap in the dashboard to see what I'm talking about -- notice how the home page is actually above everything else). I think to work around this schizophrenic behavior you'll need a different autonav setting depending on if you're on the home page or not. Could try changing this line:
$bt->controller->displaySubPageLevelsNum = '1';

...to this:
if ($c->getCollectionID() == HOME_CID) {
  $levelNum = 2;
} else {
  $levelNum = 1;
}
$bt->controller->displaySubPageLevelsNum = $levelNum;

(or you could use this code which does the same exact thing -- just more compact):
$bt->controller->displaySubPageLevelsNum = ($c->getCollectionID() == HOME_CID) ? 2 : 1;


What we're doing here is saying that if the user is on the home page, show the menu 2 levels deep (which will be the top-level pages and their sub-pages), but if not on the home page then only show 1 level deep (which is how it's currently working on your interior pages, which is correct).

-Jordan
PassionForCreative replied on at Permalink Reply
PassionForCreative
Hi Jordan,

I'm working on this site menu with Michael and although we are following your instructions, and they logically make sense - we can't seem to get them working.

This is our auto nave at the minute. Hard coded in, options set up almost identical to how they were for the standard autonav that was coded into the theme we hacked to pieces to make this theme.

<?php 
      $bt_main = BlockType::getByHandle('autonav'); 
   $bt_main->controller->displayPages = 'top'; // top, above, below, second_level, third_level, custom (Specify the displayPagesCID below)
   $bt_main->controller->orderBy = 'display_asc';  // display_asc, display_desc, chrono_asc, chrono_desc, alpha_desc 
   $bt_main->controller->displaySubPages = 'relevant';  // none,  relevant, relevant_breadcrumb, all
   $bt_main->controller->displaySubPageLevels = 'custom'; //custom, none
   $bt_main->controller->displaySubPageLevelsNum = ($c->getCollectionID() == HOME_CID) ? 2 : 1; // Specify how deep level 
   $bt_main->render('templates/list_item_classes'); // Specify your template or type "view" to use default
      ?>


At this stage I'm thinking that we may just knock off the dropdown menu from the auto nav altogether as it is only used on the two very end tabs and there is info that the client wants users to read on the parent pages anyway. Is there anything in the code supplied at the top of this post that could be removed to get it working or is it just one of things we'll have to do without.

Thanks for all the help so far with this.
jordanlev replied on at Permalink Reply
jordanlev
Sorry, but unfortunately I don't know how to solve the problem you're having -- there are just too many variables involved and it could be any of a number of things.

If I recall correctly, the menu is working fine in terms of layout/design, but the dropdown isn't dropping down on the homepage. The code I gave you should have fixed that, so I'm not sure if you're having another problem now or if that just didn't do anything. If it doesn't work it might be due to caching -- you might want to try clearing the C5 cache (Dashboard -> Sitewide Settings) and see if that fixes it.

Otherwise I'm out of ideas :(

-Jordan
teknojunkey replied on at Permalink Reply
teknojunkey
Iv been looking for a solution to this ...

the easiest method i found for this was to create a new page attribute "text" call it "customclass" and add the class for each page.

Create a new autonav template and use this .. changes to lines 29 &
78
<?php  
   defined('C5_EXECUTE') or die("Access Denied.");
   $aBlocks = $controller->generateNav();
   $c = Page::getCurrentPage();
   $containsPages = false;
   $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;
      }else{
jordanlev replied on at Permalink Reply
jordanlev
I've actually included this functionality in a template that can replace the built-in autonav template -- it has a bunch of different class options (including the one you mention), and also the html is easier to untangle and modify if that's something you need to do:
https://raw.github.com/jordanlev/c5_clean_block_templates/master/aut...
teknojunkey replied on at Permalink Reply
teknojunkey
Great stuff .. cheers
JohntheFish replied on at Permalink Reply
JohntheFish
erlicha replied on at Permalink Reply
Great job.