Custom template for autonav

Permalink 1 user found helpful
Hello!

I'm editing an already done custom template for the autonav. I'm asked to add a dropdown menu if they are any sub-item to the parent item. I've searched a lot and have a idea of how to do it (with CSS) but how i said before, the php is already done and they are different classes defined for the first item and last, but the rest of items are all with no class...and i was wondering how to identify the sub-items so that i can hide them from css and show them in hover.

I hope i explained myself well, if no I'm sorry and i'll try again!
Thanks!

View Replies:
jeckerman replied on at Permalink Reply
jeckerman
If you look at the header_menu.php template in /concrete/blocks/autonav/templates/

That should help you with figuring out how the child pages work.

I hope that is what you were looking for, if not; holler and we'll get it figured out.

- Josh
suso replied on at Permalink Reply
I've had a look at it but i dont really understand the code...i guess this are the lines where you identify the child pages...right?

if ($_c->getCollectionAttributeValue('replace_link_with_first_in_nav')) {
            $subPage = $_c->getFirstChild();
            if ($subPage instanceof Page) {
               $pageLink = $nh->getLinkToCollection($subPage);
            }
         }


I just need to identify them, so that i can assign them a class and hide them from css and show them with a hover.
Thanks!
jeckerman replied on at Permalink Reply
jeckerman
Ah, I see. Try going this route:

Click on your editable autonav block, set its settings as follows:

- Pages Shoulder Appear: in their sitemap order
- Viewing Permissions: leave unchecked
- Display Pages: at the top level
- Sub Pages to Display: Display All
- Sub-Page Levels: Display a custom amount
- Levels: 1

That will only display the top level navigation. And here is a snippet about the autonav and customizing it. (from the new Concrete 5 book) I suggest picking up a copy, well worth it.

---
Autonav output

The autonav controller produces an HTML output which is compatible with most jQuery libraries you can find. It uses an UL/LI structure to create a proper hierarchical representation of the pages we show in our navigation.

Before we look at the actual output, here are some words about the process which generates the output. The autonav block controller uses all the settings you make when you add the block. It then creates an array of pages which doesn't have any children—it's a flat array. Unlike what some of you would expect, there's no real recursion in the structure which you have to process in the block template.

How's an autonav block template supposed to print a hierarchical structure? That's not too difficult; there's a property called level for each element in the array. You simply have to check what happens to that level. Is the level of the current page element bigger than the one from the previous element? If yes, create a new child to the current page. Does it decrease? If yes, close the HTML tags for the child elements you created when the level increased. Does this sound a bit abstract? Let's look at a simplified, not working, but commented autonav template:

