A Stylish Css3 Fixed Position Vertical Side Menu For Blogger

Posted : Monday, November 07, 2011  |  Post Author : Paul Crowe  | 46 comments

Fixed menu for BloggerSo many sites we visit now have a navigation menu fixed to the side of the page for easy access to important pages.In this post i have a very stylish and colorful menu you can fix to the side of the page on your Blogger blog.The menu will stay in place even when the reader scrolls down yet doesn’t interfere with the content.The menu has 5 icons that on hover scroll out to reveal their purpose, so for example the home icon on hover scrolls out the word ‘Home’.The 5 icons are for Home, About, Services, Portfolio and Contact Us.While you cant change the icons, you can change the text for each icon for example the portfolio icon could be changed to archive.

The menu is made up almost completely of Css3 with just one image and is quick and easy to install.All the credit for the menu goes to the awesome Tutorialzine, we have covered many of their tutorials previously.Below you can see a live demo, hover over the icons to see the scroll out effect.

View Demo Button

Add The Fixed Navigation Menu To Blogger

Remember Always Back Up Your Template Before You Make Changes – How To Back Up A Blogger Template

Step 1. In Your Blogger Dashboard Click Design > Template Designer > Advanced > Scroll to the Add Css Option as shown below.
(If your using the new Blogger dashboard click the drop down menu for your blog, then layout, then template designer)

Step 2. Paste the following code into the Css section :

Note- This is a scroll box, make sure to get all the code.

/* CSS Style for Horizontal Menu – info @ http://www.spiceupyourblog.com*/
#hor {
list-style:none;
padding:0;
margin:0;
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}

/* CSS Style for Vertical Menu */

#ver {
list-style:none;
padding:0;
margin:0;
}

#ver li {
padding:2px;
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}

.clear {
clear:both;
}

*{
/* A universal CSS reset */
margin:0;
padding:0;
}

#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;

