Vertical CSS menu with dashes

I have been really very busy this month. Hardly had time to post anything on my blog. So thought I better post a short quick tutorial of a dashed vertical css menu.

Preview (it will look like this at the end)

(Link 1 is hovered in the image)

HTML (the ever popular unordered list!):

<div id="menu">
<h1>My menu</h1>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>

Now you will require some css.

CSS code:

#menu {
font-family: Arial;
width: 150px;
padding: 0px;
margin: 0px;
}

#menu h1 {
display: block;
background-color:#666666;
font-size: 16px;
padding: 5px 0px 5px 5px;
border: 1px solid #000000;
color: #ffffff;
margin: 0px;
width:147px;
}

#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}

#menu ul li {
margin: 0px;
padding: 0px;
}

#menu ul li a {
font-size: 14px;
display: block;
border-bottom: 1px dashed #bbbbbb;
padding: 5px 0px 2px 4px;
text-decoration: none;
color: #666666;
width:150px;
}

#menu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

Search Engine Friendly URLs with CakePHP

This helper will let you create search engine friendly urls without having you to change the controller logic.

Lets assume we have an 'articles' controller (/app/controllers/articles_controller.php) in our website. And the database table looks like this:
id, category_id, title, content, updated, created

The current url structure:
yoursite.com/articles/category/[category-id]/
yoursite.com/articles/view/[article-id]/

So, it means we dont have the 'title' of our articles included in the url. Only ID is present. This helper will let you add the title as well in the url.

Helper class

<?
class SefHelper extends Helper {

var $helpers = array('Html');

function clean($string) {
return r(" ", "-", strtolower($string));
}

function article($array) {
$link = "/articles/view/";
$link .= $array['Article']['id'] . "/";
$link .= $this->clean($array['Article']['content_title']) . "/";

return $link;
}

function category($array) {
$link = "/articles/category/";
$link .= $array['Category']['id'] . "/";
$link .= $this->clean($array['Category']['title']) . "/";

return $link;
}
?>

View

<? echo $html->link("Article Title here", $sef->article($articles_result)); ?>

The return of this helper function will be: /articles/view/[id]/[title-of-the-article]

Tabbed navigation using jQuery

Someone asked me to show how I created the tabbed navigation thing in my blog (right column). Just to let you know, I am just using an existing template for my blog, but wish to design one myself in future.

In this tutorial, I am going to show you how to create a simple tabbed navigation using jQuery (as you know, its a javascript library).

Requirements
You will require two javascript files for doing this.
jQuery library - Download here
jQuery UI (user interface) tabs - Download here

HTML code
Suppose we have three div elements in our webpage (box-1, box-2, and box-3), and we want them in tabs.

<div id="container-1">
<ul>
<li><a href="#box-1"><span>One</span></a></li>
<li><a href="#box-2"><span>Two</span></a></li>
<li><a href="#box-3"><span>Three</span></a></li>
</ul>

<br />

<div id="box-1">
Box 1 content here
</div>

<div id="box-2">
Box 2 here...
</div>

<div id="box-3">
Do you really need Box #3?
</div>
</div>

CSS - some floats for ul and li

.ui-tabs-hide {
display: none;
}

ul {
margin: 0px;
padding: 0px;
}

ul li {
float: left;
padding-right: 10px;
list-style: none;
}

br {
clear: both;
}

a {
font-weight: bold;
text-decoration: none;
}

jQuery
Add this code at the end of your webpage (right before the closing body tag)

<script type="text/javascript">
$(window).bind('load', function() {
$('#container-1 > ul').tabs();
});
</script>

I assume you havent forgotten to add the two javascript files I mentioned earlier inside the HEAD tag. Have fun.