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,

Nice hover effect (I badly need this)
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

ohh now loaded. i have same effect as this ill post my code to help you — Bert
– Bert, Commented Feb 28, 2012 at 6:10

Bert · Accepted Answer · 2012-02-28 07:33:31Z

5

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

edited Feb 28, 2012 at 7:33

answered Feb 28, 2012 at 6:19

Bert

1,0393 gold badges14 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Shahdat Over a year ago

you may missing firstpane wrapper div. anyway let me investigate, thanks

Shahdat Over a year ago

As per I test. you just show sliding up and down smoothly on click but I also badly need the hover glass effect like demo link that I mentioned

Bert Over a year ago

i see the glass effect when hover i think is also a css event using jquery with opacity. let me work with it and update you. i looked into the website and it was created in flash. lets se if we can replicate it in jquery

Bert Over a year ago

@shahdat i dont know if this effect will make the same effect as of the website you have given but it the least i can do. it has glass effect also just play aroung with the opacity or add a bg image on the button to achieve the effect. Have fun and Gudluck. hope it helped.

Shahdat Over a year ago

thanks for your attempt but we need a moveable effect on hover middle to both(left and right)

Collectives™ on Stack Overflow

HTML5 and CSS3 tree menu with nice hover effect

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related