Floating Vertical Menu bar With Mouse Hover Effect

Well in this post im gonna show you A vertical Menu floating bar with mouse hover Widget.Well it is made up of CSS3.Css3 provides us a Cool & Dynamic Blogger Widgets.Which Can Make Our Blog More Attractive and Easy to Access.Also it makes Our Blog Very smooth to Look up .Drop down menu's and Simple Menu looks Good but this widget is different and Looks More Professional.

Add Floating Vertical Menu Bar to Blogger :.

First Login to Your Blogger > Dashboard >Design > EDIT HTML

Now Search for  ]]></b:skin>   

Now paste the Below Code Above it

#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/AVvXsEjRBMYFAdBOTO7CVzSaTu_0-wYufb4h3uOQFtlnHwMBTmp3ia1o2HDxPPUGJtbqDGwI6Vma-Elu4LEXcCq0POExDj8tT7X-jHXweGnOqD4_rg74mYL39_ELyM02MlKEjU5_WF4fqNdduvQ/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; }

Make Sure to Backup Your Template.Now Save your Template.


Now Adding Some Html/Javascript Code to get the Widget :.


Now Go to Design > Page Elements .
Choose HTML/JAVASCRIPT  And Paste the Below Code in it.

1. <div style="left: 0%; position: fixed; top: 40%;"><ul id="navigationMenu"><li> <a class="Home" href="http://technouniversityworld.blogspot.in"> Home </a> </li>  
2. <li> <a class="about" href="http://technouniversityworld.blogspot.in/"> About </a> </li>  
3. <li> <a class="services" href=" http://technouniversityworld.blogspot.in/"> Services </a> </li>  
4. <li> <a class="portfolio" href=" http://technouniversityworld.blogspot.in/"> Portfolio </a> </li>  
5. <li> <a class="contact" href=" http://technouniversityworld.blogspot.in/"> Contact us </a> </li>  
6. </ul></div><a href=" http://technouniversityworld.blogspot.in/" target="_blank"></a>