Menu Arrow for Child Element

时间：2013-01-21 作者：Josh Rodgers

我有一个我正在设计的网站的菜单，有父元素和子元素。。。我想知道如果父元素有子元素，是否有办法在导航中添加箭头？

我的导航代码如下所示：

<div id="nav">
    <ul>
        <?php
            wp_list_pages("title_li=");
        ?>
    </ul>
</div>
我的CSS代码如下所示：

http://pastebin.com/xBbHsyVM

我更喜欢使用文本箭头，但图像箭头也很容易使用。。。基于javascript或jquery的css解决方案也是一个优势，但如果不是，那也没什么大不了的。

谢谢，乔希

2 个回复
最合适的回答,由SO网友:Rafael Marques 整理而成

要为父元素添加箭头，请执行以下操作：

jQuery + CSS Solution:

JQUERY：

jQuery(function($){
  $(document).ready(function(){
    $(\'ul.sub-menu\').parent().addClass(\'drop-down\'); // Add Sub-Menu Class to insert personalized style
    $(\'li.drop-down > a:first-child\').wrapInner(\'<span class="menu-bullet" />\'); // Add .menu-bullet in span to insert your arrow image background 
  });
});
CSS：

div#nav ul li.drop-down a .menu-bullet {display:block; background:url(your_image_path.jpg) no-repeat; padding-left:15px; /* padding left value is based on arrow image width */}
要为子元素添加箭头，请执行以下操作：

jQuery + CSS solution:

JQUERY：

jQuery(function($){
  $(document).ready(function(){ 
    $(\'div#nav ul li ul li a\').wrapInner(\'<span class="arrow" />\');
  });
});
CSS：

span.arrow {display:block; background:url(your_image_path.jpg) no-repeat; padding-left:15px; /* padding left value is based on arrow image width */}

or only CSS Solution:

div#nav ul li ul li a:before {content:"→ "}

SO网友:Josh Rodgers

好啊

这就是我的结局：

<script type="text/javascript">
    jQuery(function($){
        $(document).ready(function(){
            $(\'ul.children\').parent().addClass(\'drop-down\'); // Add Sub-Menu Class to insert personalized style
            $(\'li.drop-down > a:first-child\').wrapInner(\'<span class="menu-bullet" />\'); // Add .menu-bullet in span to insert your arrow image background
        });
    });
</script>
和css：

#nav ul.children li a span.menu-bullet:after {
    content: " »";
    font-size: 18px;
    position: absolute;
    right: 15px;
    top: 12px;
}
这很接近拉斐尔的答案。。。我只是稍微调整了一下。我知道这排除了对IE6的支持，但我认为箭头是额外的吸引力，不一定是一项要求——所以我没问题。

拉斐尔的答案基本上就是我所用的，所以我将把答案奖励给他。谢谢你给我指出了正确的方向！

谢谢，乔希

结束
标签： menus   css   navigation   children   小码农  

相关推荐

必须在css样式表中更改css第二十一/侧边栏。左侧的侧边栏

我必须改变我的wordpress外观。侧边栏应放在左侧。我已经在寻找解决方案，但我发现的代码不适合我的。我不知道在哪里我必须改变它。我知道我可以在选项中更改它，但我需要在CSS样式表中更改它。谢谢你的帮助！二十一/二十一。44：样式表（style.css）body { padding: 0 2em; } #page { margin: 2em auto; max-width: 1000px; } #branding hgrou