Sunday, February 12, 2012

TAGGED UNDER: , ,

A Stylish Css3 Fixed Position Vertical Side Menu For Blogger


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.

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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw9-bWrl9EK19sPr8bR9EXzi91hjg4A5mmprcPfzrOEOfbldqGt-S5Iuq_ks8zNYSQKas-cmbyz1y-Z88mtI9PjjZonYfi7k-NVyVkQ0Fpe_DuiMUh9565cNdNGm4Ijk-vrnFawZecWGk/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. 

About the Author

Have a good day/night!

0 comments:

Please no spam! Remove comment!

WARNING !

This site does not host any media file or any other file which might be under the influence of copyright. The links on this site lead to other sites! Not responsible for accessing and downloading files from links that lead them! Accessing links on this site, and downloading files from these leading assume your responsibility !!!

Labels

Info Download Video Oameni Jocuri Amuzament Romania Muzica Torrent FileList.ro Hip-Hop Stiri LG YouTube Bani Imagini Bacau Hack Software 2014 Auto PC Fotbal 2012 AI DE PLM Rapperi Filme Made in Romania FOR LIFE Arta Internet Cocalari Telefoane Muzica Adevarata Trailer Windows Blogger Tehnologie Artisti Copiii Online Servicii Online Fashion Facebook NU in Romania America 2013 Muzica de kkT TV Vedete Culinar Picture of the Day Animale Poza Zilei RObotzi Pitzipoance Sport Bani Pe Net Loto 6/49 Monden Slots Games Pack Sezonul 4 Sezonul 1 Sezonul 2 2015 Filme XXX JapKa Politia Seriale Online Stiinta Tutorial Underground HH Evenimente EA Sports Europa Evenimente Bacău Negative Religia Album Android Bancuri Civilizatii Gangsta-Rap Istoria Planete Subtitrari Droguri Naturist Promovare HH Concert Google Masoneria Natura Scoala Sezonul 3 Apple Microsoft Politica Samsung Adolescenta Counter-Strike 1.6 Fructe Pronosticuri Romani au Talent Sex Sexy Toshiba Pariu cu Viata Tatuaje Templates China Update Anglia Manele Subway Pub Cultura FIFA 07 Online Inventie Made in China Realitatea Rock Serials Elevi Rusia Satana Simulator System Requirements Warcraft III: The Frozen Throne 2017 3D Audio Club Zebra Documentar DozaDeHas Franta Gadget HTML Italia Medicamente Mobile Poker Racing Rapper Cocalar Reclama Afaceri EA Mobile Interviu Motociclete SKIDROW Sistem de operare Tigari WWE .dll 2016 Alcool Asus BeatBox Bulgaria Cartea Recordurilor Cool Driver England Las Fierbinti Mac OS Maps Warcraft Mircea Badea The Stage Valentine’s Day AdSense Antarctica Avioane Balul Bobocilor Box Casa de Cultură Bacău Crack FIFA Farse FreeStyle Gameloft Gepex Park Germania PSP Rasta Razboi Statusuri Terorism Trafic de Acte Twerk Team Twitter Versuri Videochat WebDesign Zodii eMachines 2018 ACTA Anonymous Basket Bauturi Bere Biletul Zilei Camera ascunsa Club Kremlin Crestin-Ortodox Dancing Fonturi Glu Google+ Handbal Linux MPC Micron Rezumat Setari
Subscribe on : YouTube

Statistics

Blog Archives

Copyright ©

Copyright ©
Proudly Powered by JK07.