Add Beautiful Fixed Css/Jquery horizontal menu to your blog

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

2. Click on "Expand Widget Templates"

3. 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: 0px;
    right: 310px;    
    list-style: none;
    z-index:999999;
    width:721px;
}
ul#navigation li {
    width: 103px;
    display:inline;
    float:left;    
}
ul#navigation li a {
    display: block;
    float:left;
    margin-top: -2px;
    width: 100px;
    height: 25px;
    background-color:#E7F2F9;
    background-repeat:no-repeat;
    background-position:50% 10px;
    border:1px solid #BDDCEF;
    -moz-border-radius:0px 0px 10px 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-bottom-left-radius: 10px;
    text-decoration:none;
    text-align:center;
    padding-top:80px;
    opacity: 0.9;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);  
}
ul#navigation li a:hover{
     background-color:#CAE3F2;
}
ul#navigation li a span{
    letter-spacing:2px;
    font-size:11px;
    color:#60ACD8;
    text-shadow: 0 -1px 1px #fff;      
}
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);
}

To align the menu left , right or center modify the : right: 310px; value.

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

<script src='http://descarca.googlecode.com/files/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
            $(function() {
                var d=300;
                $(&#39;#navigation a&#39;).each(function(){
                    $(this).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },d+=150);
                });

                $(&#39;#navigation &gt; li&#39;).hover(
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-2px&#39;
                    },200);
                },
                function () {
                    $(&#39;a&#39;,$(this)).stop().animate({
                        &#39;marginTop&#39;:&#39;-80px&#39;
                    },200);
                }
            );
            });
        </script>

If you have Jquery instaled on your template delete the red line.

5. The next step is to find:

<div id='art-main'>    <b:section class='art-header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test 3 (Header)' type='Header'>
<b:includable id='title'>

... in your template the title of the header will be different.
Now paste the next code after <div id='art-main'>:

<ul id='navigation'>
            <li class='home'><a href=''><span>Home</span></a></li>
            <li class='about'><a href='http://www.artistutorials.co.cc'><span>About</span></a></li>
            <li class='search'><a href='http://www.artistutorials.co.cc'><span>Search</span></a></li>
            <li class='photos'><a href='http://www.artistutorials.co.cc'><span>Photos</span></a></li>
            <li class='rssfeed'><a href='http://www.artistutorials.co.cc'><span>Rss Feed</span></a></li>

            <li class='podcasts'><a href='http://www.artistutorials.co.cc'><span>Podcasts</span></a></li>
            <li class='contact'><a href='http://www.artistutorials.co.cc'><span>Contact</span></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'><span>Download</span></a></li>

Save the template and see the result.

DEMO