no-style

close

Adding Responsive Navigation Menu in Blogger - Complete Guide

Adding Responsive Navigation Menu in Blogger - Complete Guide

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, userfriendly 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 menu 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 widget 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 the example.


Catagory
_Subcatagory
__Sub-Subcatagory

The Dash ( _ ) before catagory decides that is it a subcategory or not. If you look on 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.

VariableDescription
titleTitle is displayed before the menu and by default is hidden.
formatAvailable types of manu. ( dropdown, select, multitoggle )
breakpointBreakpoint Value to make this navigation change its layout at specific breakpoint. Default ( 768 )
stickySpecifies 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.

2 Comments

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.
  1. Bro how to make mega menu like yours???

    ReplyDelete
    Replies
    1. Actually to make a mega menu like this multiple things are combined to gather.

      You can use the templates shared on this website that include the mega menu like my site.

      Delete

Post a Comment

Was this article useful? Please Leave Your Feedback by writing what's in your mind, below.

no-style

no-style

Recent Comments

{getWidget} $results={3} $label={comments} $type={list}