Floating Navigation Menu For Blogger

Are you bored with your website's navigation menu? Then today I'm here with a new floating navigation menu. It is not only a navigation menu, it is an drop-down navigation menu so it helps you to arrange most of the website elements based on its category. Small in size, beautiful and comfortable I'm sure that this menu grabs peoples attention. On the left side, you can see set of Social media icons such as Twitter, Facebook, Google +, RSS to link your website Social media pages.

Demo

How to add floating navigation menu on Blogger?

Go to Blogger.com
Select your blog and go to Template (left side).
Now click on Edit HTML.
Find ]]></b:skin> (using ctrl+f) and paste below CSS code before it.

/*----HEADER BAR----*/
#header-wrap {
position:absolute
}
#header-wrap {
width:100%;
background:transparent;
border:none; z-index:100;
margin:10px 0;
padding-top:6px;
overflow:hidden
}
#header {
width:440px;
float:left;
text-align:left;
font-family:Arial;
font-size:12px;
font-weight:bold;
color:#fafafa;
padding-left:10px;
}
#header a{
color:#fafafa
}
#header-ads {
moz-border-bottom-colors: none;
moz-border-image: none;
moz-border-left-colors: none;
moz-border-right-colors: none;
moz-border-top-colors: none;
background: none repeat scroll 0 0 #212121;
border-color: #000000 #333333 #333333 #000000;
border-style: solid;
border-width: 1px;
float: right;
height: 60px;
margin: 14px;
overflow: hidden;
padding: 0;
width: 468px;
}
#header-ads p{text-align:center; padding:30px 0}
/* social icon */
#social-networking li
{
float: left;
}
#social-networking a
{
display: block;
padding: 0 3px 0 0;
position: relative;
}
#social-networking span
{
opacity:0.5;
width: 24px;
height: 24px;
display: block;
border:4px solid #252628;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow:inset 0 2px 6px #000000;
webkit-shadow:inset 0 2px 6px #000000;
moz-shadow:inset 0 2px 6px #000000;
moz-transition: all .1s linear;
webkit-transition: all .15s ease-in-out;
o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}
#social-networking span:hover
{
border:4px solid #888;
opacity:0.9;
}
#social-networking .social-icon
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEind-dU7UVsl0rcT59TOLVBNB7WyAI4ToMgQGt_40iNbtIUVmuUhE8Hl-Jp2MXfE8nT31injDtkMttUMDMh82VogHCzKg-OdJEbE6znMf-dAW2u_M2mBX-K2sfv9-gBD_SKt9JuqPSq68U/s1600/social.png') no-repeat; padding: 0px 1px;
}
.opacity #social-networking .social-icon { opacity: 0.85; }
.opacity #social-networking a:hover .social-icon { opacity: 0.6; }
#social-networking .facebook { background-position: 0 -28px; }
#social-networking .flickr { background-position: 0 -87px; }
#social-networking .vimeo { background-position: 0 -233px; }
#social-networking .youtube { background-position: 0 -291px; }
#social-networking .linkedin { background-position: 0 -322px; }
#social-networking .googleplus { background-position: 0 -353px; }
#social-networking .dribbble { background-position: 0 -205px; }
#social-networking .tumblr { background-position: 0 -177px; }
#social-networking .skype { background-position: 0 -262px; }
#social-networking .delicious { background-position: 0 -149px; }
#social-networking .digg { background-position: 0 -117px; }
#social-networking .rss { background-position: 0 -57px; }
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
float: right;
font-size: 11px;
}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
}
ul.topnav li a{
padding: 10px 5px 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
text-transform:uppercase;
}
ul.topnav li a:hover{
}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://lh5.googleusercontent.com/-xW4p9b_uWyI/TeQwwBEAGGI/AAAAAAAAAGY/rGxrR1WBhgE/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.subnav {
list-style: none;
position: absolute;
left: 0; top: 35px;
background: #202020;
margin: 0; padding: 0;
display: none;
float: left;
width:150px;
moz-border-radius-bottomleft: 5px;
moz-border-radius-bottomright: 5px;
webkit-border-bottom-left-radius: 5px;
webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
z-index:1001;
}
ul.subnav_last{
list-style: none;
position: absolute;
right: 15px; top: 35px;
background: #202020;
margin: 0; padding: 0;
display: none;
float: left;
width:150px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
z-index:1001;
}
ul.subnav li, ul.subnav_last li{
margin: 0; padding: 0;
border-top: 1px solid #111;
border-bottom: 1px solid #333;
clear: both;
width:150px;
}
ul.subnav li:last-child{
border-bottom: none;
}
ul.subnav_last li:last-child{
border-bottom: none;
}
html ul.subnav li a, ul.subnav_last li a {
float: left;
width:125px;
text-align:left;
background: transparent url(https://lh4.googleusercontent.com/-OjDdWCsCcvs/TeQwvMALnUI/AAAAAAAAAGI/-FC-KZkBGGg/dropdown_linkbg.gif) no-repeat 10px center;
padding:8px 0 8px 20px;
moz-border-radius-bottomleft: 5px;
moz-border-radius-bottomright: 5px;
webkit-border-bottom-left-radius: 5px;
webkit-border-bottom-right-radius: 5px;
text-transform:none;
}
html ul.subnav li a:hover, ul.subnav_last li a:hover{ /*--Hover effect for subnav links--*/
background: #191919 url(https://lh4.googleusercontent.com/-OjDdWCsCcvs/TeQwvMALnUI/AAAAAAAAAGI/-FC-KZkBGGg/dropdown_linkbg.gif) no-repeat 10px center;
}
#header-bar-outer{
position:fixed;
z-index:9999;
width:100%;
height:34px;
padding:0;
margin:0;
background:#212121;
border-top:1px solid #000;
border-bottom:1px solid #000;
padding-top:1px;
padding-bottom:1px;
top:0;
}
#header-bar {
width:100%;
height:33px;
margin:0 auto;
padding:0;
border-top:1px solid #444;
border-bottom:1px solid #444;
}
#top_nav{
height:33px;
line-height:33px;
text-align:left;
float:left;
}
#top_nav ul{
margin:0; padding:0 0 0 5px;
}
#top_nav li{
display:inline;
}
#top_nav li a{
color: #CCCCCC;
font-size: 11px;
margin: 0 0 0 0;
padding: 0 0 0 10px;
text-transform: uppercase;
}