<?php
autonav templatedefined('C5_EXECUTE') or die(_("Access Denied."));
// get the list of all pages matching the selection
$aBlocks = $controller->generateNav();
$nh = Loader::helper('navigation');
echo("<ul class=\"nav\">");
// loop through all the pages
foreach($aBlocks as $ni) {
$_c = $ni->getCollectionObject();
// get the level of the current element.
// This is necessary to create the proper indentation.
$thisLevel = $ni->getLevel();
// the current page has a higher level than the previous
// page which means that we have to print another UL
// element to indent the next pages


The templates we're going to create don't change a lot from the default PHP template. We mostly use the HTML structure the default template generates and only add some CSS and JavaScript. Understanding every detail of the default autonav template isn't necessary, but still helps you to get the most out of the autonav block.

What we must understand is the HTML structure shown as follows—it's what you'll have to work with when you create a custom navigation or layout:

<ul class="nav">
<li class="nav-path-selected">
<a class="nav-path-selected" href="/">Home</a>
</li>
<li class="nav-selected nav-path-selected">
<a class="nav-selected nav-path-selected" href="/index.php/about/">About</a>
<ul>
<li>
<a href="/index.php/about/press-room/">Press Room</a>
</li>
<li>
<a href="/index.php/about/guestbook/">Guestbook</a>
</li>
</ul>
</li>


Each new level added a new ul element which contains an li element for each page along with an a element to make it clickable. Child pages within a ul element belong to their parent, meaning that the li element of the parent is closed when all the children have been printed.

The output uses the default template which adds some classes you can use to style the navigation:

nav: The main ul tag contains this class. Use it to access all elements of the navigation.

nav-selected: This class is assigned to the elements if they belong to the current page.

nav-path-selected: This class can be found on pages which are above the current page. They belong to the path of the current page, and are thus called path-selected.
---
duncanp replied on at Permalink Reply
Jeckerman your information have been very informative. DO you know if there is any way I can change the way auto nav outputs the menu? I for example haven't designed my menu with the same <ul> <li> structure and the css classes are obviously different to the way it outputs. I am looking for a way where I can change the code that is placed before and after each link so I don't have to modify my original design to much. Changing to <li> elements just wont work...

This is an example of my menu items:

<a href="#" class="mi" ><br />HOME<br /></A>
<a href="#" class="mi" ><br />PAGE ONE<br /></A>
<a href="#" class="mi" ><br />MENU ITEM<br /></A>
<a href="#" class="mi" ><br />CONTACT<br /></A>


So Ideally I would want my menu items to be enclosed by that surrounding code... Anyone?

Thanks in advance for any help...
Benjamin replied on at Permalink Reply
Benjamin
i have the same problem. i have a custom font and hover and design all in html and css, but in the nav setup for the custom template there seems to be no way to reference these. they are looking at the c5 sitemap pages for navigation. i need that so i can navigate, but i want to keep the LOOK. and the custom hover and click. i am trying to link them together as well. :P
leinteractive replied on at Permalink Reply
leinteractive
Have a look at this thread:
http://www.concrete5.org/community/forums/customizing_c5/auto-nav-t...

There is a working auto-nav template in there (that I use all the time) which applies a unique CSS class to each LI and A tag in your menu tree. From there you can target those with your Style Sheets to achieve any effect you want.
Benjamin replied on at Permalink Reply
Benjamin
I've seen that and i know that is how you do it, but i'm now sure link those together. lol. Still trying to figure it out. Thanks for the reply though!
leinteractive replied on at Permalink Reply
leinteractive
You're not sure how what links together? You're not sure how to get the template to work with the auto-nav? Or you're not sure how the template links with your CSS?
Benjamin replied on at Permalink Reply
Benjamin
yes actually to both of those. As far as i can tell, from the original html the buttons and links and formatting for the navagation are hrefs and set parameters, etc.
<ul class="nav">
         <li><a href="<?=$this->getThemePath()?>/#" class="team">our.team</a></li>
         <li><a href="<?=$this->getThemePath()?>/#" class="team">our.work</a></li>
         <li><a href="<?=$this->getThemePath()?>/#" class="cap">our.capabilities</a></li>         
         <li><a href="<?=$this->getThemePath()?>/#" class="team">contact.us</a></li>         
      </ul>


In concrete 5 and in those files and adjustments up there i haven't seen any of those kinds of referencing. I don't know if they have been converted to be represented by a class and a library, or if they are just being called in a different way. like here it looks like global variable references?
if ($c->getCollectionID() == $_c->getCollectionID()) { 
            echo('<li class="nav-selected nav-path-selected"><a class="nav-selected nav-path-selected" ' . $target . ' href="' . $pageLink . '">' . $ni->getName() . '</a>');
         } elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
            echo('<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '" ' . $target . '>' . $ni->getName() . '</a>');
         } else {
            echo('<li><a href="' . $pageLink . '" ' . $target . ' >' . $ni->getName() . '</a>');
         }   
         $lastLevel = $thisLevel;
         $i++;
I need concrete5 to be able to navigate it's way, and preserve the custom coding for the site. Also, if possible still allow that to be changed etc.
leinteractive replied on at Permalink Reply
leinteractive
I think you should install the template and see how it works, and then decide if it does what you want.

To install it, just copy/paste the code I posted into a new .php file. You can call it whatever you want. I call mine navigation_custom.php

Take that file and upload it to your sever in this directory:

blocks/templates/autonav/

When you place an autonav block on the page, click back onto it and you'll see and option for Templates at the bottom of the dialog menu. Choose this and in your list of choices you'll see the new template you uploaded. If you called your template file navigation_custom.php, then the template will be called Navigation Custom.

So, let's say your site menu structure looks like this:

Home
Item 1
---Sub Item 1.1
---Sub Item 1.2
---Sub Item 1.3
Item 2
Item 3
---Sub Item 3.1
---Sub Item 3.2
---Sub Item 3.3

Then this is how that template will output the code for your menu structure:

<ul class="nav">
  <li class="nav-item-1 nav-first nav-selected nav-path-selected"><a href="/" class="nav-item-1 nav-first nav-selected nav-path-selected">Home</a></li>
  <li class="nav-item-65"><a href="/item1/" class="nav-item-65">Item 1</a>
    <ul>
      <li class="nav-item-66 nav-first"><a href="/item1/sub-item-1-1/" class="nav-item-66 nav-first">Sub Item 1.1</a></li>
      <li class="nav-item-67"><a href="/item1/sub-item-1-2/" class="nav-item-67">Sub Item 1.2</a></li>
      <li class="nav-item-68"><a href="/item1/sub-item-1-3/" class="nav-item-68">Sub Item 1.3</a></li>
    </ul>
  </li>
  <li class="nav-item-69"><a href="/item2/" class="nav-item-69">Item2</a></li>
  <li class="nav-item-70"><a href="/item3/" class="nav-item-70">Item3</a>
    <ul>
      <li class="nav-item-71 nav-first"><a href="/item3/sub-item-3-1/" class="nav-item-71 nav-first">Sub Item 3.1</a></li>
      <li class="nav-item-72"><a href="/item3/sub-item-3-2/" class="nav-item-72">Sub Item 3.2</a></li>
      <li class="nav-item-73"><a href="/item3/sub-item-3-3/" class="nav-item-73">Sub Item 3.3</a></li>


Once that is done, you simply target your LI tags accordingly from your CSS using the classes assigned to them.

So if you wanted to get Sub Item 2 from your 3rd nav item, your CSS would target like this:

ul#nav li.nav-item-70 li.nav-item-72 {
/* ---- Styles in Here ----- */
}


