Adding Responsive Navigation Menu in Blogger

Learn How to Make a Responsive Navigation Menu in Blogger Using CSS & JQuery but HTML is mandatory. Hi, This article is going to teach you how you can make the navigation menu in a blogger blog. As you know that we are learning blogger template development and it is mandatory for every blogger blog to have a responsive navigation menu that should be responsive, user friendly, and look stunning so that it attracts the user and helps the user to navigate to different pages of a website.

Responsive Navigation Menu and its use:

Responsive Navigation Menu is like other navigation menus but is responsive which means that no matter what the device is viewing your website, the navigation menu will accommodate itself according to the device or in simple words, it will change its style according to the device.

The use of the navigation menu can not be ignored as it plays a very important role. It helps the visitor on your website to navigate to other pages of your website.

Responsive Navigation Menu In Blogger:

One of the big headaches for blogger users is that the blogger does not support any plugin like WordPress and blogger users have to do everything manually by coding. In blogger, we don't have any widgets to make a navigation menu and it becomes hard to make a multilevel navigation menu.

Don't worry this problem will be resolved in this article.

Let's Use others logic 😀 :

Most of the blogger template developers use dash ( _ ) logic. This might confuse you but let's see it with an example.

Catagory
_Subcatagory
__Sub-Subcatagory

The Dash ( _ ) before the category decides that is it a subcategory or not. If you look at this site, it also uses dash logic.

In Blogger we Use LinkList Widget to make navigation bar.

Let's Start the Programming Work Now ☹️ :

First, we need to have the HTML Markup.

<div id="cssmenu">
	<ul>
		<li><a href="#">Catagory</a></li>
		<li><a href="#">Catagory</a></li>
		<li><a href="#">_sub-catagory</a></li>
		<li><a href="#">__sub-sub-catagory</a></li>
	</ul>
</div>

Now its time to style us and make it responsive but you won't see it in action because the things are not yet completed. To apply the style we are going to use CSS.

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#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 {
	font-family: Montserrat, sans-serif;
	background: #333333;
}
#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-center ul ul {
	text-align: left;
}
#cssmenu.align-right > ul > li {
	float: right;
}
#cssmenu > ul > li > a {
	padding: 17px;
	font-size: 12px;
	letter-spacing: 1px;
	text-decoration: none;
	color: #dddddd;
	font-weight: 700;
	text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
	color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
	padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
	position: absolute;
	top: 22px;
	right: 11px;
	width: 8px;
	height: 2px;
	display: block;
	background: #dddddd;
	content: '';
}
#cssmenu > ul > li.has-sub > a:before {
	position: absolute;
	top: 19px;
	right: 14px;
	display: block;
	width: 2px;
	height: 8px;
	background: #dddddd;
	content: '';
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
	top: 23px;
	height: 0;
}
#cssmenu ul ul {
	position: absolute;
	left: -9999px;
}
#cssmenu.align-right ul ul {
	text-align: right;
}
#cssmenu ul ul li {
	height: 0;
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
#cssmenu li:hover > ul {
	left: auto;
}
#cssmenu.align-right li:hover > ul {
	left: auto;
	right: 0;
}
#cssmenu li:hover > ul > li {
	height: 35px;
}
#cssmenu ul ul ul {
	margin-left: 100%;
	top: 0;
}
#cssmenu.align-right ul ul ul {
	margin-left: 0;
	margin-right: 100%;
}
#cssmenu ul ul li a {
	border-bottom: 1px solid rgba(150, 150, 150, 0.15);
	padding: 11px 15px;
	width: 170px;
	font-size: 12px;
	text-decoration: none;
	color: #dddddd;
	font-weight: 400;
	background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
	border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
	color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
	position: absolute;
	top: 16px;
	right: 11px;
	width: 8px;
	height: 2px;
	display: block;
	background: #dddddd;
	content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
	right: auto;
	left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
	position: absolute;
	top: 13px;
	right: 14px;
	display: block;
	width: 2px;
	height: 8px;
	background: #dddddd;
	content: '';
	-webkit-transition: all 0.25s ease;
	-moz-transition: all 0.25s ease;
	-ms-transition: all 0.25s ease;
	-o-transition: all 0.25s ease;
	transition: all 0.25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
	right: auto;
	left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
	top: 17px;
	height: 0;
}
#cssmenu.small-screen {
	width: 100%;
}
#cssmenu.small-screen ul {
	width: 100%;
	display: none;
}
#cssmenu.small-screen.align-center > ul {
	text-align: left;
}
#cssmenu.small-screen ul li {
	width: 100%;
	border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
	height: auto;
}
#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
	width: 100%;
	border-bottom: 0;
}
#cssmenu.small-screen > ul > li {
	float: none;
}
#cssmenu.small-screen ul ul li a {
	padding-left: 25px;
}
#cssmenu.small-screen ul ul ul li a {
	padding-left: 35px;
}
#cssmenu.small-screen ul ul li a {
	color: #dddddd;
	background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
	color: #ffffff;
}
#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul,
#cssmenu.small-screen.align-right ul ul {
	position: relative;
	left: 0;
	width: 100%;
	margin: 0;
	text-align: left;
}
#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before {
	display: none;
}
#cssmenu.small-screen #menu-button {
	display: block;
	padding: 17px;
	color: #dddddd;
	cursor: pointer;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 700;
}
#cssmenu.small-screen #menu-button:after {
	position: absolute;
	top: 22px;
	right: 17px;
	display: block;
	height: 4px;
	width: 20px;
	border-top: 2px solid #dddddd;
	border-bottom: 2px solid #dddddd;
	content: '';
}
#cssmenu.small-screen #menu-button:before {
	position: absolute;
	top: 16px;
	right: 17px;
	display: block;
	height: 2px;
	width: 20px;
	background: #dddddd;
	content: '';
}
#cssmenu.small-screen #menu-button.menu-opened:after {
	top: 23px;
	border: 0;
	height: 2px;
	width: 15px;
	background: #ffffff;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
