তিনটি ড্রপডাউন মেনু ব্লগস্পডের জন্য ~ Golden bd1

Animatated Dropdown Menu

Step 1: Go to Blogger Dashboard >> Template >> Edit HTML >> Proceed Step 2: Now within the template search for

and just above it paste the following Style sheet CSS Code.

#cssmenu ul { margin: 0; padding: 0;}
#cssmenu li { margin: 0; padding: 0;}
#cssmenu a { margin: 0; padding: 0;}
#cssmenu ul {list-style: none;}
#cssmenu a {text-decoration: none;}
#cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);}

#cssmenu > ul > li {
    float: left;
    margin-left: 15px;
    position: relative;
z-index:9999999;
}
#cssmenu > ul > li > a {
    color: rgb(160,160,160);
    font-family: Verdana, 'Lucida Grande';
    font-size: 15px;
    line-height: 70px;
    padding: 15px 20px;
-webkit-transition: color .15s;
   -moz-transition: color .15s;
     -o-transition: color .15s;
        transition: color .15s;
}
#cssmenu > ul > li > a:hover {color: rgb(250,250,250); }

#cssmenu > ul > li > ul {
    opacity: 0;
    visibility: hidden;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    position: absolute;
    top: 55px;
    left: 50%;
    margin-left: -90px;
    width: 180px;
-webkit-transition: all .3s .1s;
   -moz-transition: all .3s .1s;
     -o-transition: all .3s .1s;
        transition: all .3s .1s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}
#cssmenu > ul > li:hover > ul {
    opacity: 1;
    top: 65px;
    visibility: visible;
}
#cssmenu > ul > li > ul:before{
    content: '';
    display: block;
    border-color: transparent transparent rgb(250,250,250) transparent;
    border-style: solid;
    border-width: 10px;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
}
#cssmenu > ul ul > li { position: relative;}
#cssmenu ul ul a{
    color: rgb(50,50,50);
    font-family: Verdana, 'Lucida Grande';
    font-size: 13px;
    background-color: rgb(250,250,250);
    padding: 5px 8px 7px 16px;
    display: block;
-webkit-transition: background-color .1s;
   -moz-transition: background-color .1s;
     -o-transition: background-color .1s;
        transition: background-color .1s;
}
#cssmenu ul ul a:hover {background-color: rgb(240,240,240);}

#cssmenu ul ul ul {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: -16px;
    left: 206px;
    padding: 16px 0 20px 0;
    background-color: rgb(250,250,250);
    text-align: left;
    width: 160px;
-webkit-transition: all .3s;
   -moz-transition: all .3s;
     -o-transition: all .3s;
        transition: all .3s;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
   -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4);
        box-shadow: 0px 1px 3px rgba(0,0,0,.4);
}

#cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;}

#cssmenu ul ul a:hover{
    background-color: rgb(205,44,36);
    color: rgb(240,240,240);
}

Step 3: After Pasting Above Code Click On Save Button Step 4: Now according to you need paste the following code where you want to place this widget. For Example Layout >> Add a Gadget >> Edit HTML/JavaScript.

Orizinal

Motified Code

<div id='cssmenu'>
<ul>
<li class='active'><a href='/'>Home</a></li>
<li class='has-sub'><a href='#'>Products</a>
 <ul>
<li class='has-sub'><a href='#'>Product 1</a>
 <ul>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>Product 2</a>
 <ul>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'>Products</a>
 <ul>
<li class='has-sub'><a href='#'>Product 1</a>
 <ul>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>Product 2</a>
 <ul>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li class='has-sub'><a href='#'>Products</a>
 <ul>
<li class='has-sub'><a href='#'>Product 1</a>
 <ul>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
</ul>
</li>
<li class='has-sub'><a href='#'>Product 2</a>
 <ul>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
<li><a href='#'>Sub Item</a></li>
<li class='last'><a href='#'>Sub Item</a></li>
</ul>
</div>

Add The Bold Red Drop Down Menu To Blogger

Tamplate edit and before

Past it--

/*Start Css Menu*/
.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
.menu ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsCH5jVjwOu9RoM9lLjQQxmQacLKMfclMyv5r-d5HMaWL_lJYnk0Wv214NpUK3ISvorUToj9I1iJlxzObPJ6u-IGyu7gKx8C5LA39x__dLvX5WcWY6xHe1obD_svMYk1OCWP-_5E8Cht6a/s1600/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
.menu li{
float:left;
padding:0px 8px 0px 8px;
}
.menu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover{
color:#000000;
text-decoration:none;
}
.menu li ul{
background:#e0e0e0;
border-left:2px solid #a80329;
border-right:2px solid #a80329;
border-bottom:2px solid #a80329;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
display:block;
float:none;
padding:0px;
width:225px;
}
.menu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
.menu p{
clear:left;
}
.menu #current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL3cacXZSulYuab7R7T0NCGpcGCo-2aEwC4EIVFfJbc6S3MBEqIGFGt4HiC4w_BbF4Zr0M6YMKjfeHgpSIGFX889NPaIe_VoU2iOVNfB5SKuA08UT1ghGy3OFcx8grDkb09Ird00m2J4uc/s1600/current-bg.gif) top left repeat-x;
color:#ffffff;
}
/*End Css Menu from http://www.spiceupyourblog.com*/