Now you need to add script , search for this code </head> and add following script above it.

<script type='text/javascript'>

$(document).ready(function(){

$("ul.subnav, ul.subnav_last").parent().append("<span/>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$("ul.topnav li span").click(function() { //When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)

$(this).parent().find("ul.subnav, ul.subnav_last").slideDown('fast').show(); //Drop down the subnav on click

$(this).parent().hover(function() {

}, function(){

$(this).parent().find("ul.subnav, ul.subnav_last").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up

});

//Following events are applied to the trigger (Hover events for the trigger)

}).hover(function() {

$(this).addClass("subhover"); //On hover over, add class "subhover"

}, function(){ //On Hover Out

$(this).removeClass("subhover"); //On hover out, remove class "subhover"

});

});

</script>

<div id='header-bar-outer'>

<div id='header-bar'>

<ul class='topnav'>

<li>

<a href='#'>News</a>

</li>

<li>

<a href='#'>Tech Review</a>

<ul class='subnav'>

<li>

<a href='#'>Smartphones</a>

</li>

<li>

<a href='#'>Tablet</a>

</li>

<li>

<a href='#'>Laptops</a>

</li>

</ul>

</li>

<li>

<a href='#'>Blogging</a>

<ul class='subnav'>

<li>

<a href='#'>SEO Tips</a>

</li>

<li>

<a href='#'>Widgets</a>

</li>

<li>

<a href='#'>Template</a>

</li>

</ul>

</li>

<li><a href='#'>Tips N Tricks</a>

<ul class='subnav'>

<li>

<a href='#'>Windows 8</a>

</li>

<li>

<a href='#'>Android</a>

</li>

<li>

<a href='#'>iOS</a>

</li>

</ul>

</li>

<li>

<a href='#'>APPS</a>

<ul class='subnav'>

<li>

<a href='#'>Android</a>

</li>

<li>

<a href='#'>iOS</a>

</li>

<li>

<a href='#'>Windows 8</a>

</li>

</ul>

</li>

<li>

<a href='#'>Adsense</a>

<ul class='subnav_last'>

<li>

<a href='#'>Tips</a>

</li>

</ul>

</li>

</ul>

<div id='top_nav'>



<ul id='social-networking'>

<li><a href='http://twitter.com/gameryards' id='twitter-link' target='_blank' title='Twitter'><span class='twitter social-icon'/></a></li>

<li><a href='http://www.facebook.com/gameryards' id='facebook-link' target='_blank' title='Facebook'><span class='facebook social-icon'/></a></li>

<li><a href='https://plus.google.com/110774830949115484638?prsrc=2' id='googleplus-link' target='_blank' title='Google + '><span class='googleplus social-icon'/></a></li>

<li><a href='http://feeds2.feedburner.com/gameryard' target='_blank' title='Rss'><span class='rss social-icon'/></a></li>

</ul>



</div>

</div>

</div>

Note: Replace # with the links
Replace News,Tech Review, etc. with your link text which you want to appear on the menu.
Replace gameryards, gameryards, gameryard, 110774830949115484638 with your Social media pages ID.

If you need any type of help, kindly comment.

fulluptodate

Friday, 20 December 2013