Regresar a la pgina www.ComoCrearTuWeb.com
Resultados 1 al 3 de 3

Tema: Cmo dar transition a este men?

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de Lombardo
    Fecha de Ingreso
    24 jul, 11
    Ubicacin
    Austria
    Mensajes
    406
    Poder de Reputacin
    15

    Cmo dar transition a este men?

    Tengo este html:

    Cdigo HTML:
    <div id="menu">
    <ul>
    	<li class="nivel1"><a href="#" class="nivel1">Inicio</a></li>
    	<li class="nivel1"><a href="#" class="nivel1">Nosotros</a></li>	
    	<li class="nivel1"><a href="#" class="nivel1">Marcas</a>
    		<ul class="nivel2">
    			<li><a href="#">Opcin 2.1</a></li>
    			<li><a href="#">Opcin 2.2</a></li>
    			<li class="nivel2"><a class="nivel2" href="#">Opcin 2.3 </a>
    				<ul class="nivel3">
    					<li><a class="primera" href="#">Opcin 2.3.1</a></li>
    					<li><a href="#">Opcin 2.3.2</a></li>
    					<li><a href="#">Opcin 2.3.3</a></li>
    				</ul>
    			<li><a href="#">Opcin 2.4</a></li>
    			<li><a href="#">Opcin 2.5</a></li>
    			</li>
    		</ul>
    	</li>
    	</li>
    	<li class="nivel1"><a href="#" class="nivel1">Ropa</a>
    	<ul class="nivel2">
    		<li><a href="#">Chaquetas</a></li>
    		<li><a href="#">Abrigos</a></li>
    		<li><a href="#">Camisetas</a></li>
    	</ul>
    	</li>
    	<li class="nivel1"><a href="#" class="nivel1">Regalos</a>
    	<ul class="nivel2">
    		<li><a href="#">Opcin 4.1</a></li>
    		<li><a href="#">Opcin 4.2</a></li>
    		<li><a href="#">Opcin 4.3</a></li>
    		<li><a href="#">Opcin 4.4</a></li>
    	</ul>
    	</li>
    	<li class="nivel1"><a href="#" class="nivel1">Contacto</a></li>
    </ul>
    ...que tiene este CSS:

    Cdigo:
    #menu {
    	text-align: center;
    	font-size: 20px;
    	width: 100%;
    	margin: 20px auto;
    }
    
    #menu ul {
    	list-style-type: none;
    }
    
    #menu ul li {
    	width: 162px;
    	margin: 0 1%;
    }
    
    #menu ul li.nivel1 {
    	float: left;
    	margin-right: 1px;
    }
    
    #menu ul li a {
    	display: block;
    	text-decoration: none;
    	color: rgba(47,21,146,.8);
    	background-color: rgba(220,220,220,.7);
    	border: solid 1px #fff;
    	padding: 8px;
    	position: relative;
    }
    #menu ul li a.nivel2, #menu ul li a.nivel2ie {
    	color: #000;
    }
    
    #menu ul li a.nivel1, #menu ul li a.nivel2 {
    	display: block!important;
    	display: none;
    	position: relative;
    }
    
    #menu ul li:hover {
    	position: relative;
    }
    
    #menu ul li a:hover, #menu ul li:hover a.nivel1 {
    	background-color: #5843D0;
    	color: white;
    	position: relative;
    }
    
    #menu .nivel1:hover  a.nivel1{
    	letter-spacing: .3em;
    }
    
    #menu ul li ul {
    	display: none;
    }
    
    #menu ul li:hover  ul.nivel2, #menu ul li a:hover  ul.nivel2{
    	display: block;
    	position: absolute;
    	left: 0px;
    }
    
    #menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {
    	display: block;
    	position: absolute;
    	left: 159px!important;
    	left: 158px;
    	top:0px!important;
    	top: -21px;
    }
    
    #menu ul li ul li a {
    	width: 159px;
    	padding: 8px 0px;
    	border-top-color: transparent;
    }
    
    #menu ul li ul li a:hover {
    	border-top-color: yellow;
    	position: relative;
    }
    
    #menu ul li ul li ul li a.primera {
    	border-top-color: #fff;
    }
    
    table.falsa {
    	border-collapse:collapse;
    	border:0px;
    	float: left;
    	position: relative;
    }
    Cmo puedo darle el efecto de transition? Gracias, un saludo.

  2. #2
    Recien Llegado! Habitante
    Fecha de Ingreso
    16 feb, 12
    Mensajes
    24
    Poder de Reputacin
    12
    echale un vistazo a este tutorial (http://www.youtube.com/watch?v=dlDQ43y3vUE#t=494) los tutoriales de este chaval me han ayudado bastante a entender las transiciones
    ltima edicin por suso30; 04/04/2014 a las 20:02

  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de Lombardo
    Fecha de Ingreso
    24 jul, 11
    Ubicacin
    Austria
    Mensajes
    406
    Poder de Reputacin
    15
    Gracias, ya me han indicado que un desplegable no puede tener transition. Saludos.

Temas Similares

  1. como centrar este men
    Por piojo en el foro Foro General
    Respuestas: 2
    ltimo Mensaje: 20/08/2012, 18:05
  2. como aado este menu?
    Por brans en el foro Foro General
    Respuestas: 1
    ltimo Mensaje: 13/01/2010, 15:07

Permisos de Publicacin

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •