Forums

Integrating Auto Nav

Permalink
Hi and thank-you for taking the time to read this. I am currently building a website in the image of our soon-to-be previous website with concrete 5 navigation functionality built in. Now I am fine with adding the areas and have found a fair few guides on concrete 5 however when it comes to the autonav I have struggled to find anything specific enough.

Here is our existing menu, what I am trying to do is give the top level autonav pages the same styling, and then when hovered over give the drop down pages the same simulated styling. Below are the two examples.

http://i58.tinypic.com/300v0a0.png...
http://i57.tinypic.com/2jbjeoi.png...

Just to be clear, I am asking how I can seperate the top level pages with specific styling with the dropdown sub pages which command styling of their own. And the ability to add to them and edit through concrete5's nav system.

If you could advise me, or point me to a resource that could help achieve just this please let me know!

Build: Concrete 5.7.3
 
Cahueya replied on at Permalink Reply
Hi Alex,

what you want could be tricky. Because you are actually using different images as background layers.

So you need to create a template for the autonav to override the original autonav. You will find much information about this when searching for "custom template" in the forums.

In the new template, you need to tell the PHP that it should add different classes to the <li> elements of the autonav, like "even" and "uneven".

so when looking in the code afterwards, it should be:
<nav>
   <ul>
      <li class="uneven">HOME</li>
      <li class="even">ABOUT US</li>
      <li class="uneven">PARENTS</li>
      <li class="even">CHILDREN</li>
      <li class="uneven">COMMUNITY</li>
   </ul>
</nav>


So your navigation now has distinguishable classes to apply different background images. You CSS should look something like:

nav .li .even {
   background-image: url(../images/tree1.png);
}
nav .li .uneven {
   background-image: url(../images/tree2.png);
}



I am not a PHP-person, so I cannot give you tips on how to change the view.php to output the even/uneven classes, but I am pretty sure this is the way to go. Maybe you can find someone on the forums who knows how to do that or google your way around how to do it.

Please let us know :)
alexm87 replied on at Permalink Reply
Thankyou very much it has definitely give me something to get on with.
Cahueya replied on at Permalink Reply
Look at this:

http://css-tricks.com/snippets/php/applying-evenodd-classes/...
Cahueya replied on at Permalink Reply
And this seems to do:

http://stackoverflow.com/questions/8540141/add-different-class-to-e...
Cahueya replied on at Permalink Reply
I've just realized myself that this can be done in pure CSS, but only CSS3-capable browsers.
So depending if you can risk that people with old browser cannot use this trick, you can apply:

li:nth-child(even) {
  background: #ccc;
}
li:nth-child(odd) {
  background: #fff;
}


Found here:
http://getkirby.com/blog/odd-even...

Of course you need to fit the CSS class element/class name and background image to your needs.

All the best.