Save Tamplatr

Add The Menu Html In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget

Save It

Unique Style Drop Down Bar Navigation Menu For Blogger

Step 1: Go to Blogger Dashboard >> Template >> Edit HTML >> Proceed Step 2: Now within the template search for

and just above it paste the following Style sheet CSS Code.

.nav {
height:35px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqV7Khf0Iu5oRT7OxS1A1s7pC7hDFa08_ccfKnH2s1ZXqlHldJL3ffWiEQk148CgKejx3pjtLOtzZs9Hb7Xd0eUeAli8dkkHtc2DkNGA2afpUJqGvf1LHTGOuxhz4PKsokbE1rDKN106hA/s1600/bg.gif) repeat-x;
position:relative;
font-family:arial, verdana, sans-serif;
font-size:11px;
width:100%;
z-index:100;
margin:0;
padding:0;
}

.nav .table {
display:table;
margin:0 auto;
}

.nav .select,
.nav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}

.nav li {
margin:0;
padding:0;
height:auto;
float:left;
}

.nav .select a {
display:block;
height:35px;
float:left;
font-weight:bold;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqV7Khf0Iu5oRT7OxS1A1s7pC7hDFa08_ccfKnH2s1ZXqlHldJL3ffWiEQk148CgKejx3pjtLOtzZs9Hb7Xd0eUeAli8dkkHtc2DkNGA2afpUJqGvf1LHTGOuxhz4PKsokbE1rDKN106hA/s1600/bg.gif);
padding:0 30px 0 30px;
text-decoration:none;
line-height:35px;
white-space:nowrap;
color:#2b3238;
}

.nav .select a:hover,
.nav .select li:hover a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRxZ974x1MTF2n4bp5geuzYo0s6L4ayb21C3sDfLPxBtI7RIGDQbrrzdzrDwnhFwrvCRTsYotT41bEUK9Bhrg280dhqJDPnojCaT5uvtaakdpxGrayomua7_wjv9dMJfe-f1v44xF94dva/s1600/hover.gif);
padding:0 0 0 15px;
cursor:pointer;
color:#2b3238;
}

.nav .select a b{
font-weight:bold;
}

.nav .select a:hover b,
.nav .select li:hover a b {
display:block;
float:left;
padding:0 30px 0 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRxZ974x1MTF2n4bp5geuzYo0s6L4ayb21C3sDfLPxBtI7RIGDQbrrzdzrDwnhFwrvCRTsYotT41bEUK9Bhrg280dhqJDPnojCaT5uvtaakdpxGrayomua7_wjv9dMJfe-f1v44xF94dva/s1600/hover.gif) right top;
cursor:pointer;
}

.nav .select_sub {
display:none;
}

/* IE6 only */
.nav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}

.nav .sub {
display:table;
margin:0 auto;
padding:0;
list-style:none;
}

.nav .sub_active .current_sub a,
.nav .sub_active a:hover {
background:transparent;
color:#2b3238;
}

.nav .select :hover .select_sub,
.nav .current .show {
display:block;
position:absolute;
width:100%;
top:35px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSUfi3sIk7m3jMTuhfMfPVjppkrFuK6dSGlaVIQvl4zYxr6qLvptyqqmy7cen40UgVRF9JvyA2lPL51aSQ7KvrafUyioL_Ue4ruFQPYSIwoOLV4p8nHW3N2_BpKiGwWiSo8Q-Ml24m1XUa/s1600/back.gif);
padding:0;
z-index:100;
left:0;
text-align:center;
}

.nav .current .show {
z-index:10;
}

.nav .select :hover .sub li a,
.nav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 10px 0 10px;
margin:0;
white-space:nowrap;
border:0;
color:#2b3238;
}

.nav .current .sub li.sub_show a {
color:#2b3238;
cursor:default;
}

.nav .select .sub li a {
font-weight:normal;
}

.nav .select :hover .sub li a:hover,
.nav .current .sub li a:hover {
visibility:visible;
color:#73a0d2;
}
 - See more at: http://www.spiceupyourblog.com/2011/07/css-drop-down-bar-menu
-blogger.html#sthash.sSec3Dzq.dpuf

Save Tamplate

In your blogs Design Page click Add A Gadget > Choose Html/Javascript > Copy and paste the following code into the Html/Javascript gadget :

<ul class="select">
<li><a href="#">Sample</a></li>
</ul>
<ul class="select">
<li><a href="#">Sample Menu</a>
 <div class="select_sub">
 <ul class="sub">
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
<li><a href="#">Sample Menu</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select">
<li><a href="#">Sample Menu</a>
 <div class="select_sub">
 <ul class="sub">
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
<li><a href="#">Sample Menu 2</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select">
<li><a href="#">Sample Menu</a>
 <div class="select_sub">
 <ul class="sub">
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
<li><a href="#">Sample Menu 3</a></li>
</ul>
</div>
</li>
</ul>
<ul class="select">
<li><a href="#">Sample Menu</a>
 <div class="select_sub">
 <ul class="sub">
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
<li><a href="#">Sample Menu 4</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>

Save it.

Golden bd1

About Author

তিনটি ড্রপডাউন মেনু ব্লগস্পডের জন্য

Related Post