mega - select css

¿Hay una forma CSS de agregar una flecha si una ul tiene un niño ul?

Question

Mi estructura de navegación se ve así:

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

Quiero que todos los <li> que tienen hijos de subnavegación tengan una pequeña flecha hacia abajo aplicada para que los usuarios sepan que esta página tiene subpáginas.

¿Es posible detectar en css puro si un <li> tiene hijos de ul.children ? En mi ejemplo anterior, la "Página con subpáginas" debe tener aplicada la flecha hacia abajo y la "Página con otra subpágina" también.

Ahora mismo estoy usando jquery para resolver este problema:

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

¿Hay una forma fácil de CSS puro para hacerlo?

Gracias.

Answer 1

¡Para futuros lectores! Me preguntaba también y luego lo descubrí por mi cuenta

No podemos verificar si el elemento tiene hijos, pero podemos verificar si está vacío

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

Answer 2

Antigua pregunta pero así es como lo haría:

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

También puedes hacer que se vea mejor así:

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

Creo que la mejor manera sería agregar una clase (o el intervalo que estás usando) a esos li en el servidor.

Otra solución, pero probablemente no es fácil y no está limpia, es agregar la flecha a todas las ul y hacerlas visibles (usando css) en ul.children. A continuación, puede intentar colocar la flecha delante o detrás del li principal. Si esto funcionará dependerá del diseño.

Answer 4

Esto es perfectamente factible en CSS

Tu estructura es esta:

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

Tu CSS será así:

 //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: ''''; }

Avanzando un paso más, si desea tener un menú desplegable donde haya una flecha hacia abajo en los elementos de nivel superior y luego las flechas hacia la derecha para los submenús, su CSS se vería así

 // 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: ''''; }

Aquí hay un archivo de jsfiddle en acción - http://jsfiddle.net/w9xnv/2/

Answer 5

Esto es sólo un refinamiento de la respuesta de . Con la ayuda de 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 6

No hay CSS ''selector de padres''.

Pero aquí hay un código jquery más corto:

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

Tu pregunta es similar a esta:

Selector de CSS complejo para padre de hijo activo

Answer 7

Para el menú vertical: este js, Funciona en todo = 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 8

Para mantenerlo simple, aquí está la solución que me gusta usar:

1. Coloque etiquetas alrededor del nombre del elemento que actúa como un menú desplegable.

   <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. Agrega la flecha usando 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*/
   }

¡Espero que esto funcione para usted! ¡Creo que es el método más simple que he encontrado!

Answer 9

Podrías hacer esto:

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

aqui hay un ejemplo

Esto no tiene soporte en todos los navegadores , aquí hay una lista de soporte

EDITAR

Acabo de darme cuenta de que mi ejemplo anterior será defectuoso, la flecha estará en la posición incorrecta. Aún así, si se trata de una avenida en la que le gustaría seguir, existe la posibilidad de alinear la flecha correctamente.

Answer 10

Por ejemplo

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

y el 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;