对于Wordpress，请使用以下内容

Question

我的导航结构如下所示：

<div class="menu">
    <ul>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page with Subpages</a>
            <ul class="children">
                <li><a href="#">Page with another subpage</a>
                    <ul class="children">
                        <li><a href="#">subsubpage</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Page 3</a></li>
        <li><a href="#">Page 4</a></li>
    </ul>
</div>

我希望所有具有子导航子项的<li>都应用了一个向下箭头，以便用户知道此页面包含子页面。

是否可以在纯{css中检测<li>是否有ul.children个孩子？在上面的示例中，“带子页面的页面”应该应用向下箭头，并且“还有另一个子页面的页面”。

现在我正在使用jquery来解决这个问题：

$(function() {
    $('.menu a').each(function() {
        if ( $(this).parent('li').children('ul').size() > 0 ) {
            $(this).append('<span class="dwn">▼</span>');
        }           
    });
});

有一种简单的纯CSS方式吗？

谢谢。

Answer 1

这在CSS中是完全可行的 -

你的结构是这样的：

 <ul class="menu">
      <li>
           <a href="#">Has arrow</a>
           <ul><li><a href="#"></a></li></ul>
      </li>
      <li>
           <a href="#">Has no arrow</a>
      </li>
  </ul>

你的CSS会是这样的 -

   //this adds an arrow to every link
  .menu li > a:after { content: '>'; } 

  // this removes the arrow when the link is the only child
  .menu li > a:only-child:after { content: ''; }

更进一步，如果你想要一个下拉菜单，其中顶级项目有一个向下箭头，然后是子菜单的右箭头，你的CSS看起来像这样

   // set up the right arrows first
   .menu li > a:after { content: '>'; }

   //set up the downward arrow for top level items
   .menu > li > a:after {content: 'v'; }

   //clear the content if a is only child
   .menu li > a:only-child:after {content: ''; }

这是一个实际的jsfiddle - http://jsfiddle.net/w9xnv/2/

Answer 2

您可以执行此操作：

ul.children:before {
    content:  "▼";
}

这里是an example

此并非所有浏览器都支持，here is a list of support

修改

刚才意识到我上面的例子会有缺陷，箭头会处于错误的位置。仍然 - 如果这是一个大道你想要追求的可能性是正确对齐箭头。

Answer 3

我认为最好的方法是向服务器上的li添加一个类（或者您正在使用的那个）。

另一个解决方案，但可能不容易而且不干净，是将箭头添加到所有ul并且只在ul.children中使它们可见（使用css）。然后，您可以尝试将箭头放在父li的前面或后面。这是否有效取决于设计。

Answer 4

为了保持简单，以下是我喜欢使用的解决方案：

将标签放在项目名称周围，作为下拉菜单。

<div class="menu">
    <ul>
        <li><a href="#"><span>Page with Subpages</span></a>
            <ul class="children">
                <li><a href="#"><span>Page with another subpage</span></a>
                    <ul class="children">
                        <li><a href="#">subsubpage</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

使用CSS添加箭头：

#menu span:after /* DropDown Arrow */
{
   border: 0.313em solid transparent; /* 5 pixels wide */
   border-bottom: none;  /* helps the drop-down arrow stay in the vertical centre of the parent */
   border-top-color: #cfcfcf;   /* colour of the drop-down arrow */
   content: ''; /* content of the arrow, you want to keep this empty */
   vertical-align: middle;
   display: inline-block;
   position: relative;
   right: -0.313em; /* 5 pixels right of the menu text*/
}

希望这适合你！我相信这是我遇到过的最简单的方法！

Answer 5

对于未来的读者！我也在想，然后自己想出来

我们无法检查元素是否有子元素，但我们可以检查它是否为空

li:not(:emtpy):after {
    content: "V";
    color: black;
    position: relative;
    left: 120%;
    /* Well those styles are not best but you get the idea */
}

Answer 6

老问题，但我就是这样做的：

.menu li > a:not(:only-child):after { content: '▼'; }

你也可以让它看起来更漂亮：

.menu li > a:not(:only-child):after { 
    content: '\00a0\00a0▼'; /* add a little spacing so it's not right next to the text */
    font-size: 0.8rem; /* adjust font size so it looks better */
    vertical-align: middle; /* vertical align to middle */
}

Answer 7

没有CSS'父选择器'。

但这是一个更短的jquery代码：

$('.children').prev('li').append('<span class="dwn">▼</span>');

您的问题与此类似：

Complex CSS selector for parent of active child

Answer 8

垂直菜单：这个js，Works on all = nav.vertical li

$("nav.vertical li:has(ul)").find("a:first").append('<img src="" alt="" class="">');

<nav>
   <ul>
     <li><a href="">Page</a>
         <ul class="children">
           <li><a href="">Post</a></li>
         </ul>
     </li>
   </ul>
</nav>

Answer 9

例如

$(function() {
$('.menu a').each(function() {
    if ( $(this).parent('li').children('ul').size() > 0 ) {
        $(this).append('<span></span>');
    }           
  });
});

和CSS

.menu li a span {
display: -moz-inline-stack;
display: inline-block;  
zoom: 1;
*display: inline;
vertical-align: middle;
background: url(arrow.png) 0 0 no-repeat;
width: 5px;
height: 3px;
margin-left: 5px;

Answer 10

这只是rotaercz答案的改进。在CSS Tricks

的帮助下

#cssmenu li > a:not(:only-child)::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    float: right;
}

Answer 11

对于Wordpress，请使用以下内容

<?php
/**
* Add arrows to menu items
* @author Bill Erickson
* @link http://www.billerickson.net/code/add-arrows-to-menu-items/
* 
* @param string $item_output, HTML output for the menu item
* @param object $item, menu item object
* @param int $depth, depth in menu structure
* @param object $args, arguments passed to wp_nav_menu()
* @return string $item_output
*/
function be_arrows_in_menus( $item_output, $item, $depth, $args ) {
if( in_array( 'menu-item-has-children', $item->classes ) ) {
    $arrow = 0 == $depth ? '<i class="icon-angle-down"></i>' : '<i class="icon-angle-right"></i>';
    $item_output = str_replace( '</a>', $arrow . '</a>', $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'be_arrows_in_menus', 10, 4 );

感谢https://www.billerickson.net/code/add-arrows-to-menu-items/

如果ul有一个ul孩子，是否有CSS方法添加箭头？

11 个答案:

对于Wordpress，请使用以下内容