좋은 호버 효과가있는 HTML5 및 CSS3 트리 메뉴

Question

HTML5 및 CSS3 또는 jquery 메뉴를 사용하거나 일반 html, css 및 javascript를 사용하는 링크 벨로우즈와 같은 트리 메뉴를 구현하고 싶습니다.

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

당신은 거기에 따르는 문제가 포함 된 것을 알 수 있습니다,

1. 니스 호버 효과 (I 심하게이 필요) 메뉴 항목 화살표 아이콘의
2. 회전

여기도 당신이 위아래로 원활하게 볼 수있는 것은 저에게 문제가되지 않습니다.

어떤 아이디어 나 참고 사항을 부탁드립니다. 감사

Answer 1

우리는 나는 당신의 유리 효과의 마우스 오버와 마우스를 이동하면 추가 효과

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

의 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를 필요로 시작합니다. 그냥 흰색 색상 또는 모든 색상으로 배경을 만들거나 .css를 지우면이 방법을 사용할 수 있습니다.

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

.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를 편집 할 수 Example

시도를 참조 CSS. Gudluck