/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:’Myriad Pro’,Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url(‘http://1.bp.blogspot.com/-jwOb6rML3W0/TrWP2WBsvaI/AAAAAAAAFFg/NK2hIQSRO-E/s1600/navigation.jpg’) no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

/*End menu css – info @ http://www.spiceupyourblog.com */

Step 3. Save your template, that’s the Css added now for the html.

Step 4. Return to your blogs Design or Layout page and click Add A Gadget > Html/Javascript >

Step 5. Copy and paste the following code into the Html/Javascript gadget :

<div style=’position: fixed; top: 40%; left: 0%;’/>
<ul id=”navigationMenu”>
<li>
<a class=”Home” href=”http://www.spiceupyourblog.com”>
<span>Home</span>
</a>
</li>

<li>

<a class=”about” href=”http://www.spiceupyourblog.com/p/about-spice-up-your-blog.html”>
<span>About</span>
</a>
</li>

<li>
<a class=”services” href=”http://www.spiceupyourblog.com/p/hire-us_08.html”>
<span>Services</span>
</a>

</li>

<li>
<a class=”portfolio” href=”http://www.spiceupyourblog.com/”>
<span>Portfolio</span>
</a>
</li>

<li>
<a class=”contact” href=”http://www.spiceupyourblog.com/2009/09/contact-us.html”>

<span>Contact us</span>
</a>
</li>
</ul>
</div><a href=”http://www.spiceupyourblog.com/” target=”_blank”><small>Get The Fixed Menu Gadget</small></a>

Note- Change the URLs in red with your links and You can change the scroll out text in yellow above.

Step 6. Save the gadget, you can drag and drop the gadget to the bottom of the design page out of the way.

Drop Your Comments And Questions Below.

46 comments:

  1. Hey mate
    it working great
    but It giving me a problem
    It came from the Back Like the back of the post
    any ideas how to fix it?

    ReplyDelete

  2. nice blog…nice to meet you

    ReplyDelete

  3. Looks awesome! I will definitely try this.

    ReplyDelete

  4. Thank you my friend 😉

    ReplyDelete

  5. great job every Light in funcitnal.. in brazil i am like.. thanks..
    www.atualizacoes.net

    ReplyDelete

  6. The icons look nice! But its behaviour is a bit buggy when viewed with Chrome. You can reproduce the buggy behaviour by scrolling down the demo blog immediately after loading it in Chrome.

    Any idea why it has that ‘hesitation’?

    ReplyDelete

  7. @ homebiss – Exactly what errors are you seen in chrome ? This should actually work best in webkit browsers like chrome..

    ReplyDelete

  8. Amazing ,really nice Menu

    ReplyDelete

  9. @Paul Crowe

    There are no errors. It is just that I noticed there is some kind of a ‘hesitation’ between the demo blog and my mouse scroll wheel. I can sense that ‘hesitation’ after scrolling down the demo blog, right after loading.

    If you cannot feel anything on your side, then I guess this is just a small, isolated problem.

    ReplyDelete

  10. When I am adding the same to our blog Indian-Share-Tips.Com, it is compressing the slider text to top and thus I had to roll back the changes made. Any suggestions !

    Regards

    ReplyDelete

  11. great
    thank you

    ReplyDelete

  12. I think it’s neat although I don’t think I will use it. I do plan on dissecting it and learning how it works and how to modify it.

    ReplyDelete

  13. Wow Great thank you very much for this awsome gadget 🙂

    ReplyDelete

  14. Hello,

    I succesfully added the code on my blogger blog (it looks great).However, its not functioning can you help input information within these links. For example, when U click on the home icon blogger shows error message “pages does not exist”. Please help thanks

    Nicole

    Urban Socialist

    ReplyDelete

  15. @ Nicole – You must have added your home page URL incorrectly.

    ReplyDelete

  16. Like it, nice weblog 🙂

    ReplyDelete

  17. agung budi kristantoNovember 18, 2011 at 12:14 PM

    good,,

    ReplyDelete

  18. thanks for this tip i used it on my blog as i always do thanks @Paul
    and keep it up

    ReplyDelete

  19. The Owner of this website is a very good & kind hearted person.

    ReplyDelete

  20. nice it works in my blog…my question is how to manage or move the location from left to right a little bit from the existing location of icons because almost half of the icons are missing.

    ReplyDelete

  21. Nice post! I haven’t tried it yet but I was wondering if there’s a way for me to use my own image? You’re is nice , but it does not match or correspond to my menu pages.

    ReplyDelete

  22. nice post !!! its awesome
    but how can i use my own image on this widget? please help me
    thx

    ReplyDelete

  23. Free Intraday Stock TipsNovember 29, 2011 at 2:15 PM

    Amazing Trick!! Thanks..

    ReplyDelete

  24. Haii blogger friends how can i get Scroll Box for my blog i need only box can you please help thanks in advance

    ReplyDelete

  25. hello mate its great but how can i add more navigation icons??

    ReplyDelete

  26. why the icon doesn’t appear??
    please help me…

    ReplyDelete

  27. this icon works nicely but how do you input these infos into the link?
    it says page not available. where do you find these info to the links on blogger?

    ReplyDelete

  28. nice very nice

    ReplyDelete

  29. hey frnd, i done the same as you say,.
    but there is a problem, it is not showing any colorful menu, it shows a dot fallowed be the text like “Home”, “Contact us” etc,..

    so what i have to do now? please help me.

    ReplyDelete

  30. Really good, but I have this problem:
    I want to have 6 icons, I added the CSS commands as well as in the Gadget with “class” is the same, but still enough to show 6 icons, arrange icons but not the right place, it was overlapping icons (I redesigned the 5 to 6 icons) please help me solve this problem, thanks!

    ReplyDelete

  31. This is so perfect! You are a lifesaver.

    Thanks for the code, and your instructions. I put it up on my blog and modified it a little so that it matches. You can see it here:
    http://www.thereadingfever.com/

    Thanks again!

    ReplyDelete

  32. It works for blogs in spanish too? I mean the code!!

    ReplyDelete

  33. Hi i mentioned you in my blog, and added a link back to here so my readers can get it to.

    ReplyDelete

  34. Nice Touch of intelligence and Technology. Good knowledgeable site for newbie bloggers.Thanks

    ReplyDelete

  35. Nice I think following it would really help improve my blog and i recommend for others too.

    ReplyDelete

  36. how to get one like the one you use on your own blog ?

    ReplyDelete

     

    Replies

     

  37. yeah man, i am looking for the same.
    admin can you plz provide us the code for this,..

    Delete

  38.  

  39. How to use different images apart from the default which you gave???

    ReplyDelete

  40. I’m so happy to have found your blog! Thank you for the adds and other content, especially the well-written articles.

    Did anyone figure out why the images aren’t showing up for some people? I’m having that problem right now. Everything works fine, but the buttons are blank. Or rather there is a blank space where they should be.

    ReplyDelete

  41. how to have it in horizontal arrangement ?? plz help

    ReplyDelete

     

    Replies

     

  42. JC you would need to create a new image and change the css to place it maybe at the top of the page.I’m afraid it’s not something I could quickly do for you…

    Delete

  43.  

  44. I am only getting word links instead of the images? Any help?

    ReplyDelete

     

    Replies

     

  45. Aimee, the demo is still working fine which would lead me to think you have made an error.Remove the code and try again.

    Delete

  46.  

  47. thanks for this

    ReplyDelete

  48. How to align the menu towards right side of my page ?

    ReplyDelete