javascript - HTML5 and CSS3 tree menu with nice hover effect - Stack Overflow

admin管理员组

文章数量:1416631

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 .

/

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

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

• javascript
• jquery
• html
• css
• menu

Share Improve this question Follow edited Feb 28, 2012 at 7:27 Shahdat asked Feb 28, 2012 at 6:04 ShahdatShahdat 5,51344 gold badges4141 silver badges3838 bronze badges 2

• any other link. the website is to heavy. so hard to load – Bert Commented Feb 28, 2012 at 6:10
• ohh now loaded. i have same effect as this ill post my code to help you – Bert Commented Feb 28, 2012 at 6:10

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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

本文标签： javascriptHTML5 and CSS3 tree menu with nice hover effectStack Overflow