May 27, 2012

Drop Down Menu widget on blogger

Leave a Comment
Add drop down menu in blogger you need is just a little bit of CSS and HTML code and put that code at the right place in your blog and is done. See here how can we get it,

Menus below uses two pieces of codes.

  1. One is the HTML code which is responsible for positioning of menus 
  2. Second is the CSS code which is responsible for the look and feel of the menus
  3.  Paste the CSS code for your selected Menu just above ]]></b:skin> 
  4.  Go To Design > Page Elements > Click Add a Gadget or Add a Page element > Choose HTML/JavaScript widget >Simple Paste Your HTML code inside HTML/JavaScript widget
  5. Click Save 
Drop down looks like as shown in image,



CSS CODE:
.wrapper1{
color: #44433f; 
font: 14px "Futura Medium", "Myriad Pro", "Gill Sans", Helvetica, Verdana, Arial, sans-serif;
margin: 0;padding: 4px 0 0;}

.wrapper1 a{
color: #E5F2FB;
text-decoration: none;}

.wrapper1 a:hover {
color: #09548B;}

.wrapper1 p {
margin: 0 0 17px;
padding: 0;
line-height: 18px;}

.wrapper {
/*width: 710px;*/
margin: 20px auto;}

.nav {
background: #fff url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmFxQxnOI/AAAAAAAAAHo/WeNb4h2lTcY/s1600/nav_bg.png) repeat-x;
float: left;
}

.nev-wrapper {
clear: both;
float: left;}

.nav-left {
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmHgvXrfI/AAAAAAAAAHs/0C36haanf_o/s1600/nav_left.png) no-repeat top left;
float: left;
width: 11px;
height: 41px;}

.nav-right {
background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmIzag1WI/AAAAAAAAAHw/qNqgaojq4OI/s1600/nav_right.png) no-repeat top right;
float: left;
width: 11px;
height: 41px;}

.nav ul {
/*width: 648px;*/
height: 38px;
float: left;
margin: 0;
padding-top: 3px;
list-style: none;
font-size: 15px;}

.nav li {
float: left;
padding: 0 7px;
background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmP8wgFmI/AAAAAAAAAIA/wdf4DZhsFKg/s1600/split.png) no-repeat right center;
position: relative;
z-index: 1;}

.nav li.last {
background:none;}

.nav li:hover {
z-index:2;}

.nav li a {
display: block;
line-height: 38px;
overflow: hidden;
float: left;}

a .menu-left {
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsl3yDJRkI/AAAAAAAAAHQ/hZkoiBamxso/s1600/menu_left.gif) no-repeat left top;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;}

a .menu-mid {
background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsl7c8ppBI/AAAAAAAAAHY/hxR8ObxBYmo/s1600/menu_mid.gif) repeat-x top left;
height: 32px;
line-height: 35px;
display: block;
float: left;}

a .menu-right {
background: url(http://1.bp.blogspot.com/_jM8-wHc3NKY/TQsmCJ3D5iI/AAAAAAAAAHg/0y7-Wpz4C2o/s1600/menu_right.gif) no-repeat top left;
width: 8px;
height: 32px;
line-height: 35px;
display: block;
float: left;}

.nav li a:hover .menu-left,
.nav li.active a .menu-left,
.nav li:hover a .menu-left,
.nav li a:hover .menu-mid,
.nav li.active a .menu-mid,
.nav li:hover a .menu-mid,
.nav li a:hover .menu-right,
.nav li.active a .menu-right,
.nav li:hover a .menu-right {
background-position: 0 -37px;
line-height: 35px;}

.nav li a:hover,
.nav li.active a,
.nav li.hover a,
.nav li:hover a {
color: #09548B;}

.nav li:hover .sub,
.nav li.hover .sub {
display:block;}

.nav li .sub {
display: none;
position: absolute;
top: 27px;
left: 6px;
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmUJr-yhI/AAAAAAAAAIM/OihvjAeTyG8/s1600/submenu_top.png) no-repeat;
width: 186px;
padding-top: 9px;}

.nav li ul {
background: url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQsmRpDHDsI/AAAAAAAAAIE/ADndeR5TGu8/s1600/submenu_bg.png) repeat-y;
width: 162px;
height: auto;
margin: 0;
padding: 0 12px 10px;
list-style: none;
font-size: 14px;}

