Posted : Monday, November 07, 2011 | Post Author : Paul Crowe | 46 comments
So 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.
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:
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
nice blog…nice to meet you
ReplyDelete
Looks awesome! I will definitely try this.
ReplyDelete
Thank you my friend 😉
ReplyDelete
great job every Light in funcitnal.. in brazil i am like.. thanks..
www.atualizacoes.net
ReplyDelete
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
@ homebiss – Exactly what errors are you seen in chrome ? This should actually work best in webkit browsers like chrome..
ReplyDelete
Amazing ,really nice Menu
ReplyDelete
@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
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
great
thank you
ReplyDelete
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
Wow Great thank you very much for this awsome gadget 🙂
ReplyDelete
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
@ Nicole – You must have added your home page URL incorrectly.
ReplyDelete
Like it, nice weblog 🙂
ReplyDelete
good,,
ReplyDelete
thanks for this tip i used it on my blog as i always do thanks @Paul
and keep it up
ReplyDelete
The Owner of this website is a very good & kind hearted person.
ReplyDelete
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
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
nice post !!! its awesome
but how can i use my own image on this widget? please help me
thx
ReplyDelete
Amazing Trick!! Thanks..
ReplyDelete
Haii blogger friends how can i get Scroll Box for my blog i need only box can you please help thanks in advance
ReplyDelete
hello mate its great but how can i add more navigation icons??
ReplyDelete
why the icon doesn’t appear??
please help me…
ReplyDelete
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
nice very nice
ReplyDelete
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
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
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
It works for blogs in spanish too? I mean the code!!
ReplyDelete
Hi i mentioned you in my blog, and added a link back to here so my readers can get it to.
ReplyDelete
Nice Touch of intelligence and Technology. Good knowledgeable site for newbie bloggers.Thanks
ReplyDelete
Nice I think following it would really help improve my blog and i recommend for others too.
ReplyDelete
Good
ReplyDelete
how to get one like the one you use on your own blog ?
ReplyDelete
Replies
yeah man, i am looking for the same.
admin can you plz provide us the code for this,..
Delete
How to use different images apart from the default which you gave???
ReplyDelete
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
how to have it in horizontal arrangement ?? plz help
ReplyDelete
Replies
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
I am only getting word links instead of the images? Any help?
ReplyDelete
Replies
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
thanks for this
ReplyDelete
How to align the menu towards right side of my page ?
ReplyDelete