HTML5 and CSS3 tree menu with nice hover effect

Question

I would like to implement a tree menu like the link bellow using HTML5 and CSS3 or jquery menu or somehow using ordinary html, css and javascript .

http://www.crystal.ch/abb/power_systems_landscape/

You may notice that there is following issues involved,

1. Nice hover effect (I badly need this)
2. Rotation of menu item arrow icon

Also here you see sliding up and down smoothly that is not problem to me.

Any idea or reference would be appreciated. thanks

Answer 1

To start we need the HTML

<p class="menu_head">first</p>

    <div class="menu_body">
         <a href="">1</a>
            <a href="">2</a>
            <a href="">3</a>
           <a href="">4</a>
    </div>

  <p class="menu_head1">Second</p>

    <div class="menu_body">
         <a href="">1</a>

    </div>

Jquery for the effect

$("#firstpane p.menu_head").click(function()
{
    $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

});
$("#firstpane p.menu_head1").click(function()
{
    $(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

});
    $("#firstpane p.menu_head").mouseover(function()
    {
    $(this).css("text-indent","35px");
    $(this).css("backgroundImage","url(images/trans.png)").fadeTo("slow",0.33);

});

$("#firstpane p.menu_head").mouseout(function()
{
    $(this).css("text-indent","10px");
    $(this).css("backgroundImage","url(images/headbot1.png)").fadeTo("slow", 1);    
});

I added the mouseover and mouseout for your glass effect. just create a background with white color or any color or just erase the .css can make it this way.

$(this).fadeTo("slow",0.33);

CSS

.menu_head {
    font-family: arial;font-weight: bold;
    font-size:10px;
    color: black;
    left:3%;
    height:7px;
    text-indent:10px;
    padding: 10px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    vertical-align: middle;
}
.menu_head1 {
    font-family: arial;font-weight: bold;
    font-size:10px;
    color: black;
    left:3%;
    height:7px;
    text-indent:10px;
    padding: 10px 10px;
    cursor: pointer;
    position: relative;
    margin:1px;
    font-weight:bold;
    vertical-align: middle;
}
.menu_body {
    display:none;
}
.menu_body a{
    font-family: arial;font-weight: bold;
    left:3%;
    width: 220px;
    height:7px;
    text-indent:10px;
    position:relative;
    padding: 10px 15px;
    display:block;
    color:#006699;
    padding-left:10px;
    font-weight:bold;
    font-size:10px;
    text-decoration:none;
    vertical-align: middle;
}​

See Example

try to edit the css for it was made to adapt to my site. Gudluck