If you have a responsive template wouldn't it be nice to spice it up with a responsive navigation menu, suitable for desktop, mobile, tablets, laptops, all kinds of devices.
Thanks to Crawlist.net for this awesome navigation menu.
Follow the steps below to add in blogger
Also Read: How To Add Auto Read More With Thumbnail In Blogger
Steps to add responsive navigation menu
==> Enter blogger.com dashboard and select blog.
==> Locate Template > Edit Html, We are to add Jquery to template, Ignore if it already exists in your template.
==> Locate <head> tag in the template usually at line four.
==> If you can't find it, click anywhere in the template and hit ctrl+F buttons for window, Cmd+F for Mac to show a search box, input <head> in the box and hit "Enter" key
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
==> copy and paste the jquery code above directly below the <head> tag.
==> Save your template and go to "Layout".
==> Click on "Add a Gadget". please add gadget where you want the Navigation menu to appear.
==> Select Html/Javascript in pop out menu.
==> Copy and Paste The code below in the Html Box
==> Save layout. your are done.
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style>/*blogwox.blogspot.com CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
border-radius: 4px;
border: 1px solid #2698e9;
font-family: 'Source Sans Pro', sans-serif;
line-height: 1;
background: #6bb9f0;
background: -webkit-linear-gradient(bottom, #54aeee, #82c4f2);
background: -ms-linear-gradient(bottom, #54aeee, #82c4f2);
background: -moz-linear-gradient(bottom, #54aeee, #82c4f2);
background: -o-linear-gradient(bottom, #54aeee, #82c4f2);
background: linear-gradient(to top, #54aeee, #82c4f2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), inset 0 -2px 0px #46a7ec, inset 0 1px 0 #90cbf4;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 20px 25px 21px 25px;
font-size: 15px;
text-decoration: none;
color: #fcfefb;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
}
#cssmen.align-right > ul > li:first-child > a {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #444444;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
background: rgba(125, 125, 125, 0.04);
}
#cssmenu > ul > li:after {
content: '';
position: absolute;
top: 18px;
right: 0;
display: block;
height: 20px;
width: 1px;
opacity: .15;
background: rgba(0, 0, 0, 0.7);
background: linear-gradient(to top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:after {
right: auto;
left: -1px;
}
#cssmenu > ul > li:before {
content: '';
position: absolute;
top: 18px;
right: -1px;
display: block;
height: 20px;
width: 1px;
opacity: .35;
background: rgba(255, 255, 255, 0.8);
background: linear-gradient(to top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.01), #ffffff, rgba(255, 255, 255, 0.01));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:before {
right: auto;
left: 0px;
}
#cssmenu > ul > li:last-child:after,
#cssmenu > ul > li:last-child:before {
display: none;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li > a {
padding: 18px 25px;
}
#cssmenu.small-screen > ul > li:after,
#cssmenu.small-screen > ul > li:before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 18px 25px 19px 25px;
cursor: pointer;
font-size: 15px;
text-decoration: none;
color: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened {
color: #444444;
}
#cssmenu.small-screen #menu-button:after {
content: "";
position: absolute;
right: 25px;
top: 20px;
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 2px solid #fcfefb;
border-bottom: 2px solid #fcfefb;
width: 18px;
height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
border-top: 2px solid #444444;
border-bottom: 2px solid #444444;
}
#cssmenu.small-screen #menu-button:before {
content: "";
position: absolute;
right: 25px;
top: 30px;
display: block;
width: 18px;
height: 2px;
background: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
background: #444444;
}/*blogwox.blogspot.com CSS ends*/
</style>
<div id='cssmenu'>
<ul><!--blogwox.blogspot.com menu starts-->
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Customization</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul><!--blogwox.blogspot.com menu ends-->
</div>
<script>
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
breakpoint: 768,
sticky: false
}, options);
return this.each(function() {
cssmenu.find('li ul').parent().addClass('has-sub');
if (settings.format != 'select') {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
}
else if (settings.format === 'select')
{
cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
var selectList = cssmenu.find('select');
selectList.append('<option>' + settings.title + '</option>', {
"selected": "selected",
"value": ""});
cssmenu.find('a').each(function() {
var element = $(this), indentation = "";
for (i = 1; i < element.parents('ul').length; i++)
{
indentation += '-';
}
selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
});
selectList.on('change', function() {
window.location = $(this).find("option:selected").val();
});
}
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($(window).width() > settings.breakpoint) {
cssmenu.find('ul').show();
cssmenu.removeClass('small-screen');
if (settings.format === 'select') {
cssmenu.find('select').hide();
}
else {
cssmenu.find("#menu-button").removeClass("menu-opened");
}
}
if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
cssmenu.find('ul').hide().removeClass('open');
cssmenu.addClass('small-screen');
if (settings.format === 'select') {
cssmenu.find('select').show();
}
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
$("#cssmenu").menumaker({
title: "Menu",
format: "dropdown"
});
});
});
})(jQuery);
</script>
If the navigation menu don't work properly, make sure the code below is in your template.
<meta name="viewport" content="width=device-width, initial-scale=1">Usually around the <head> tag. Enjoy
1 comments
Thanks to Admin for Sharing such useful Information. I really like your Blog. Addition to your Story here I am Contributing 1 more Similar Story Responsive horizontal navigation menu using pure CSS.
EmoticonEmoticon