Does that help?
Benjamin replied on at Permalink Reply
Benjamin
yes a little, at least i think so. i understand that what you have just showed is how to get the auto-nav system to show your button by showing you to the classes in the css on click. correct? now that you have connected with what the buttons look like, how do you make it go to the other pages you have set up in the sitemap. mine just gives the loader error on click. the buttons look nice and all, but the actual navigation never leaves. i did find this, i'll bet this is what happened to me:http://www.concrete5.org/community/forums/customizing_c5/problem-wi...
leinteractive replied on at Permalink Reply
leinteractive
What sort of error are you getting? Can you post the code for your template file? Do you have link you can post that we can take a look at?
Benjamin replied on at Permalink Reply
Benjamin
http://screencast.com/t/zKrU2YlImGwN this is the link to what the error says. it's pretty much line for line what is in that post above that i linked. the code for this nav is:

<ul class="nav">
  <li class="nav-item-1 nav-first nav-selected nav-path-selected"><a href="/" class="nav-item-1 nav-first nav-selected nav-path-selected">Home</a></li>
  <li class="nav-item-65"><a href="<?=$this->getThemePath()?>/#" class="team">our.team</a></li>
  </li>
  <li class="nav-item-69"><a href="<?=$this->getThemePath()?>/#" class="team">our.work</a></li>
  <li class="nav-item-70"><a href="<?=$this->getThemePath()?>/#" class="cap">our.capabilities</a></li>
  </li>
   <li class="nav-item-74"><a href="<?=$this->getThemePath()?>/#" class="team">contact.us</a></li>
   </li>
 </ul>
