Dropdown menus are very helpful tool in site’s navigation. You can put lot of links in a single dropdwon list in these menus. This guide is about a stylish CSS based dropdown menu with inbuilt search box for blogger blogs. This menu is created in pure CSS and HTML only. There is no scripting language is used for creating this menu, that is why this menu do not reduces your blog’s loading speed. It is very easy to customize this dropdown menu according to your blog’s design. All these things are explained very well in this tutorial.
Adding dropdown menu to blogger
~ Method 1 ~
Step 1: Login to your blogger dashboard.
Step 2: Select your blog and Select Layout option.
Step 3: Select Add a gadget option below header
Step 4: Select HTML/JavaScript widget.
Step 5: In the HTML/JavaScript widget paste following code and save the widget.
~ Method 2 ~
Step 1: In your blog’s dashboard select Template option.
Step 2: Select Edit HTML option.
Step 3: In the template code find </header>
Step 4: Paste following code just below it and save template.
Code for Dropdown menu :
Adding dropdown menu to blogger
~ Method 1 ~
Step 1: Login to your blogger dashboard.
Step 2: Select your blog and Select Layout option.
Step 3: Select Add a gadget option below header
Step 4: Select HTML/JavaScript widget.
Step 5: In the HTML/JavaScript widget paste following code and save the widget.
~ Method 2 ~
Step 1: In your blog’s dashboard select Template option.
Step 2: Select Edit HTML option.
Step 3: In the template code find </header>
Step 4: Paste following code just below it and save template.
Code for Dropdown menu :
<style>
#navigation{
width:1000px;
height:40px;
display:block;
padding:0;
margin:0 0 22px 0;
margin-left:auto;
margin-right:auto;
background: #45484d; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ1NDg0ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #45484d 0%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #45484d 0%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #45484d 0%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #45484d 0%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
}
#menu{
float:left;
width:740px;
height:40px;
display:block;
padding:0;
margin:0;
}
#menu ul{
float:left;
margin:0;
padding:0;
}
#menu li{
float:left;
list-style:none;
line-height:40px;
margin:0;
padding:0
}
#menu li a, #menu li a:link{
color:#fff;
display:block;
margin:0;
padding:0 10px;
text-decoration:none;
font-family:verdana,arial;
}
#menu li a:hover, #menu li a:active, #menu .current_page_item a {
color:#fff;
padding:0 10px;
background:#00bd39;
border-radius:18px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited{
background: #111111;
color: #fff;
width: 150px;
margin: 0;
padding: 0px 10px;
line-height:30px;
position: relative;
border-bottxom:1px solid #00bd39;
}
#menu li li a:hover, #menu li li a:active {
background:#00bd39;
border-radius:0px;
color: #fff;
}
#menu li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin:0px;
padding:0px
}
#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, #menu li.sfhover ul, #topmenu li li.sfhover ul, #topmenu li li li.sfhover ul{
left:auto
}
#menu li:hover, #menu li.sfhover{
position:static
}
/* === Search Form === */
#search {
float:right;
width:230px;
padding:0px 0px ;
margin:9px 10px 0px 0px;
.margin:8px 10px 0px 0px;
background:#fff;
}
#search form {
margin: 0;
padding: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size:12px;
}
#s {
width:180px;
margin:0;
padding:3px 5px;
height:18px;
color:#444;
background:#fff;
float:left;
border:none;
display:inline;
}
input#searchsubmit{
background:url('http://2.bp.blogspot.com/-hTiuEA1yMzQ/UTsummbkmMI/AAAAAAAABbs/CyyGd92XiVM/s1600/searchbu.png');
float:right;
display:inline;
margin:2px 5px 0px 0px;
height:21px;
width:22px;
color:#fff;
border:none;
text-indent:-9999px;
.font-size: 0;
.display:block;
.line-height: 0;
}
</style>
<div id='navigation'>
<div id='menu'>
<ul>
<li>
<a href='#'>
Home
</a>
</li>
<li>
<a href='#'>
Dropdown »
</a>
<ul>
<li>
<a href='#'>
Link1
</a>
</li>
<li>
<a href='#'>
Link2
</a>
</li>
<li>
<a href='#'>
Link3
</a>
</li>
<li>
<a href='#'>
Link4
</a>
</li>
<li>
<a href='#'>
Link5
</a>
</li>
<li>
<a href='#'>
Link6
</a>
</li>
<li>
<a href='#'>
Link7
</a>
</li>
<li>
<a href='#'>
Link8
</a>
</li>
</ul>
</li>
<li>
<a href='#'>
Contact us
</a>
</li>
</ul>
</div>
<div id='search'>
<form action='http://www.art2advice.in/search/' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == "") {this.value = "Search this site...";}' onfocus='if (this.value == "Search this site...") {this.value = ""}' type='text' value='Search this site...'/>
<input id='searchsubmit' type='submit' value='search'/>
</form>
</div>
</div>
<!--navigation menu with search ends-->
Note : Perform following modifications in the above code.
To change background color of main menu and dropdown list change green color code with your own choice of color code.
To change hover color modify the value of red color code with your own choice of color.
To modify search box change www.art2advice.in with your own website name.
.jpg)
.PNG)
.PNG)
