Nice vertical fixed navigation menu using jQuery and CSS


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.


Get Latest Updates For Free!

Subscribe via Email

14 comments

September 22, 2011 at 3:19 PM

so good master...thank you :D

Anonymous
October 18, 2011 at 12:19 AM

this is amazing!

October 29, 2011 at 2:15 AM

Hi...
I tried this one, worked well,\
but I found "Home" "Contact" appear with the image...that should actually appear as tooltip, right?

How can I solve this?

October 29, 2011 at 1:19 PM

@VisionascTry again now. It will work

October 30, 2011 at 6:01 AM

@ArtisTutor

Hey, it's worked...
Hahahahaha, really big thanks, mate...
Now my blog looks quite charming...

October 30, 2011 at 7:54 PM

@ArtisTutorHy, I've got another new problem...
why is there always "0" in the beginning of every title post at my homepage? While when we open a single post, the "0" disappear...
Is this because of the vertical menu code?

Please show the way I can omit the "0"...

Thank you very much...

October 30, 2011 at 8:01 PM

@ArtisTutorI found it.
It obviously is the number of comment in that post. "0" means there's no comment yet.

Only, this previously located in the right side of the title post and also it was looked like a bubble but now the bubble's gone...

How can I fix it?
Thanks

October 30, 2011 at 8:47 PM

@ArtisTutorHey, I've solved by myself...
Sorry for bothering you...
Hehehhe
Thanks

October 30, 2011 at 9:32 PM

No problem, I'm glad to help.

October 31, 2011 at 5:07 AM

@ArtisTutorAgain, sorry for asking you for the xxx-th times...

It seems since you put the vertical menu and reply button, there are several 'crash' in my blog.

Some of them have been solved as I always asked you about.

But now, I found that my featured post (slider) isn't working anymore...

Even when I click one of them, there's no changes. It stuck with the first featured content. Never move to another 3 content...

October 31, 2011 at 10:42 AM

@VisionascSearch in the template this line and delete it.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/>

November 1, 2011 at 2:51 AM

@ArtisTutorYessssssssssssssss.....
I did it...
Thank very much...

March 12, 2012 at 10:52 PM

Thank you, it looks great!
I've been wondering what I have to change if I want to enlarg the hovering space, f.e. for more information or a bigger picture?

March 12, 2012 at 11:48 PM

@Touching The RainbowYou need to change the width and height values on this lines of code:

ul#navigation li {
width: 100px;
}
ul#navigation li a {
width: 100px;
height: 70px;

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers