Древовидное меню HTML5 и CSS3 с приятным эффектом наведения

Question

Я хотел бы реализовать древовидное меню, такое как ссылка ниже, с использованием HTML5 и CSS3 или меню jquery или как-то с использованием обычных html, css и javascript.

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

Вы можете заметить, что возникают следующие проблемы,

1. Хороший эффект при наведении (мне это очень нужно)
2. Вращение пункта меню значок стрелки

Также здесь вы видите плавное движение вверх и вниз, что для меня не проблема.

Любая идея или ссылка будут оценены. спасибо

Answer 1

Для начала нам понадобится 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 для эффекта

$("#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);    
});

Я добавил mouseover и mouseout для вашего стеклянного эффекта.просто создайте фон с белым или любым другим цветом или просто удалите .css может сделать это следующим образом.

$(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;
}​

См. Пример

попробуйте отредактировать CSS, чтобы он был адаптирован к моему сайту.Gudluck