Planet CakePHP

First, I'm so sorry that it took this long for me to add more content to the site. I most definitely broke the 30 days thing, but I learned a lot in school so I'm going to call it a net gain.

Most sites, this one included, imploy "header navigation" to assist their users in finding what they are looking for. Sites like Digg.com, Debuggable.com, and GitHub (not to mention my own!) are all using them. They are a simple and logical way to express navigation but I've found that they are a pain in the ass to code up with css because most people insist on the active class tag being "active" and frankly that's stupid.

CSS is by definition a cascading style sheet. I like to think of it a waterfall (thats the only mental image that comes with cascade anyway) if you put red food colring in at the top of a waterfall it would travel all the way down to the bottom and it would be red there. There is another useful aspect of this analogy, not all parts of the waterfall are always spewing water over their edge. That is kind of liek a selective argument in CSS.

Traditionally with the CSS active tag the server has to track what page the user is on and set the active bit for its flag. The code usually looks something like this. This code is from Wild Flower's GitHub page

With CSS like this

repo_menu ul li.active a {
color:black;
}
repo_menu ul li a {
color:#979797;
font-size:110%;
padding:1em 1.25em 0.3em;
}

That to me is strange since it is a wholy stylistic thing that is only useful to the client side. That means that it shouldn't be processed by the server. Why should the server devote mips to calculating the active page when its so easy to make the client do it?

There are a lot of tricks to handle this effectively (and if you know about a better one, please leave a comment in the boxes below) but my personal favorite is as follows. CSS cascades based on conditional elements of the item which means that if you set an atribute to depend on a higher elements existance it will only be applied to the lower element if the higher one exists. Maybe a little code will help make that more clear. This is the HTML and CSS for a very simple implementation of this property

...

• Home
• Blog
• Contact

...

...

With a little CSS love

body.home #nav li a.home,
body.blog #nav li a.blog,
body.contact #nav li a.contact {
color: blue;
}

Now, on the home page you just have to add the class "home" to the body. On the blog you add "blog" and on the contact page you add "contact." Simple enough, right? The answer is no. There has never been anything that was too easy. I take it one step further and automaticall add the classes to my body, this is what my body tag usually looks like in my layout files.

params['controller'].' '.$this->params['controller'].$this->params['action']); ?>">

This will add two very useful classes to my body tag on every page (not to mention cost less in processing power than would be required to do a check for every menu item.) The first tag is the current controller and the second is the controller and the action concatinated together. This is really usefull because it adds two levels of for each menu item, you can highlight when an entire controller is active or you can do it for a specific action in the controller. By adding this 1 liner to my body tag I was able to remove all the "active logic code" and replace it with this much more conscise tidbit

• <?php echo $html->link('Home', '/'); ?>
• <?php echo $html->link('My Paper', array('controller' => 'paper', 'action' => 'index')); ?>
• <?php echo $html->link('My Topics', array('controller' => 'topics', 'action' => 'index')); ?>
• <?php echo $html->link('My Feeds', array('controller' => 'feeds', 'action' => 'index')); ?>
• <?php echo $html->link('My Statistics', array('controller' => 'statistics', 'action' => 'index')); ?>
• <?php echo $html->link('Log out', array('controller' => 'users', 'action' => 'logout')); ?>

And the accompanying CSS

body.pageshome ul#nav li.pageshome a,
body.wizard ul#nav li.wizard a,
body.userslogin ul#nav li.userslogin a,
body.feeds ul#nav li.feeds a,
body.topics ul#nav li.topics a,
body.statistics ul#nav li.statistics a,
body.paper ul#nav li.paper a
{
background:#fff;
color:#333;
border-right:2px solid #6CCC26;
border-bottom:2px solid #6CCC26;
}

In writing this I had a few more ideas, there is no reason that you need to have all of your active tabs clustered together like I have them, if your style says that the active link should be orange on one page and pink on the next go for it! I hope this has been helpful and as always -- if you have any questions, just ask.
Sincerely,~Andrew Allen