Have you know about the Stylish Css3 Vertical Sidebar Meny. Dont Worry ! Today the post is on Css3 Vertical Sidebar Menu. How to Placed this gadget on the site. So many of the sites we visit now have a navigation menus for the 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 sides of the pages on yours Blogger blogs.The menu will stay in place even when the reader scrolls down yet doesnt interfere with the content.The menu has 5 icon 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 ex. the portfolio icon could be changed to archive.
The menu is now made up almost completely of Css3 with just one of the image and is quick and easy to installs this.All the credit for the menu goes to the awesome Tutorialzine, we have covered many of their tutorials previously : )
Add The Fixed Navigation Menu To Blogger :#Step 1. First ,In Your's Blogger Dashboard Click Design >> Edit HTML > Expand Widget > Scroll to the Add Css Option as shown below.
#Step 2.And Paste the following code into the Css section :
/* CSS Style for Horizontal Menu - info @ http://www.newfacebookchat.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgjKg7xVGbScpwbLd0ZCKAs3Hh5GPFgrqeV5LujPJbKDwDdzYGvXYjurAaO7YPnVi8lB4JHM3-ue6b1TMPpGzC_6TBOFtdDUonLq-iFwLJJ_dxHnTnMvefNuIPFuX6H-lCXJbBQ2dVQE0/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.newfacebookchat.com */#Step 3. Save your templates thats the Css added now for the htmls.
#Step 4. Now Return to your blogs Design or Layout page and click Add A Gadget > Html/Javascript >
#Step 5. And now 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.newfacebookchat.com"><span>Home</span></a></li>
<li>
<a class="about" href="http://www.newfacebookchat.com/p/about-spice-up-your-blog.html"><span>About</span></a></li>
<li><a class="services" href="http://www.newfacebookchat.com/p/hire-us_08.html"><span>Services</span></a>
</li>
<li><a class="portfolio" href="http://www.newfacebookchat.com/"><span>Portfolio</span></a></li>
<li><a class="contact" href="http://www.newfacebookchat.com/2009/09/contact-us.html">
<span>Contact us</span></a></li></ul></div><a href="http://www.newfacebokchat.com/" target="_blank"><small>Get The Fixed Menu Gadget</small></a>#Step 6. Save the gadget. Thats it : )
