TGSBD: How to Add Simple Dropdown Menu in Blogger

Hello dear bloggers! How's blogging? Hope it's all good. Anyway, today I will be teaching you on how to add a simple dropdown menu in blogger. The menu is very simple yet useful to all of us bloggers. This menu is made up of HTML and CSS, you may implement this menu directly into your blog by adding it on the base HTML codes or you may also add this menu by just adding a HTML/Javascript gadget. In any cases you will be adding almost identical codes. So let's get started.

Step #1. Proceed to Dashboard > Layout > Add Gadget > HTML/Javascript

Step #2 - A. Compressed Version.

<div id='menu-container'> <nav id='neat-menu'> <ul> <li class='active'><a href='/'>Home</a></li> <li><a href='#'>Dropdown 1</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> <li><a href='#'>Dropdown 2</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> <li><a href='#'>Dropdown 3</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> </ul> </li> <li><a href='#'>Single Menu</a></li> <li><a href='#'>Single Menu</a></li> <li><a href='#'>Dropdown 4</a> <ul> <li><a href='#'>Menu element 1</a></li> <li><a href='#'>Menu element 2</a></li> <li><a href='#'>Menu element 3</a></li> <li><a href='#'>Menu element 4</a></li> <li><a href='#'>Menu element 5</a></li> </ul> </li> </ul> </nav> </div><style type="text/css"> #contact-links { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); margin: auto; position: relative; width: 100%;}#contact-links a { color: #4C9FEB;}#contact-links a:hover { color: #3D85C6;}#my-links { float: right; font-size: 12px; margin: 4px 10px; overflow: hidden; text-shadow: 0 1px 0 #FFFFFF;}#my-links a { margin-left: 7px; padding-left: 8px; text-decoration: none;}#my-links a:first-child { border-width: 0;}#menu-container { background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 ); clear: both; height: 46px; padding-top: 1px;}#neat-menu { float: left;}#neat-menu a { text-decoration: none; background: transparent;}#neat-menu ul { list-style: none; margin: 0; padding: 0;}#neat-menu > ul > li { float: left; padding-bottom: 12px;}#neat-menu ul li a { color: #333333; display: block; font-size: 14px; height: 25px; line-height: 25px; padding: 11px 15px 10px; text-shadow: 0 1px 0 #FFFFFF;}#neat-menu ul li a:hover { background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 ); border-radius: 0 0 0 0; }#neat-menu > ul > li.active > a { background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); color: #FFFFFF; margin: -1px 0 -1px -1px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); border-radius: 0 0 0 0;}#neat-menu > ul > li.active > a:hover { background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 ); border-radius: 0 0 0 0; }#neat-menu > ul > li:first-child > a { border-radius: 0 0 0 0;}#neat-menu ul ul { background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 ); border-radius: 0 0 0 0; height: 0; margin-top: 1px; opacity: 0; overflow: hidden; width: 200px; padding: 0; position: absolute; visibility: hidden; z-index: 1; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s;}#neat-menu ul li:hover ul { margin-top: 0\2; height: auto; opacity: 1; visibility: visible; }#neat-menu ul ul a { color: #444444; height: 24px; line-height: 24px; padding: 7px 12px; text-shadow: 0 1px 0 #FFFFFF;}#neat-menu ul ul a:hover { background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); color: #FFFFFF; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); border-radius: 0 0 0 0; width: 200px; }#neat-menu ul ul li:first-child a { border-top-width: 0;}</style>

Step #2 - B. Cody and Paste this set of codes. Uncompressed Version.

<div id='menu-container'>
<nav id='neat-menu'>
<ul>
<li class='active'><a href='/'>Home</a></li>
<li><a href='#'>Dropdown 1</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>Dropdown 2</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
<li><a href='#'>Dropdown 3</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
</ul>
</li>
<li><a href='#'>Single Menu</a></li>
<li><a href='#'>Single Menu</a></li>
<li><a href='#'>Dropdown 4</a>
<ul>
<li><a href='#'>Menu element 1</a></li>
<li><a href='#'>Menu element 2</a></li>
<li><a href='#'>Menu element 3</a></li>
<li><a href='#'>Menu element 4</a></li>
<li><a href='#'>Menu element 5</a></li>
</ul>
</li>
</ul>
</nav>

</div>

<style type="text/css">

#contact-links {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
margin: auto;
position: relative;
width: 100%;
}
#contact-links a {
color: #4C9FEB;
}
#contact-links a:hover {
color: #3D85C6;
}
#my-links {
float: right;
font-size: 12px;
margin: 4px 10px;
overflow: hidden;
text-shadow: 0 1px 0 #FFFFFF;
}
#my-links a {
margin-left: 7px;
padding-left: 8px;
text-decoration: none;
}
#my-links a:first-child {
border-width: 0;
}
#menu-container {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
clear: both;
height: 46px;
padding-top: 1px;
}
#neat-menu {
float: left;
}
#neat-menu a {
text-decoration: none;
background: transparent;
}
#neat-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#neat-menu > ul > li {
float: left;
padding-bottom: 12px;
}
#neat-menu ul li a {
color: #333333;
display: block;
font-size: 14px;
height: 25px;
line-height: 25px;
padding: 11px 15px 10px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0 0 0 0;

}
#neat-menu > ul > li.active > a {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
color: #FFFFFF;
margin: -1px 0 -1px -1px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
border-radius: 0 0 0 0;

}
#neat-menu > ul > li.active > a:hover {
background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
border-radius: 0 0 0 0;

}
#neat-menu > ul > li:first-child > a {
border-radius: 0 0 0 0;
}
#neat-menu ul ul {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-radius: 0 0 0 0;
height: 0;
margin-top: 1px;
opacity: 0;
overflow: hidden;
width: 200px;
padding: 0;
position: absolute;
visibility: hidden;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#neat-menu ul li:hover ul {
margin-top: 0\2;
height: auto;
opacity: 1;
visibility: visible;

}
#neat-menu ul ul a {
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#neat-menu ul ul a:hover {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
border-radius: 0 0 0 0;
width: 200px;

}
#neat-menu ul ul li:first-child a {
border-top-width: 0;
}
</style>

Thank you so much for the visit, please don't forget to like the blog on Facebook - a single like gives me motivation :P . For any concerns please relay it to me via comment with the detailed concern. Happy blogging!

June 13, 2016

How to Add Simple Dropdown Menu in Blogger

Recent Posts

Labels

Check This Out

Get Connected