How To Add Drop Down Navigation Menu In Blogger

Drop Down Navigation Menu

This is the simple drop down navigation menu which is built with pure HTML, CSS3 and JQuery. It has a gray color because it is user friendly and it will not affect the visitors' eyes. You know some heavy colors like Purple, Blue and Orange affect the visitors' eyes and most web designers use light colors. So this menu shows the vertical sub categories when you'll place the mouse on any drop down menu. It also has a focus or click effect. You can have a look at this by visiting the below demo link.

Live Demo

Tutorial

Tutorial of installing this menu is your blog is just left hand game. Yeah! It is simply easy. So, follow the below given steps and add it.

1-Go To Blogger >> Layout >> Add a Gadget (In The Header Area)
2-Choose "HTML/JavaScript"
3-Paste The Following Code In The Content Box

//When hovering over the main nav link we find the dropdown menu to the corresponding link.
			$('#dropdown_nav li').hover(function() {
				//Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.
				$(this).find('.sub_nav').fadeIn(100);
			}, function() {
				//Do the same again, only fadeOut this time.
				$(this).find('.sub_nav').fadeOut(50);
			});
		});
	</script>
	<style>
	#dropdown_nav a {
	font-family:Arial, Sans-Serif;
	font-size:15px;
	font-weight:bold;
	color:#525252;
	text-decoration:none;
}
	#dropdown_nav {
	width:960px;
	padding:0px;
	display:inline-block;
	list-style:none;
	-moz-box-shadow:inset 0px 0px 1px #fff;
	-webkit-box-shadow:inset 0px 0px 1px #fff;
	border:1px solid #ccc;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	background:#e2e2e2;
	background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
	background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
}

#dropdown_nav li {
		padding:10px 0px 10px 0px;
		float:left;
		position:relative;
		display:inline-block;
	}

#dropdown_nav li a {
			padding:10px 15px 10px 15px;
			text-shadow:-1px 1px 0px #f6f6f6;
			-moz-box-shadow:inset 0px 0px 1px #fff;
			-webkit-box-shadow:inset 0px 0px 1px #fff;
			border-right:1px solid #ccc;
		}
		#dropdown_nav li a:hover {
			background:#f9f9f9;
			background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
			background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
		}
		#dropdown_nav li a:active {
			background:#e2e2e2;
			background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
			background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
		}

#dropdown_nav li a.first {
			-moz-border-radius:5px 0px 0px 5px;
			-webkit-border-radius:5px 0px 0px 5px;
		}
		/*#dropdown_nav li a.last {
			-moz-border-radius:0px 5px 5px 0px;
			-webkit-border-radius:0px 5px 5px 0px;
		}*/

/* Sub-Nav styling */
		#dropdown_nav .sub_nav {
			width:160px;
			padding:0px;
			position:absolute;
			top:38px;
			left:0px;
			border:1px solid #ccc;
			background:#e2e2e2;
		}

#dropdown_nav .sub_nav li {
				width:160px;
				padding:0px;
			}

#dropdown_nav .sub_nav li a {
					display:block;
					border-bottom:1px solid #ccc;
					background:-moz-linear-gradient(#f3f3f3, #e2e2e2);
					background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));
				}
				#dropdown_nav .sub_nav li a:hover {
					background:#f9f9f9;
					background:-moz-linear-gradient(#f9f9f9, #e8e8e8);
					background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));
				}
				#dropdown_nav .sub_nav li a:active {
					background:#e2e2e2;
					background:-moz-linear-gradient(#e2e2e2, #f3f3f3);
					background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));
				}
				</style>
</head>
<body>
	
	<ul id="dropdown_nav">
<li><a class="first" href="#">Home</a></li>
<li><a href="#">Menu 1</a>
			<ul class="sub_nav">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
<li><a href="#">Sub Menu 6</a></li>
<li><a href="#">Sub Menu 7</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
			<ul class="sub_nav">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
		</li>
<li><a class="last" href="#">Menu 4</a>
			<ul class="sub_nav">
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
</ul>
</li>
</ul>
<br />

</body>
</html>

4-Replace # Characters With Links
5-Replace Menu / Sub Menu With your Choice
6-Click "Save" Button
That's All!

If you Need any Help or Facing any problem? Feel free to ask in the comment area. I'm here to help you at anytime.

Tricks and Hacks

How To Add Drop Down Navigation Menu In Blogger

Drop Down Navigation Menu

Post a Comment

Time

Trace Mobile no.

Live Traffic

Popular Posts

Blog Archive