Drop down menu

Drop down menu

Tutorial again. Hari ni banyak juga tutorial yang saya buat dah orh requests right ? So kena lah tuniakan peminataan mereka. Okay tutorial ni if requests by a girl call Marilyn she ask me how to do this drop down menu. DOn't know what is drop down menu see picture below.



Saw it right the photo below that the owner , and leave your foot prints here and tutorial ? This drop down it will save more space for your blog.Yeah that what I mean so just follow it yeah

1. dashboard > design > add gadget > HTML/JavaScript

2. Than copy the code below and paste it at HTML/JavaScript.

<style type="text/css">
h5 {
font-family: trebuchet-ms, arial, tahoma;
font-size: 13px;
padding: 0 0 1em;
font-weight:bold;
color: #000000;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color: #000000;
margin:1px;
-moz-border-radius: 35px;
border-radius: 35px;
}
.msg_body {
padding: 5px 10px 15px;
background-color: #000000;
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/jquery01/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head"><center>Title 1</h5></center>
<div class="msg_body">
<center>
Code for title 1
</div>
<h5 class="msg_head"><center>Title 2</h5></center>
<div class="msg_body">
Code for title 2
</div>
<h5 class="msg_head"><center>Title 3</h5></center>
<div class="msg_body">
Code for title 3
</div>
</div>

Red : The color words.
Blue : Background tab.
Oren : Background isi tab ( if tak silap rasanya mcm to kud haha :P )
Purple : For the title
Green : Whatever you guys want to write or some code

I don't know it menjadi or not if tak mejadiInfo me at my shoutmix or comment thank you.


Tweet