#cssmenu.small-screen #menu-button.menu-opened:before {
	top: 23px;
	background: #ffffff;
	width: 15px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
	position: absolute;
	z-index: 99;
	right: 0;
	top: 0;
	display: block;
	border-left: 1px solid rgba(120, 120, 120, 0.2);
	height: 46px;
	width: 46px;
	cursor: pointer;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
	background: #262626;
}
#cssmenu.small-screen ul ul .submenu-button {
	height: 34px;
	width: 34px;
}
#cssmenu.small-screen .submenu-button:after {
	position: absolute;
	top: 22px;
	right: 19px;
	width: 8px;
	height: 2px;
	display: block;
	background: #dddddd;
	content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
	top: 15px;
	right: 13px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
	background: #ffffff;
}
#cssmenu.small-screen .submenu-button:before {
	position: absolute;
	top: 19px;
	right: 22px;
	display: block;
	width: 2px;
	height: 8px;
	background: #dddddd;
	content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
	top: 12px;
	right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
	display: none;
}
#cssmenu.small-screen.select-list {
	padding: 5px;
}

Make Sure the selector cssmenu Shuld be same in HTML, CSS and JQuery codes.

Now the last thing is to apply JQuery logic to make this responsive navigation menu for the blogger at work. I have combined two jquery plugins for this functionality so the plugin codes are not mine so the credit goes to the actual owners.

This is the JQuery plugin code in a minified version which is about 3KB and helps us to make a Responsive CSS Navigation Menu In Blogger.

//<![CDATA[
"use strict";!function(d){d.fn.menuify=function(){return this.each(function(){for(var e=d(this).find("ul li").children("a"),n=e.length,t=0;t<n;t++){var i=e.eq(t),s=i.text();if("_"!==s.charAt(0))if("_"===e.eq(t+1).text().charAt(0)){var a=i.parent();a.append("<ul/>")}"_"===s.charAt(0)&&(i.text(s.replace("_","")),i.parent().appendTo(a.children("ul")))}for(t=0;t<n;t++){var l=e.eq(t),o=l.text();if("_"!==o.charAt(0))if("_"===e.eq(t+1).text().charAt(0)){var r=l.parent();r.append("<ul/>")}"_"===o.charAt(0)&&(l.text(o.replace("_","")),l.parent().appendTo(r.children("ul")))}d(this).find("ul li ul").parent("li")})},d.fn.menumaker=function(e){var n=d(this),s=d.extend({title:"Menu",format:"dropdown",breakpoint:768,sticky:!1},e);return n.menuify(),this.each(function(){if(n.find("li ul").parent().addClass("has-sub"),"select"!=s.format)n.prepend('<div id="menu-button">'+s.title+"</div>"),d(this).find("#menu-button").on("click",function(){d(this).toggleClass("menu-opened");var e=d(this).next("ul");e.hasClass("open")?e.hide().removeClass("open"):(e.show().addClass("open"),"dropdown"===s.format&&e.find("ul").show())}),multiTg=function(){n.find(".has-sub").prepend('<span class="submenu-button"></span>'),n.find(".submenu-button").on("click",function(){d(this).toggleClass("submenu-opened"),d(this).siblings("ul").hasClass("open")?d(this).siblings("ul").removeClass("open").hide():d(this).siblings("ul").addClass("open").show()})},"multitoggle"===s.format?multiTg():n.addClass("dropdown");else if("select"===s.format){n.append('<select style="width: 100%"/>').addClass("select-list");var t=n.find("select");t.append("<option>"+s.title+"</option>",{selected:"selected",value:""}),n.find("a").each(function(){var e=d(this),n="";for(i=1;i<e.parents("ul").length;i++)n+="-";t.append('<option value="'+d(this).attr("href")+'">'+n+e.text()+"</option")}),t.on("change",function(){window.location=d(this).find("option:selected").val()})}return!0===s.sticky&&n.css("position","fixed"),resizeFix=function(){d(window).width()>s.breakpoint&&(n.find("ul").show(),n.removeClass("small-screen"),"select"===s.format?n.find("select").hide():n.find("#menu-button").removeClass("menu-opened")),d(window).width()<=s.breakpoint&&!n.hasClass("small-screen")&&(n.find("ul").hide().removeClass("open"),n.addClass("small-screen"),"select"===s.format&&n.find("select").show())},resizeFix(),d(window).on("resize",resizeFix)})}}(jQuery);
//]]>

In this code there are two JQuery Plugins, One is used to convert _ logic to HTML list structure and the second one make that HTML list into responsive Navigation Bar.

So to make this JQuery code in action this is nacessery.

<script>
	// Make Menu
	$('#cssmenu').menumaker({
		title: 'Menu',
		format: 'dropdown',
	});
</script>

This code won't work until you include the jquery library file.

Responsive Navigation Bar Settings:

There are some of the settings that you can change in the menu.

Variables	Description
title	Title is displayed before the menu and by default is hidden.
format	Available types of manu. ( dropdown, select, multitoggle )
breakpoint	Breakpoint Value to make this navigation change its layout at specific breakpoint. Default ( 768 )
sticky	Specifies that menu should be sticky on scroll or not. Default ( false )

Conclusion:

It's all about how you can add responsive navigation menu in blogger. In the code I used HTML but when you will implement it in Blogger you must create the same logic in Blogger XML Code.