leinteractive replied on at Permalink Reply
leinteractive
Sounds to me like you're trying to hardcode this into your template, which is the reason it's not working.

Replace all of that code you just posted with this:

<?php
   $a = new Area('Header Nav');
   $a->setBlockLimit(1);
   $a->display($c);      
?>


Once you upload that to your site, login to your site, go to the homepage and put your site in EDIT MODE.

You should then see a new Area where your navigation used to be. Click on this Area and choose New Block. Insert an AutoNav block and save.

Your site menu should now show up here.

Next, follow the instructions I posted a few posts up about installing the autonav template so that each item has a custom CSS class.
Benjamin replied on at Permalink Reply
Benjamin
sorry it's taken so long to get back to this, been doing other work, but i'm back and here to solve this puzzle.

the code i posted is what is in the auto-nav custom template. the code you posted for me to put in there is what is in the main default.php file that is for the main template.

so, that is kind of confusing as, this auto-nav is supposed to give each button it's own css code, and the links should go to the various pages in Concrete5, but it doesn't do that yet, it just gives the loader error. i'm sure there is something wrong, just haven't figured it out yet. i'm going to keep on till it's mastered.
leinteractive replied on at Permalink Reply
leinteractive
Your AutoNav custom template should have this code:

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


and your default.php file should have this code where your navigation should output:

<?php
   $a = new Area('Header Nav');
   $a->setBlockLimit(1);
   $a->display($c);      
?>


The AutoNav template file should be called something like autonav_custom_template.php (whatever you want really) and uploaded to this directory:

blocks/autonav/templates

Then, when you place your autonav on the page, click on it again and choose the Template option. From there, choose the name of the custom template you just uploaded to the directory above.
Benjamin replied on at Permalink Reply
Benjamin
so you are saying the output is what you will find in firebug that gives the ul and li. The other is just the autonav code?

OH you are saying REFERENCE the OUTPUT code VIA firebug and link THOSE "references" directly to the CSS. ahhhhhhhhhhhh. now to test it out! the theory anyway!
leinteractive replied on at Permalink Reply
leinteractive
The output is neither of the two codes snippets I posted in my previous post.

The output will give you your UL and LI tags with the appropriate CSS classes added to them. Those of which you can reference in your style sheets to style your menu accordingly.
Benjamin replied on at Permalink Reply
Benjamin
anywhere i can find some way of How to do that? you offered one line up there earlier. but that was one line, there are several lines right? at least in my css there are several lines under the .nav li stuff that isn't being referenced ... yet!
leinteractive replied on at Permalink Reply
leinteractive
Do you have your navigation working correctly yet? There's no sense in trying to write CSS if you don't know what the output code is going to look like.

Get the autonav working first, then jump into the CSS.
Benjamin replied on at Permalink Reply
Benjamin
thank you, yes, the auto nav was working the whole time. the problem was the pages that it went to hadntbeen created yet. the solution was the one above, meaning that i had been trying to put the auto nav generated code that you see in fire bug, (but it is in the html to begin with so it was very confusing)(My error was that i thought you had to use that somewhere to tell the autonav where the css styles were. You had the right answer up there and on the other place with linking the generated ul and li with the styles set up in the css. it worked. now i'm just trying to adjust the spacing so that all the links fit in a tight row, i got one dropping down the the next line, but they all work going to the right pages and they LOOK like the original design in the css. YAY! thank you for your help and might i say you have some awesome good looking websites dude!
leinteractive replied on at Permalink Reply
leinteractive
How could the autonav have been working correctly if the pages hadn't been created yet? The autonav can't output a link to a page the doesn't exist.

Thanks for the kinds words...always glad to help!
Benjamin replied on at Permalink Reply
Benjamin
lol i mean, the pages hadn't been themed yet. i had them in the sitemap. :D
leinteractive replied on at Permalink Reply
leinteractive
Gotcha...that makes sense. Now it's just a CSS thing. Good luck!