- Dropdown function: allow you to add many links
- Have cool Social media icons: allow you to add 5 different profiles (Facebook, Twitter, Google plus, LinkedIn, RSS Feed)
- Fixed to header/Floating style: when the page scroll to down this menu stays on the top its own position
Add Multipurpose Navigation Menu to Blogger
Preview-
Live Demo- Click here
Codes for copy-
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/>
<style>
/*crawlist.net CSS starts*/
#ks-meno{
width:100%;
height:45px;
display:block;
padding:0;
margin:0 0 22px 0;
z-index:100;
top:0px;
left:0px;
position:fixed;
box-shadow:2px 2px 5px #444444;
-moz-box-box-shadow:2px 2px 5px #444444;
-web-kit-box-shadow:2px 2px 5px #444444;
-goog-ms-box-shadow:2px 2px 5px #444444;
background:#181818;
}
#ks-mano1{
float:left;
width:700px;
height:40px;
display:block;
padding:0;
margin-left:40px;
}
#ks-mano1 ul{
float:left;
margin:0;
padding:0;
border:#181818 1px hidden;
}
#ks-mano1 li{
float:left;
list-style:none;
line-height:37px;
margin:0;
padding:0
background:#181818;
border:#181818 1px hidden;
}
#ks-mano1 li a, #ks-mano1 li a:link{
color:#fff;
display:block;
margin:0;
font-family: 'Droid Serif', serif;
font-size:16px;
padding:10px;
text-decoration:none;
border:#181818 1px hidden; line-height:25px;
}
#ks-mano1 li a:hover, #ks-mano1 li a:active, #ks-mano1 .current_page_item a {
color:#fff;
padding:10px;
background:#6CF;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease; border:#6CF 1px hidden;
}
#ks-mano1 li li a, #ks-mano1 li li a:link, #ks-mano1 li li a:visited{
font-size: 12px;
background:#181818;
color: #fff;
width: 150px;
margin: 0;
padding: 0px 10px;
line-height:30px;
position: relative;
border:#181818 1px solid;
}
#ks-mano1 li li a:hover, #ks-mano1 li li a:active {
color: #fff;border:#6CF 1px solid;
background:#6CF;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease;
}
#ks-mano1 li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}
#ks-mano1 li:hover ul, #ks-mano1 li li:hover ul, #ks-mano1 li li li:hover ul, #ks-mano1 li.sfhover ul, #topks-mano1 li li.sfhover ul, #topks-mano1 li li li.sfhover ul{
left:auto
}
#ks-mano1 li:hover, #ks-mano1 li.sfhover{
position:static;
}
#ks-ico {
float:right;
width:220px;
padding:0px 0px ;
}
#ks-ico img
{
margin-left:6px;
margin-top:10px;
height:28px; width:28px;
border:none;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease;
}
#ks-ico img:hover
{
opacity:.8;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-o-transition: all .6s ease;
-ms-transition: all .6s ease;
transition: all .6s ease;
}
/*crawlist.net CSS ends*/
</style>
<!--crawlist.net nev starts-->
<div id='ks-meno'>
<div id='ks-mano1'>
<ul>
<!--menu--><li><a href='#'>Home</a></li><!--menu-->
<!--menu--><li><a href='#'>Categories</a><!--menu-->
<ul><!--submenu-->
<li><a href='#'>HTML</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>jQuery</a></li>
<li><a href='#'>Ruby</a></li>
<li><a href='#'>Python</a></li>
<!--submenu-->
</ul>
</li>
<!--menu--><li><a href='#'>Portfolio</a><!--menu-->
<ul><!--submenu-->
<li><a href='#'>Biography</a></li>
<li><a href='#'>Work History</a></li>
<li><a href='#'>Refund Policy</a></li>
<li><a href='#'>Terms</a></li>
<!--submenu-->
</ul>
</li>
<!--menu--><li><a href='#'>About us</a></li><!--menu-->
<!--menu--><li><a href='#'>Contact us</a></li><!--menu-->
</ul>
</div>
<div id='ks-ico'>
<a href='http://www.facebook.com/your page' target='_blank' title="Join Us on Facebook"><img src="http://4.bp.blogspot.com/-nH8Opm-ROF4/VPX4iecUsRI/AAAAAAAAFgM/zlC3XDw8EbE/s1600/facebook.png"/></a>
<a href='https://twitter.com/your profile' target='_blank' title="Follow us on Twitter"><img src="http://1.bp.blogspot.com/-U3139kg8u8U/VPX4rFEQnII/AAAAAAAAFgU/a949s3V5xDQ/s1600/twitter.png"/></a>
<a href='https://plus.google.com/your profile' target='_blank' title="Add Us to Circles"><img src="http://4.bp.blogspot.com/-KakRi0iWszQ/VPX4xuf6MbI/AAAAAAAAFgc/GzUF_F3rueU/s1600/google_plus.png"/></a>
<a href='http://linkedin.com/your profile' target='_blank' title="Add Us on Linked in"><img src="http://3.bp.blogspot.com/-VeDrCRqJwXY/VPX44Yz85cI/AAAAAAAAFgk/LiIvoVRgw3Q/s1600/linkedin.png"/></a>
<a href='http://feeds.feedburner.com/your feed' target='_blank' title="Subscribe our feed"><img src="http://1.bp.blogspot.com/-6HINKkuYM64/VPX4-_7e7_I/AAAAAAAAFgs/fb-ZleqDa0A/s1600/rss.png"/></a>
</div>
</div><!--crawlist.net nev ends-->
How to add this Menu
- First log in to your Blogger, select your Blog
- Go to 'Layout' tab then click 'add a gadget’
- Select 'html/javascript' from Pop-up menu,
- Copy following codes and configure
How to configure this Menu
- To configure Dropdown menu, first collect your links of Homepage, Labels and Other pages. And paste individual link in # by your order and change the anchor text as your requirement.
- Menu links indicates into <!--menu-->
- And Sub-menu links indicates into <!--submenu-->
- If you want to add new menu link just, copy paste in order <li><a href='#'>Home</a></li> and configure
- If you want to remove any links just delete <li><a href='#'>Home</a></li>
- To configuring Social media profiles, First collect following profiles and replace address links on default links, indicates with red color.
- To configure Feedburner email subscription; first collect your website's unique feed id. It can be find in this link https://feeds.feedburner.com/yourFeedId , and replace FeedId with your feed name. It red colored
- After configuring done, save widget, save template, And check out your blog for confirm it working fine :)
Compatibility
- This Floating navigation menu is compatible with any default and standard designed template. If its design breaks on any template remove it.
- This menu is compatible with any updated Web browser.
