New Animated Header and Collapsible Menu
Today I have made some major changes to my blog appearance by replacing the old 900x100px animated header with a new 1050x200px header and also applying a collapsible sidebar menu using jquery script.
This new animated header has been done the same way and with the same procedure as the previous one.
This header was designed to give a new image lift to my blog which I will try to fill it with articles related to general information, technology, environment, health and so on.
Another thing that you might notice is that my side bar menus are in collapsible form. When you click on the menu title, the body will expand. I have learned this technique using the jQuery script.
Let me show you how to do it.
First as usual, log in to your blog layout page and edit HTML. Click on the "Download Full Template" to save the existing template to our computer hard disk. In case of anything happened, we can revert it to the original/previous template.
Then we have to predefine our new css code of the menu list, header and body element between <head> to </head> segment. It could be something like this.
.menu_list {
margin: 0px;
padding: 0px;
width: 400px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FF8000;
margin:1px;
}
.menu_body {
padding: 5px 10px 15px;
background-color:#D8D8D8;
}
margin: 0px;
padding: 0px;
width: 400px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FF8000;
margin:1px;
}
.menu_body {
padding: 5px 10px 15px;
background-color:#D8D8D8;
}
Then paste the jquery script below which use the hide, click and slideToggle function to the <body> to </body> segment or inside our sidebar script block.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class menu_body
$(".menu_body").hide();
//toggle the component with class menu_body
$(".menu_head").click(function()
{
$(this).next(".menu_body").slideToggle(600);
});
});
</script>
<div class="menu_list">
<div class="menu_head">Header-1 </div>
<div style="display:none;" class="menu_body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="menu_head">Header-2</div>
<div style="display:none;" class="menu_body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="menu_head">Header-3</div>
<div style="display:none;" class="menu_body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class menu_body
$(".menu_body").hide();
//toggle the component with class menu_body
$(".menu_head").click(function()
{
$(this).next(".menu_body").slideToggle(600);
});
});
</script>
<div class="menu_list">
<div class="menu_head">Header-1 </div>
<div style="display:none;" class="menu_body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="menu_head">Header-2</div>
<div style="display:none;" class="menu_body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="menu_head">Header-3</div>
<div style="display:none;" class="menu_body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
If you would like to use images as the menu titles like I did, you may omit the background color from the predefined css codes and instead of the menu title text, replace it with your image source link address. Which look something like this.
<div class="menu_head"><img src="http://YourImageLinkAddressHere"/></div>
The output should look like this. Click the header to see the action. The smaller the slideToggle value, the faster the action.
Give it a try and good luck.
