A Stylish Css3 Fixed Position Vertical Side Menu For Blogger




| 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.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

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. Looks awesome! I will definitely try this.

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

    ReplyDelete
  4. 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
  5. @ homebiss - Exactly what errors are you seen in chrome ? This should actually work best in webkit browsers like chrome..

    ReplyDelete
  6. @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
  7. 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
  8. 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
  9. Wow Great thank you very much for this awsome gadget :-)

    ReplyDelete
  10. 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
  11. @ Nicole - You must have added your home page URL incorrectly.

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

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

    ReplyDelete
  14. 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
  15. 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
  16. nice post !!! its awesome
    but how can i use my own image on this widget? please help me
    thx

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

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

    ReplyDelete
  19. why the icon doesn't appear??
    please help me...

    ReplyDelete
  20. 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
  21. 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
  22. 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
  23. 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
  24. It works for blogs in spanish too? I mean the code!!

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

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

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

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

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

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

    ReplyDelete
  30. 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
  31. how to have it in horizontal arrangement ?? plz help

    ReplyDelete
    Replies
    1. 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
  32. I am only getting word links instead of the images? Any help?

    ReplyDelete
    Replies
    1. 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
  33. How to align the menu towards right side of my page ?

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us