jQuery - 我如何用我的菜單代碼（也使用cufon）創建一個子菜單指示箭頭圖像？

Question

我想僅在包含子菜單的菜單鏈接旁邊添加一個箭頭。我希望圖像通常顯示爲向下箭頭，然後在盤旋時變成向上箭頭圖像。

我設法得到一個「+」符號，只在菜單上顯示子菜單，但我不知道如何處理懸停更改部分或如何添加圖像而不是文本符號。

HTML：

<div id="menu"> 
    <ul class="topnav"> 
     <li><a href="index.html"><img src="images/home.gif" width="75" height="50" alt="Home Page" /></a></li> 
     <li><h6><a href="services.html">Top Menu</a></h6>to help you 
     <ul class="subnav"> 
      <li><a href="link.html">Link</a></li> 
      <li><a href="link2.html">Link2</a></li> 
     </ul> 
     </li> 
    </ul> 

的jQuery：

//menu sub navigation 
$(document).ready(function(){ 


$("#menu ul li h6").hover(function() { //When trigger is hovered... 

    //Following events are applied to the subnav itself (moving subnav up and down) 

    $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click 

    $(this).parent().hover(function() { 
    }, function(){ 
     $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up 
    }); 


    //Following events are applied to the trigger (Hover events for the trigger) 
    }).hover(function() { 
     $(this).addClass("subhover"); //On hover over, add class "subhover" 
    }, function(){ //On Hover Out 
     $(this).removeClass("subhover"); //On hover out, remove class "subhover" 
}); 

}); 

CSS：

#menu ul { height:50px; color:#FFF; } 
#menu ul li { float:left; padding: 0 36px 0 0; position: relative; } 

#menu li ul.subnav { position: absolute; left: 0; top: 44px; background-  color:#505050;  
margin: 0; padding:0; display: none; float: left; width: 120px; z-index:100; -moz-border-radius-bottomleft:8px; -moz-border-radius-bottomright:8px; -webkit-border- bottom-left-radius:8px; -webkit-border-bottom-right-radius:8px; border-top:none; border-bottom:1px solid #444444; border-left:1px solid #444444; border-right:1px solid #444444; height:auto; } 
#menu li ul.subnav li { margin: 0; padding: 0; clear: both; width: 120px; z-index:5; border-top:1px solid #444444; } 
#menu li ul.subnav li a { margin: 0; padding: 0 10px; float: left; width: 120px; z-index:135; line-height:30px; text-align:left; } 
#menu li.current li a { color:#3f3f3f; } 

.width_280 { width:280px; } 
.margin_0_20_0_0 { margin:0 20px 0 0; } 

感謝您的幫助。

Answer 1

我認爲這個最傳統的答案是在你想要的不同方向創建三角形。然後，你可以通過它們的背景圖像，如將其納入菜單中的項目：

.menu_item { 
    padding-left: 20px; /* make room for image */ 
    background: left middle url(triangle.png) no-repeat; 
} 

然後，當你正在做的，當菜單「打開」，並使用CSS來改變圖像應用類。也許：

.subhover .menu_item { 
    background: left middle url(other_triangle.png) no-repeat; 
} 

這就是基礎知識......你也可以做狀態之間的動畫，雪碧圖像，建立與CSS三角形...