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 构建三角形...