Nice vertical fixed navigation menu using jQuery and CSS

Nice vertical fixed navigation menu using jQuery and CSS

Tuesday, September 20, 2011 | Posted by ArtisTutor | Edit Post

This tutorial is about another navigation menu. Using jQuery and CSS you will be able to add to your template a nice fixed vertical menu.

The menu will be partial hidden and will be visible only whet the user hover it.

This is a nice effect and because the menu is semi-transparent the contend under it will not be completely hidden.

Using jQuery, we will make the icons appear whenever we hover over one of the list items.

How to add this nice menu to your blog?

1. Log in to your dashboard--> Template- -> Edit HTML

2. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:

/*----------------------------------------------------
{--------}  Menu {--------}
----------------------------------------------------*/
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 10px;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;    
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.8;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
}
ul#navigation .home a{
    background-image: url(http://img163.imageshack.us/img163/1473/homehc.png);
}
ul#navigation .about a      {
    background-image: url(http://img156.imageshack.us/img156/4176/idcardqx.png);
}
ul#navigation .search a      {
    background-image: url(http://img21.imageshack.us/img21/7365/searchl.png);
}
ul#navigation .podcasts a      {
    background-image: url(http://img834.imageshack.us/img834/8079/camerae.png);
}
ul#navigation .rssfeed a   {
    background-image: url(http://img263.imageshack.us/img263/5871/rssd.png);
}
ul#navigation .photos a     {
    background-image: url(http://img508.imageshack.us/img508/2226/ipodl.png);
}
ul#navigation .contact a    {
    background-image: url(http://img808.imageshack.us/img808/5498/mailos.png);
}

You can see in the upper code that exist a couple lines with some images (blue lines). Those images are for the image that will appear in the menu. When you will create another menu item you have to add your image like in those lines.

Exemple: For an Download menu item you must add this line:

ul#navigation .download a    {
    background-image: url(link to the image);
}

3. Now find the </head> tag and before it paste the code:

<script type="text/javascript">
            $(function() {
                $('#navigation a').stop().animate({'marginLeft':'-85px'},1000);

                $('#navigation > li').hover(
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
                    },
                    function () {
                        $('a',$(this)).stop().animate({'marginLeft':'-85px'},200);
                    }
                );
            });
        </script>

4. The next step is to find </body> and before it paste the next code:

<ul id="navigation">

            <li class="home"><a href="" title="Home"></a></li>

            <li class="about"><a href="" title="About"></a></li>

            <li class="search"><a href="" title="Search"></a></li>

            <li class="photos"><a href="" title="Photos"></a></li>

            <li class="rssfeed"><a href="" title="Rss Feed"></a></li>

            <li class="podcasts"><a href="" title="Podcasts"></a></li>

            <li class="contact"><a href="" title="Contact"></a></li>

        </ul>

  

You can see that each menu item has a class. This class is for display the image for the menu item (exemple how to add image is on the step 3).
When you add a new menu item make sure that you add the class to display the image

So for a new menu item the code will be:

<li class='download'><a href="your link" title="Download"></a></li>

Save the template and see the result.

Demo Page

| | | |

Save on Delicious

Get Latest Updates For Free!

Subscribe via Email