.nav li:hover li,
.nav li.active li {
width: 100%;
padding: 1px 0 2px;
border-bottom: 1px #C1D9F0 dashed;
background: none !important;}

.nav li:hover li a,
.nav li.active li a {
color: #09548B;
background: none !important;
line-height: normal;
width: 156px;
padding: 8px 3px 3px;
text-indent: 1px;}

.nav li:hover li a:hover,
.nav li.active li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;}

/*IE*/
.nav li li a:hover,
.nav li li a:hover {
color: #fff;
background: #165B9F !important;
text-decoration: none;
line-height: normal;}
/**/
.nav .btm-bg {
background: url(http://4.bp.blogspot.com/_jM8-wHc3NKY/TQsmS3dJfYI/AAAAAAAAAII/h8j3-QE6ElE/s1600/submenu_bottom.png) no-repeat;
width: 205px;
height: 9px;
overflow: hidden;
clear: both;}

.content {
width: 670px;
background: transparent url(http://3.bp.blogspot.com/_jM8-wHc3NKY/TQslwVgdWcI/AAAAAAAAAHA/hPtWaiguCKQ/s1600/content_bg.png) repeat-y;
float: left;
padding: 10px 20px;}

.content h1 {
color: #333;
font-weight: 400;
text-transform: uppercase;
font-size: 18px;
border-bottom: 1px dashed #C1D9F0;}

.content h2 {
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
padding-left: 10px;
margin-bottom: -5px;}

.content p {
padding: 0 15px;
text-align: justify; }

.content-bottom {
width: 710px;
background: transparent url(http://2.bp.blogspot.com/_jM8-wHc3NKY/TQslyLtUh4I/AAAAAAAAAHE/KjmSaXhHWuw/s1600/content_bottom.png) no-repeat;
height: 13px;
float: left;}

HTML CODE:
<div class="wrapper1">
<div class="wrapper">
<div class="nav-wrapper">
<div class="nav-left"></div>
<div class="nav">
<ul id="navigation">
<li class="active">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Home</span>
<span class="menu-right"></span>
</a>
</li>
<li class="">

<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Blog</span>
<span class="menu-right"></span>
</a>

<div class="sub">
<ul>
<li><a href="#">Archives</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Top-rated Posts</a></li>
<li><a href="#">Most-viewed Entries</a></li>
</ul>
<div class="btm-bg"></div>
</div>
</li>

<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Development</span>
<span class="menu-right"></span>
</a>

<div class="sub">
<ul>
<li><a href="#">Wordpress Themes</a></li>
<li><a href="#">Wordpress Plugins</a></li>
<li><a href="#">Mac OS X</a></li>
</ul>

<div class="btm-bg"></div>
</div>
</li>

<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Tutorials</span>
<span class="menu-right"></span>
</a>

<div class="sub">
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Css, Html</a></li>
<li><a href="#">Post Your Tutorial!</a></li>
</ul>
<div class="btm-bg"></div>
</div>
</li>
<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Gallery</span>
<span class="menu-right"></span>
</a>

<div class="sub">
<ul>
<li><a href="#">Personal Photos</a></li>
<li><a href="#">My Friends</a></li>
<li><a href="#">Tech</a></li>
</ul>

<div class="btm-bg"></div>
</div>
</li>

<li class="">
<a href="#">
<span class="menu-left"></span>
<span class="menu-mid">Portfolio</span>
<span class="menu-right"></span>
</a>
<div class="sub">
<ul>
<li><a href="#">My Works</a></li>
</ul>
<div class="btm-bg"></div>
</div>
</li>

<li class="last">
<a href="">
<span class="menu-left"></span>
<span class="menu-mid">Contact</span>
<span class="menu-right"></span>
</a>
</li>
</ul>
</div>
<div class="nav-right"></div>
</div>

<div class="content">
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>

<div class="content-bottom"></div></div>
</div>


0 comments :

Post a Comment