A drop down menu is something that contains navigation URl's of your blog and making it easier to find the content users are looking for.
A floating element is something that sticks to your blog at the place you post it and scrolling doesn't affects it position.
Today I am sharing a drop down menu for blogger with search box.
Adding Floating DropDown menu to blogger
You have just added a sticky drop down menu for blogger.
Leave your comments and suggestions.
A floating element is something that sticks to your blog at the place you post it and scrolling doesn't affects it position.
Today I am sharing a drop down menu for blogger with search box.
Adding Floating DropDown menu to blogger
- Login to your blogger dashboard.
- Select your blog.
- Select Template .
- Click Edit HTML.
- Add this code just above the </body> tag
<style>Now click save and you are done.
#naviopdropcont {
width: 100%;
height: 45px;
display: block;
padding: 0;
margin: 0 0 20px 0;
z-index: 100;
top: 0px;
left: 0px;
position: fixed;
box-shadow: 2px 2px 5px #444444;
-moz-box-box-shadow: 2px 2px 5px #444444;
-web-kit-box-shadow: 2px 2px 5px #444444;
-goog-ms-box-shadow: 2px 2px 5px #444444;
background: #000;
}
#naviopdropnav {
float: left;
width: 800px;
height: 40px;
display: block;
padding: 0;
margin-left: 40px;
}
#naviopdropnav ul {
float: left;
margin: 0;
padding: 0;
}
#naviopdropnav li {
float: left;
list-style: none;
line-height: 40px;
margin: 0;
padding: 0 background:#180000;
}
#naviopdropnav li a,
#naviopdropnav li a:link {
color: #fff;
display: block;
margin: 0;
font: 16px georgia, verdana;
padding: 10px;
text-decoration: none;
}
#naviopdropnav li a:hover,
#naviopdropnav li a:active,
#naviopdropnav .current_page_item a {
color: #fff;
padding: 10px;
background: #007acc;
}
#naviopdropnav li li a,
#naviopdropnav li li a:link,
#naviopdropnav li li a:visited {
font-size: 12px;
background: #180000;
color: #fff;
width: 150px;
margin: 0;
padding: 0px 10px;
line-height: 30px;
position: relative;
}
#naviopdropnav li li a:hover,
#naviopdropnav li li a:active {
color: #fff;
background: #007acc;
}
#naviopdropnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px
}
#naviopdropnav li:hover ul,
#naviopdropnav li li:hover ul,
#naviopdropnav li li li:hover ul,
#naviopdropnav li.sfhover ul,
#topnaviopdropnav li li.sfhover ul,
#topnaviopdropnav li li li.sfhover ul {
left: auto
}
#naviopdropnav li:hover,
#naviopdropnav li.sfhover {
position: static;
}
</style>
<style>
. -webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
box-shadow: 0 1px 0px rgba(0, 0, 0, .1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
/* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
/* ie8 */
}
.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}
.searchform .searchbutton {
color: #fff;
border: solid 1px #000;
font-size: 11px;
height: 30px;
width: 30px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
cursor: pointer;
background: #007acc;
}
</style>
<div id='naviopdropcont'>
<div id='naviopdropnav'>
<ul>
<li><a href=''>Home</a></li>
<li><a href='#'>About us</a></li>
<li><a href='#'>Goofs</a>
<ul>
<li><a href='#'>Item 1</a></li>
<li><a href='#'>Item 2</a></li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Item 4</a></li>
</ul>
</li>
<li><a href='#'>Categories</a>
<ul>
<li><a href='#'>Category 1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
<li><a href='#'>5</a></li>
<li><a href='#'>drop down</a></li>
</ul>
</li>
<li><a href='#'>Contact us</a>
</li>
<li style='float:right;padding:0px 0px ;margin:5px 18px 11px 40px;
'>
<form class="searchform" action="/search" method="get">
<input name="q" class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="searchbutton" type="submit" value="Go" />
</form>
</li>
</ul>
</div>
You have just added a sticky drop down menu for blogger.
Leave your comments and suggestions.
0 nhận xét: