Developing (v7+)

Problem with styling autonav

Permalink July 22, 2011 at 2:11 PM

Hello -

I've created some templates and have been importing them into concrete, trying to learn all the ins and outs of the program. Concrete is great for easily making a template concretized for editing.

When I first imported a template it had a single level menu, which I sucessfully styled. I thought, "Great, the html is easy to import and the menu system is controllable."

Then I tried a dropdown menu with active, passive, and hover states with a couple of sub-menus.

This original template can be seen athttp://www.mikca.com/temp, the concretized one is athttp://www.mikca.com/cms.

The view.php file I'm using now, is the concrete base view.php. I've tried other versions of view.php I've found in the forums while trying to solve this.

Here is the html produced by concrete:

<ul class="art-hmenu">
  <li class="nav-selected nav-path-selected">
  <a class="nav-selected nav-path-selected"  href="/cms/">Home</a></li>
  <li><a href="/cms/index.php/page-2/"  >Page 2</a></li>
  <li><a href="/cms/index.php/page-3/"  >Page 3</a></li>
</ul>

and the original with the sub-menus

<ul class="art-hmenu">
        <li>
            <a href="./page-1.html" class="active"><span class="l"></span><span class="r"></span><span class="t">Page 1</span></a>        </li>    
        <li>
            <a href="./page-2.html"><span class="l"></span><span class="r"></span><span class="t">Page 2</span></a>        </li>    
        <li>
            <a href="./page-3.html"><span class="l"></span><span class="r"></span><span class="t">Page 3</span></a>
            <ul>
                <li>
          <a href="./page-3/page-3-1.html">Page 3.1</a></li>
                <li>                    
                <a href="./page-3/page-3-2.html">Page 3.2</a></li>
            </ul>
        </li>    
    </ul>

and my view.php file

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

Viewing 15 lines of 73 lines. View entire code block.

 
<?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{
            $selectedPathCIDs[]=$cParentID;
            $inspectC=Page::getById($cParentID);
        }
    }     
 
    foreach($aBlocks as $ni) {
        $_c = $ni->getCollectionObject();
        if (!$_c->getCollectionAttributeValue('exclude_nav')) {
 
 
            $target = $ni->getTarget();
            if ($target != '') {
                $target = 'target="' . $target . '"';
            }
            if (!$containsPages) {
                // this is the first time we've entered the loop so we print out the UL tag
                echo("<ul class=\"art-hmenu\">");
            }
 
            $containsPages = true;
 
            $thisLevel = $ni->getLevel();
            if ($thisLevel > $lastLevel) {
                echo("<ul>");
            } else if ($thisLevel < $lastLevel) {
                for ($j = $thisLevel; $j < $lastLevel; $j++) {
                    if ($lastLevel - $j > 1) {
                        echo("</li></ul>");
                    } else {
                        echo("</li></ul></li>");
                    }
                }
            } else if ($i > 0) {
                echo("</li>");
            }
 
            $pageLink = false;
 
            if ($_c->getCollectionAttributeValue('replace_link_with_first_in_nav')) {
                $subPage = $_c->getFirstChild();
                if ($subPage instanceof Page) {
                    $pageLink = $nh->getLinkToCollection($subPage);
                }
            }
 
            if (!$pageLink) {
                $pageLink = $ni->getURL();
            }
 
            if ($c->getCollectionID() == $_c->getCollectionID()) {
                echo('<li class="nav-selected nav-path-selected "><a class="nav-selected nav-path-selected" ' . $target . ' href="' . $pageLink . '"><span class="l"></span><span class="r"></span><span class="t">' . $ni->getName() . '</span></a>');
            } elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) {
                echo('<li class="nav-path-selected "><a class="nav-path-selected" href="' . $pageLink . '" ' . $target . '><span class="l"></span><span class="r"></span><span class="t">' . $ni->getName() . '</span></a>');
            } else {
                echo('<li><a href="' . $pageLink . '" ' . $target . ' ><span class="l"></span><span class="r"></span><span class="t">' . $ni->getName() . '</span></a>');
            }    
            $lastLevel = $thisLevel;
            $i++;
 
 
        }
    }
 
    $thisLevel = 0;
    if ($containsPages) {
        for ($i = $thisLevel; $i <= $lastLevel; $i++) {
            echo("</li></ul>");
        }
    }
 
?>

Thanks for your help.

Fernandos replied on Jul 22, 2011 at 3:57 pm Permalink Reply

What's your question?

mikca replied on Jul 22, 2011 at 5:24 pm Permalink Reply

Hi Fernandos,

I'm looking for advice on how to get the navigation for the concrete site to look like that on the original template.

I'm not sure I'm setting up view.php correctly, I was thinking that maybe some new eyes might be able to spot what I'm missing. What am I doing wrong?

Thanks for checking with us.

mikca replied on Jul 26, 2011 at 12:57 pm Permalink Reply

I've straightened all this out. The answers are really pretty simple. Here's how I imported my navigation into Concrete5.

First, setup the file structure you'll need. Create the structure under the '/blocks' directory (not /concrete/blocks).

