Editing (v7+)

Navagation Bar and New Pages

Permalink March 28, 2011 at 10:53 AM

Hi folks, I'm new to C5 (CMS in general) and php and I've a question regarding navigation bars and how to link them to new pages. Bearing in mind I've already done the html and CSS markup for a navigation bar, and that this seems to work fine in C5 when I added the <li> markup to the html block (I assume this is an acceptable way of doinbg it), I'm wondering what the process is with regards to hyperlinking the nav bar to new pages in C5.

Understanding the <a href="#"> process isn't a problem. However, what confuses me is how this works in a CMS/php environment. I've created a few test pages via the toolbar at the top of the page, but I can't seem to find them afterwards. I would have thought that all that was needed was to <a href="#"> these pages but perhaps I am required to create an about.php etc.

Any advice or links to tutorials?

Test site is here:http://www.tirzah.ie/concrete5/...

Squibs replied on Mar 28, 2011 at 1:22 pm Permalink Reply

For clarification sake, I just want to add the following.

1) I have HTML and CSS markup already done
2) I've created some test pages and they appear in the sitemap
3) I've played around with the auto-nav function but I wasn't sure if it would meet my needs so I added a html block and placed my nav <li> in there
4) I was hoping that a simple <a href> would work e.g.

<li id="about"><a href="http://www.mysite/concrete5/index.php/about">About</a></li>

It doesn't :( The styling is fine but I can't get things to link.

Steevb replied on Mar 28, 2011 at 2:06 pm Permalink Reply

Hi Squibs,

Did you apply the right function to your theme?

Take out ALL your nav content and replace with:_

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

It is a standard part of Concrete navigation.

Hope this helps.

Steev

Squibs replied on Mar 28, 2011 at 3:25 pm Permalink Reply

Hey Steev,

Thanks for the reply. I've done that and created a number of editable areas even before this.

I've now realised that I have to use the auto-nav option (or so it seems) and that much of what I wrote above probably doesn't now apply.

The link below was a help up until the point where I'm told to edit the view.php file to reflect the CSS. Unfortunately I don't yet know PHP so I'm looking for any advice on how to go about this.

(link:http://www.concrete5.org/community/forums/usage/auto-nav_css/)...

The CS is pretty simple. It will be a simple rollover navigation bar. The problem is editing view.php to reflect the 6 ids. I'm sure it's just a simple matter of putting in a few lines. But alas I don't know where to start. Any ideas?

@charset "utf-8";
/* CSS Document */
#header{margin-top:280px; float:left; width:900px; display:block;}
#header ul{margin:0; padding:0 0 0 150px;}
#header li{float:left; height:30px; width:80px; list-style-type:none; margin:10px 10px 0 10px; cursor:hand;}
#home, #about, #news, #involved, #services, #links{background:url(images/button2.gif) no-repeat 0 0;}
#home:hover, #about:hover, #news:hover, #services:hover #services:hover, #links:hover{background-position:0 -30px;}
#home span, #about span, #news span, #involved span, #services span, #links span{position:absolute; top: -9999px;}

<?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>");
      }
   }
 
?>

stromberg replied on Mar 30, 2011 at 9:26 pm Permalink Best Answer Reply

You're right about the "few lines of code". You can add an id="name_of_your_page" to every <li> that your custom view.php puts out by editing the following (in view.php):

Go to line 67-71:

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 change that to

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

Does that put you on the right track?
The only difference is that I added this to the <li> elements:

id="' . $ni->getName() . '"

Squibs replied on Mar 31, 2011 at 7:15 am Permalink Reply

Many thanks. I'll look into this and report back at a later date.

Forums

Editing (v7+)

Navagation Bar and New Pages

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?