Is there a CSS way to add an arrow if a ul has a u

Question

My navigation structure looks like this:

<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>

I want all <li>'s that have a subnavigation children to have a little down-arrow applied so users know this page has subpages.

Is it possible to detect in pure css if a <li> has children of ul.children? In my example above, the "Page with Subpages" should have the down arrow applied and the "Page with another subpage" as well.

Right now I'm using jquery to solve this problem:

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

Is there an easy pure CSS way to do so?

Thank you.

Answer 1

You could do this:

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

here is an example

This doesn't have support in all browsers, here is a list of support

EDIT

Just realised that my example above will be flawed, the arrow will be in the wrong position. Still - if this is an avenue you would like to pursue the possibility is there to align the arrow correctly.

Answer 2

There is no CSS 'parent selector'.

But here is a shorter jquery code:

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

Your question is similar to this one:

Complex CSS selector for parent of active child

Answer 3

For Wordpress Please Use the Following

<?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 );

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

Answer 4

In the interests of keeping it simple, here is the solution I like to use:

1. Place tags around the name of the item acting as a drop-down menu.

   <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>
   

2. Add the arrow using 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*/
   }
   

Hope this works for you! I believe it to be the simplest method I've come across!

Answer 5

For example

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

and the 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 6

I think the best way would be to add a class (or that span you're using) to those lis on the server.

Another solution, but probably not easy and not clean, is to add the arrow to all uls and only make them visible (using css) in ul.children. You can then try to position the arrow in front of or behind the parent li. Whether this will work will depend on the design.