Tengo un sitio donde ciertos títulos de los menús son desplegables (CSS)Añadir una imagen simple flecha hacia abajo para menús desplegables
Quiero añadir una pequeña flecha hacia abajo que da a las ciertas cabeceras de menú que son capaces de caer abajo. ¿Alguien puede darme alguna idea de cómo hacerlo?
Gracias
sólo tiene que utilizar este personaje: http://www.fileformat.info/info/unicode/char/25bc/index.htm
▼ - ▼
o puede ser que usted puede utilizar una imagen de la flecha que apunta hacia abajo.
Creo que es un comentario, no una respuesta. –
No recomendaría una imagen para esto a menos que desee una flecha única que no pueda lograr a través de CSS (o con una biblioteca de iconos de fuentes increíbles/bootstrap) ya que agrega recursos adicionales que no son necesarios. Siempre es bueno evitar esto cuando sea posible. – Sprose
Pruebe el siguiente código para agregar la flecha, personalice la altura y el ancho y la posición de la flecha según su necesidad.
li.has_child:after {
content: '';
position: absolute;
border: 7px solid transparent;
/* This will set the direction of the arrow.*/
border-top: 7px solid white;
top: 34px;
margin-left: 5px;
}
Si está utilizando de arranque, puede hacer lo siguiente:
<span class="caret"></span>
Esto insertará una pequeña flecha hacia abajo donde se coloca el lapso.
a:after{
content: '';
border: 4px solid transparent;
border-top: 4px solid white;
margin-left: 2px;
margin-bottom: 3px;
display: inline-block;
vertical-align: bottom;
}
Creo que esta es la mejor manera de hacerlo, como se puede ajustar el límite para la longitud y ajustar el 'border-top' de la altura, que le da una personalización completa.
Si hemos de crear el menú y, desea que la flecha no llena negro en la flecha probar este código: (a: Arrow no llenar cualquier color)
∇ - ∇Interesante el [símbolo de nabla] (https://en.wikipedia.org/wiki/Nabla_symbol) tiene una entidad con nombre. – dakab
Brillante !! Exactamente lo que estaba buscando. Muchas gracias. –