Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] mejorar el menú desplegable con css

 Estas en el tema de mejorar el menú desplegable con css en el foro de CSS en Foros del Web. Saludos amigos, solicito ayuda para mejorar este menu creado con css... Código HTML: <!DOCTYPE HTML> <html lang= "en-US" > <head> <title> Menu desplegable usando solo ...
  #1 (permalink)  
Antiguo 22/10/2013, 17:51
Avatar de El Cipote  
Fecha de Ingreso: febrero-2006
Mensajes: 213
Antigüedad: 18 años, 9 meses
Puntos: 2
Pregunta mejorar el menú desplegable con css
Saludos amigos, solicito ayuda para mejorar este menu creado con css...
Código HTML:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<title>Menu desplegable usando solo CSS</title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>

<ul class="nav">
	<li>
		<a href="#"><span class="icon icon-mid"><span class="icon-home"></span></span>Home<span class="flecha">▼</span></a> </li>
		<li>
			<a href="#"><span class="icon icon-mid"><span class="icon-home"></span></span>Generalidades<span class="flecha">▼</span></a>
					<ul>
						<li>
							<a href="#">Cantón<span class="flecha">▼</span></a>
							<ul>
								<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
								<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
							</ul>
					  </li>
							<li><a href="#">Territorio<span class="flecha">▼</span></a>
								<ul>
									<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
									<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
								</ul>	
					  </li>
		  </ul>
  </li>
				<li>
					<a href="#"><span class="icon icon-mid"><span class="icon-image"></span></span>Sitios Turismo<span class="flecha">▼</span></a>
					<ul>
						<li>
							<a href="#">Tipo de Turismo<span class="flecha">▼</span></a>
							<ul>
								<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
								<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
							</ul>
					  </li>
						<li><a href="#">Puntos Turisticos<span class="flecha">▼</span></a>
							<ul>
								<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
								<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
							</ul>	
					  </li>
					</ul>
  </li>
	<li>
		<a href="#">Tejido Productivo<span class="flecha">▼</span></a>
		<ul>
				<li>
				<a href="#">Categorias<span class="flecha">▼</span></a>
				<ul>
					<li><a href="#">Agricola<span class="flecha">▼</span></a>
							<ul>
							<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
							<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
						</ul>
				  </li>
					<li>
						<a href="#">Agropecuarias<span class="flecha">▼</span></a>
						<ul>
							<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
							<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
						</ul>
				  </li>
					<li>
						<a href="#">Artesanal<span class="flecha">▼</span></a>
						<ul>
							<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
							<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
						</ul>
				  </li>
				</ul>	
		  </li>
			<li>
				<a href="#">Producciones<span class="flecha">▼</span></a>
				<ul>
					<li><a href="#">Agricola<span class="flecha">▼</span></a>
							<ul>
							<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
							<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
						</ul>
				  </li>
					<li>
						<a href="#">Agropecuarias<span class="flecha">▼</span></a>
						<ul>
							<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
							<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
						</ul>
				  </li>
					<li>
						<a href="#">Artesanal<span class="flecha">▼</span></a>
						<ul>
							<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
							<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
						</ul>
				  </li>
				</ul>	
		  </li>
		</ul>
  </li>
	<li><a href="#">Puntos de Riesgo<span class="flecha">▼</span></a>
			<ul>
				<li><a href="#">Detalle de Riesgo<span class="flecha_derecha">▼</span></a>
					<ul>
						<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
						<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
					</ul>
			  </li>
					<li><a href="#">Tipo de Riesgo<span class="flecha_derecha">▼</span></a>
						<ul>
							<li><a href="#">Agregar<span class="flecha">▼</span></a></li>
							<li><a href="#">Buscar<span class="flecha">▼</span></a></li>
						</ul>
			  </li>
			</ul>
  </li>
		<li><a href="#">Usuario<span class="flecha">▼</span></a>
			<ul>
				<li><a href="#">Cerrar Sesion<span class="flecha">▼</span></a></li>
			</ul>
  </li>

</ul>
</body>
</html>
este es el archivo style.css
Código: 
* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
font-size:12px;
}

.nav > li {
float:left;
}

.nav li a {
background: #FF6633;
color:#FFF;
display:block;
border:1px solid;
padding:10px 12px;
width:114px;
}

.nav li .flecha{
font-size: 9px;
padding-left: 6px;
display: none;
}

.nav li a:not(:last-child) .flecha {
display: inline;
}

.nav li a:hover {
background:#0fbfc6;
}

.nav li {
position: relative;
}

.nav li ul {
display:none;
position:absolute;
min-width:140px;
}

.nav li:hover > ul {
display:block;
 -webkit-box-shadow: 0 10px 6px -6px #777;
 -moz-box-shadow: 0 10px 6px -6px #777;
  box-shadow: 0 10px 6px -6px #777;
}

.nav li ul li ul {
right:-140px;
top:0;
width:100px;
}
Lo que deseo mejorar es que la flecha ▼ solo aparesca en el primer nivel del menu, y en las otras opciones que tienen sub-opciones aparesca la felcha indicando a la derecha.... algo similar al menu de este link: http://cssplantillas.es.tl/formas-css.htm
__________________
Para alcanzar el éxito se requiere de tres cosas: Voluntad, Valor y Decisión.
  #2 (permalink)  
