WARNING

These post or any other post are based on my experienced life I've been through.

If you think those post or any other post annoyed you, I suggest you leave my blog.

DON'T READ!

DON'T COMMENT!

DON'T HARASSING MY BLOG WITH HATES COMMENTS!

JUST GET OUT WHEN YOU THINK THIS IS ANNOYING!

OR LOOK AT MY PICTURE IS ANNOYING!

I didn't ask for a pity or anything from readers. I'm just expressing myself.

Wednesday, December 25, 2013

Tutorial : Add CSS 3 Dropdown Menu - Without JavaScript


Hello, everyone.. Today, I'm going to show you how to make the Dropdown Menu 1.
Its easy as ABC~ than Dropdown Menu 2. 
It is very simple, organize, and easy to put on. 
You don't need to go to Layout then Edit HTML.
Come! I'll show you!! =)

First! As usual,


Go to your Blogger

Then to Design Tab (the red circle)

Then to Layout

Add GADGET

Then choose HTML/JavaScript


Alrighty~~ Then copy the code below!!! =D



COPY START HERE
--------------------------------------------------------------------

<style>
/*-- CSS3 Drop Down Menu By Blogger Tricks http://.bl0gger-tricks.blogspot.com-----*/

#bt-menu, #bt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#bt-menu {
width: 900px;
margin: 60px auto;
background: #E176B8;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#bt-menu:before,
#bt-menu:after {
content: "";
display: table;
}
#bt-menu:after {
clear: both;
}
#bt-menu {
zoom:1;
}
#bt-menu li {
float: left;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#bt-menu a {
float: left;
padding: 12px 30px;
color: #611745;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#bt-menu li:hover > a {
background: #611745;
color: #fafafa;
}
*html #bt-menu li a:hover { /* IE6 only */
color: #E176B8;
}
#bt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #E176B8 url('images/pageglare.png') no-repeat scroll;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#bt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#bt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#bt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #611745;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #611745;
box-shadow: 0 1px 0 #111, 0 2px 0 #611745;
}
#bt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#bt-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#bt-menu ul a:hover {
background-color: #611745;
}
#bt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#bt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #611745;
}
#bt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #611745;
}
#bt-menu ul li:first-child a:hover:after {
border-bottom-color: #E176B8;
}
#bt-menu ul ul li:first-child a:hover:after {
border-right-color: #E176B8;
border-bottom-color: transparent;
}
#bt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="bt-menu">
<li><a href="#">Test Tab</a></li>
<li>
<a href="#">Tab 1</a>
<ul>
<li><a href="#">Tab 1.1</a></li>
<li><a href="#">Tab 1.2</a></li>
<li><a href="#">Tab 1.3</a></li>
<li><a href="#">Tab 1.4</a>
<ul>
<li>
<a href='#'>Tab 1.4 ITEM 1</a>
</li>
<li>
<a href='#'>Tab 1.4 ITEM 2</a>
</li>
<li>
<a href='#'>Tab 1.4 ITEM 3</a>
</li>
<li>
<a href='#'>Tab 1.4 ITEM 4</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Tab 2</a>
<ul>
<li><a href="#">Tab 2.1</a></li>
<li><a href="#">Tab 2.2</a></li>
</ul>
</li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
<li><a href="#">Tab 5</a>
<ul>
<li><a href="#">Tab 5.1</a></li>
<li><a href="#">Tab 5.2</a></li>
</ul>
</li>
</ul>
--------------------------------------------------------------------
END HERE


If you feel insecure about putting it on your blog, try test the code HERE

Where I bold and highlight is, you can change the colors according to your own style! =)

Hope it's helpful^^ Thank you for your time in my blog.

Good Luck~~ 

3 comments:

  1. So great post, i am looking for this, thanks.

    ReplyDelete
  2. You're welcome. I'm glad I could help. It also help me in case I forgot how to do it again xD thx for ur time^^

    ReplyDelete