/autonav/templates/Your_Menu_Name/images

Add two files under Your_Menu_Name; view.css and view.php.

Open the css for your template, isolate your menu's css, copy and paste the classes into view.css.

Examine view.css to identify the necessary images and copy them into the 'images' directory.

Make sure the image paths in the css are mapped to 'images' or, of course, rename the images directory to match the css. Either way, make sure the paths in the css point to the correct directory.

Here's the basic view.php file.

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

Viewing 15 lines of 73 lines. View entire code block.

 
<?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{
         $selectedPathCIDs[]=$cParentID;
         $inspectC=Page::getById($cParentID);
      }
   }    
 
   foreach($aBlocks as $ni) {
      $_c = $ni->getCollectionObject();
      if (!$_c->getCollectionAttributeValue('exclude_nav')) {
 
 
         $target = $ni->getTarget();
         if ($target != '') {
            $target = 'target="' . $target . '"';
         }
         if (!$containsPages) {
            // this is the first time we've entered the loop so we print out the UL tag
            echo("<ul class=\"nav\">");
         }
 
         $containsPages = true;
 
         $thisLevel = $ni->getLevel();
         if ($thisLevel > $lastLevel) {
            echo("<ul>");
         } else if ($thisLevel < $lastLevel) {
            for ($j = $thisLevel; $j < $lastLevel; $j++) {
               if ($lastLevel - $j > 1) {
                  echo("</li></ul>");
               } else {
                  echo("</li></ul></li>");
               }
            }
         } else if ($i > 0) {
            echo("</li>");
         }
 
         $pageLink = false;
 
         if ($_c->getCollectionAttributeValue('replace_link_with_first_in_nav')) {
            $subPage = $_c->getFirstChild();
            if ($subPage instanceof Page) {
               $pageLink = $nh->getLinkToCollection($subPage);
            }
         }
 
         if (!$pageLink) {
            $pageLink = $ni->getURL();
         }
 
         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++;
 
 
      }
   }
 
   $thisLevel = 0;
   if ($containsPages) {
      for ($i = $thisLevel; $i <= $lastLevel; $i++) {
         echo("</li></ul>");
      }
   }
 
?>

Find the navigation area in your index.html and use that code to make these corresponding changes.

My html navigation looks like this:

<ul class="hmenu">
        <li>
            <a href="./page-1.html" class="active"><span class="l"></span><span class="r"></span><span class="t">Page 1</span></a></li>    
        <li>
            <a href="./page-2.html"><span class="l"></span><span class="r"></span><span class="t">Page 2</span></a></li>    
        <li>
            <a href="./page-3.html"><span class="l"></span><span class="r"></span><span class="t">Page 3</span></a>
            <ul>
               <li>
          <a href="./page-3/page-3-1.html">Page 3.1</a></li>
                <li>                    
                <a href="./page-3/page-3-2.html">Page 3.2</a></li>
            </ul>
        </li>    
    </ul>

So, take the ul class from above - class="hmenu" and change this line of view.php

echo("<ul class=\"nav\">");

echo("<ul class=\"hmenu\">");

Likewise, you must change the li tags. You just want to mimic your html file in the view.php.

So, I'm going to change this block of code in view.php

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>');
}

and merge this example of the li classes to it.

<li>
  <a href="./page-1.html" class="active"><span class="l"></span><span class="r"></span><span class="t">Page 1</span></a>        
</li>

Notice below, in this case I just added the span's between the 'a' tag's closing and the menuitem name and then closed the span after the name.

Leave everything else in place. Be sure and change the code in all three conditions.

if ($c->getCollectionID() == $_c->getCollectionID()) { 
   echo('<li class="nav-selected nav-path-selected "><a class="nav-selected nav-path-selected" ' . $target . ' href="' . $pageLink . '"><span class="l"></span><span class="r"></span><span class="t">' . $ni->getName() . '</span></a>');
} elseif ( in_array($_c->getCollectionID(),$selectedPathCIDs) ) { 
   echo('<li class="nav-path-selected"><a class="nav-path-selected" href="' . $pageLink . '" ' . $target . '><span class="l"></span><span class="r"></span><span class="t">' . $ni->getName() . '</span></a>');
} else {
   echo('<li><a href="' . $pageLink . '" ' . $target . ' ><span class="l"></span><span class="r"></span><span class="t">' . $ni->getName() . '</span></a>');
}

I also had an active state in my navigation. The active menu selection is passed to the concrete in the class 'nav-selected', which is placed in the 'li' and 'a' tags. To adapt to this, I edited view.css and changed all the 'active' classes to 'nav-selected'.

That's about it. Go to your autonav block, Right click select Custom Template and select your new menu and update it.

Right click again and select 'Edit'. Set the
'Display Pages' to 'at the top level'
'Sub Pages to Display' to 'Display All'
'Sub-Page Levels' to 'Display All'

Click Update.

You're done.

If everything went right, your new menu is in place. This same process works with both horizontal and vertical menus.

Good Luck

Forums

Developing (v7+)

Problem with styling autonav

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?