Antiguo 22/10/2013, 23:44
Avatar de GusleonP  
Fecha de Ingreso: octubre-2013
Ubicación: Bogota
Mensajes: 24
Antigüedad: 11 años, 1 mes
Puntos: 2
Respuesta: mejorar el menú desplegable con css
Hola...para lograr eso es mejor utilizar imágenes...te dejo el código arreglado y enlace a las imágenes, si quieres descargarlas o creas unas y las reemplazas...recuerda cambiar la ruta de las imágenes por las tuyas propias.

Codigo HTML

Cita:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<title>Menu desplegable usando solo CSS</title>


</head>
<body>
<ul class="nav">
<li> <a href="#">Home</a> </li>
<li class="padre"> <a href="#">Generalidades</a>
<ul>
<li> <a href="#">Cantón</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li><a href="#">Territorio</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
</ul>
</li>
<li class="padre"> <a href="#">Sitios Turismo</a>
<ul>
<li> <a href="#">Tipo de Turismo</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li><a href="#">Puntos Turisticos</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
</ul>
</li>
<li class="padre"> <a href="#">Tejido Productivo</a>
<ul>
<li> <a href="#">Categorias</a>
<ul>
<li><a href="#">Agricola</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li> <a href="#">Agropecuarias</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li> <a href="#">Artesanal</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
</ul>
</li>
<li> <a href="#">Producciones</a>
<ul>
<li><a href="#">Agricola</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li> <a href="#">Agropecuarias</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li> <a href="#">Artesanal</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="padre"><a href="#">Puntos de Riesgo</a>
<ul>
<li><a href="#">Detalle de Riesgo</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
<li><a href="#">Tipo de Riesgo</a>
<ul class="no">
<li><a href="#">Agregar</a></li>
<li><a href="#">Buscar</a></li>
</ul>
</li>
</ul>
</li>
<li class="padre"><a href="#">Usuario</a>
<ul class="no">
<li><a href="#">Cerrar Sesion</a></li>
</ul>
</li>
</ul>
</body>
</html>

Codigo CSS

Cita:
* {
font-family:sans-serif;
list-style:none;
text-decoration:none;
margin:0;
padding:0;
font-size:12px;
}
.nav > li {
float:left;
}
.nav li a {
background: #FF6633;
color:#FFF;
display:block;
border:1px solid;
padding:10px 12px;
width:114px;
}

.nav li a:not(:last-child) .flecha {
display: inline;
}
.nav li a:hover {
background:#0fbfc6;
}
.nav li {
position: relative;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
.nav li ul li ul {
right:-140px;
top:0;
width:100px;
}

.nav .padre > a{background:url(https://www.ideasalvajes.com/flecha-abajo.png) center right no-repeat #FF6633;}
.nav .padre > a:hover{background:url(https://www.ideasalvajes.com/flecha-abajo.png) center right no-repeat #0fbfc6;}

.nav .padre ul li a{background:url(https://www.ideasalvajes.com/flecha-derecha.png) center right no-repeat #FF6633;}
.nav .padre ul li a:hover{background:url(https://www.ideasalvajes.com/flecha-derecha.png) center right no-repeat #0fbfc6;}
.nav .no a{background:#FF6633; background-image:none !important}

Esta es una solución rápida...lo único que debes hacer si agregas mas elementos es asignarle la clase no al ultimo ul del sub-menu, asi no mostrara la imagen de la flecha derecha.

Si quieres algo mas automatica ya tocaria jugar los last-child dentro del CSS.

Enlace imagen flecha abajo: https://www.ideasalvajes.com/flecha-abajo.png
Enlace imagen flecha abajo: https://www.ideasalvajes.com/flecha-derecha.png

Espero te sirva y recuerda guardar las imagenes en tu sitio pues estas las elimino en unos días de mi servidor.
  #3 (permalink)  
Antiguo 22/10/2013, 23:50
Avatar de ArturoGallegos
Moderador
  
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 6.774
Antigüedad: 16 años, 9 meses
Puntos: 1146
Respuesta: mejorar el menú desplegable con css
que horrible estructura tiene ese menu, la flecha yo la agregaria con css y solo tendras que usar

Código CSS: 
Ver original
  1. .nav>li{background:url(...) no-repeat right center;} /* primer nivel */
  2. .nav ul>li{background:url(...) no-repeat right center;} /* resto de los niveles */
  #4 (permalink)  
Antiguo 23/10/2013, 08:15
Avatar de El Cipote  
Fecha de Ingreso: febrero-2006
Mensajes: 213
Antigüedad: 18 años, 9 meses
Puntos: 2
Respuesta: mejorar el menú desplegable con css
Agradezco sus respuestas... con el deseo de mejorar el aspecto del menú van bien sus sugerencias.
Me surge una nueva interrogante, ¿Es posible cambiar el color a una opción seleccionada y asi evidenciar la selección (efecto de botón seleccionado)?
__________________
Para alcanzar el éxito se requiere de tres cosas: Voluntad, Valor y Decisión.
  #5 (permalink)  
Antiguo 23/10/2013, 08:19
Avatar de pzin
Moderata 😈
  
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.489
Antigüedad: 22 años, 4 meses
Puntos: 2114
Respuesta: mejorar el menú desplegable con css
Por otro lado, podrías usar pseudo-elementos para crear esos triángulos.

Al del tipo:

Código CSS: 
Ver original
  1. li.padre {
  2.   position: relative;
  3. }
  4.  
  5. li.padre:after {
  6.   position: absolute;
  7.   top: 10px;
  8.   right: 10px;
  9.   width: 0;
  10.   height: 0;
  11.   content: '';
  12.   border: 10px solid transparent;
  13.   border-left: 20px solid black;
  14.   border-right: none;
  15. }

Etiquetas: html, mejorar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 06:15.