Need suggection on html CSS javascript hover & slide

I need a little suggestion, this is my Fiddle, and my HTML:

<div style="width: 100%; border: 1px solid #000000;">
        <div style="float: left; width: 20%;">Logo + <a href="#">Sub nav icon</a></div>
        <div style="float: left; width: 60%;">Canter HEader portion</div>
        <div style="float: left; width: 20%;">Right postion</div>
        <br clear=all>
  </div>
<div style="width: 100%;  border: 1px solid #000000; margin-top: 10px;">
    <div style="float: left; width: 20%">Sub menu Hidden</div>
    <div style="float: left; width: 80%">
        <div style="float: left; width: 60%">Image area</div>
        <div style="float: left; width: 40%">Text Area</div>
        <br clear=all>
    </div>
    <br clear=all>
</div>

(Note that this was copied and pasted in an edit not by the OP, the code has not been edited for correctness.)

What I need is that when I click on 'Sub Nav Icon Link' the Sub Menu Hidden from the second div should open in slide down method, and should shift the 80% width container to right & adjust the available width accordingly. Then, when I click on 'close' link the sub menu should close by sliding up and the 80% width would take the 100% width.

Any help would be appreciated.

Answers


As per your code you need to write some jquery using animate to show/ hide your submenu Demo

$('.open').click(function(){
    $(this).hide();
    $('.close').show();
    $('.content').animate({ marginLeft: '20%' });
    $('.sMenu').animate({ marginLeft: '0' });
});
$('.close').click(function(){
    $(this).hide();
    $('.open').show();
    $('.content').animate({ marginLeft: '0' });
    $('.sMenu').animate({ marginLeft: '-20%' });
});

Need Your Help

MOSS 2007 SSL error when configuring Search Settings

sharepoint moss 64bit

We’re getting the following error message when we click on “Search Settings” for a Shared Services Provider: “Authentication failed because the remote party has closed the transport stream.”

Proper way to find the SHA-1 hash of two big integers and return it as a string

java math hash

I would like to hash two BigIntegers in Java with the MessageDigest class.