Columbus website design

Creating a rounded box sidebar navigation

I’ve recently been involved in the redesign of tobaccostories.org website and I thought it would be nice to make a small tutorial out of some of this work.
I’ll explain how to create a rounded box sidebar navigation. Here is what you’ll learn to create: sidebar navigation.
There are 3 images used here:
1.The main background image
2.
3.
The html markup:

<ul class="menu">
    <li class="leaf"><a href="index.html" class="active">Real Stories</a></li>
    <li class="leaf"><a href="page1.html">First page</a></li>
    <li class="leaf"><a href="page2.html">Second Page</a></li>
    <span></span>
    </ul>

And the css markup:

ul.menu {list-style-type:none;
    background:transparent url(images/sidenav_bg.gif);
    background-repeat:no-repeat;
    padding:0;
    margin:0;
    padding-top:15px;
    width:245px;
    z-index:0;

    }
ul.menu li.leaf {
    padding:0;
    margin:0;}    

ul.menu li.leaf a{text-decoration:none;
    color:#3393c6;
    font-size:11px;
    font-weight:bold;
    display:block;
    width:205px;
    height:16px;
    border-top:1px #dddccf solid;
    margin-left:10px;
    padding-top:8px;
    padding-left:20px;
    }
ul.menu li.leaf a.active {background:url(images/sidenav_selected.gif);
    background-repeat:no-repeat;}

ul.menu span{display:block;
    width:245px;
    height:23px;
    background:#fff url(images/sidenav_bg_bottom.gif);
    background-repeat:no-repeat;
    z-index:100;}    

Back to blog