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;
}




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>

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.


Header-1
Header-2
Header-3


Give it a try and good luck.


7 comments

Brake Failure - The Brake Master Cylinder


Today my 25 years old (which almost become an antique) 240GL Volvo Station Wagon, experienced a brake failure (the braking power was severely reduced) while I was driving to Kuala Lumpur. Fortunately, I had realized the failure before entering the highway. So I have to turn back to nearby workshop for an inspection.

There are lots of brake components that can go bad (wheel cylinders, master cylinders, discs, boosters and even brake pads). After a thorough inspection by a mechanic, the brake master cylinder was found to be the problem and the source of the failure.

There was a leakage inside the master cylinder. The brake fluid inside both reservoirs was almost empty. Since it is an old car, there is no brake fluid sensor which could warned me earlier if there was a fluid reduction.


Most car braking systems are broken into two circuits, (Is that why there are two reservoirs?) with two wheels on each circuit to increase safety. In most vehicles it is one front wheel and one rear wheel although some vehicles split front and rear wheels. With a dual system like this, if a brake fluid leak occurs in one circuit, we only loose half of our brakes. We will be able to stop although it will take somewhat longer. We will have to press the pedal further to activate it. In my case I am not sure which circuit was leaked because it was concealed.


Let me show you how it works:




When we press the brake pedal, it pushes on the first piston through a linkage. Pressure builds in the cylinder and lines as the brake pedal is depressed further. The pressure between the first and second piston forces the second piston to compress the fluid in its circuit. There will be a same pressure in both circuits if the brakes are operating properly.

If there is a leakage in one of the circuits, that circuit will not be able to maintain pressure. Here you can see what happens when one of the circuits, for example the circuit rear seal develops a leak.



When the first circuit leaks, the pressure between the first and second cylinders is lost. This causes the first cylinder to contact the second cylinder. Now the master cylinder behaves as if it has only one piston. The second circuit will function normally, but you can see from the figure above that we will have to press the pedal further to activate the second piston. Since only two wheels have pressure, the braking power will be severely reduced.


3 comments
Subscribe to: Posts ( Atom )

Followers