Foros del Web » Creando para Internet » CSS »

Problema con menu css

Estas en el tema de Problema con menu css en el foro de CSS en Foros del Web. Hola chicos, Estaba intentando implementar un menú CSS3 que encontré, al hacerlo me di cuenta de que se veia muy lindo pero no funcionaban los ...
  #1 (permalink)  
Antiguo 24/03/2011, 17:19
Avatar de murderer  
Fecha de Ingreso: marzo-2009
Ubicación: Argentina/Misiones/Iguazu/Localhost
Mensajes: 196
Antigüedad: 15 años, 8 meses
Puntos: 2
Problema con menu css

Hola chicos,

Estaba intentando implementar un menú CSS3 que encontré, al hacerlo me di cuenta de que se veia muy lindo pero no funcionaban los links, sólamente si los abria en nueva pestaña. Aquí pueden ver el ejemplo http://pruebas.sinepzia.com/estructura/menu/

Dato: cuando le saco el class activate funcionan los links, pero no la animación que sigue al mouse :S

Código HTML:
Código HTML:
<link type="text/css" rel="stylesheet" media="all" href="/estructura/menu/styles/styles.css" />
<script src="/estructura/menu/js/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="/estructura/menu/js/lavalamp.js" type="text/javascript"></script>
    <div id="wrapper">
    <div class="lavalamp magenta">
    <ul >
        <li class="active"><a href="">Home</a></li>
        <li><a href="http://maestrosdelweb.com">Maestros del Web</a></li>
        <li><a href="http://google.com">Google</a></li>
    </ul>
        <div class="floatr"></div>
    </div>
    
    </div> 
Código CSS
Código:
#wrapper h1 img {
	float: left;
	margin-right: 5px;
}

#wrapper h1 {
	line-height: 56px;
}

#wrapper h1, h2 {
	font-weight: normal;
}

#wrapper {
    width: 900px;
    margin: 0 auto;
    position: relative;
}


/*LAVALAMP START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    height: 18px;
}

.magenta {
	background : rgb(190,64,120);
	background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
	background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
	border: 1px solid #841144;
	
}

.cyan {
	background : rgb(64,181,197);
	background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
	background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
	border: 1px solid #2f8893;
	
}

.blue {
	background : rgb(41,92,177);
	background : -webkit-gradient(linear, left top, left bottom, from(rgb(41,92,177)), to(rgb(7,165,187)));
	background : -moz-gradient(linear, left top, left bottom, from(rgb(41,92,177)), to(rgb(7,155,216)));
	border: 1px solid #000033;
	
}

.yellow {
	background : rgb(255,199,79);
	background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
	background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
	border: 1px solid #c08c1f;
	
}

.orange {
	background : rgb(255,133,64);
	background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
	background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
	border: 1px solid #c04f11;
	
}

.dark {
	background : rgb(89,89,89);
	background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
	background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
	border: 1px solid #272727;
	
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a, .blue li a{
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,1);
	
}


#wrapper  li a {
    text-decoration: none;
    color:#FFFFFF;
    line-height: 20px;
	text-shadow: 0 1px 0 rgba(0,0,0,1);
}

#wrapper ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

#wrapper ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

#wrapper ul li a {
    padding: 0 20px;
	margin:5px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

Desde ya muchas gracias
__________________
"Cuando te propones una meta todo el mundo conspira para que puedas lograrlo." Puedes encontrame en Twitter
  #2 (permalink)  
Antiguo 24/03/2011, 19:17
Avatar de carlospc  
Fecha de Ingreso: noviembre-2008
Ubicación: Huancayo/Perú
Mensajes: 240
Antigüedad: 16 años
Puntos: 12
Respuesta: Problema con menu css

Revisaste si estas usando la ultima versión de JQuery?
__________________
Mi web --> www.CarlosPC.net
  #3 (permalink)  
Antiguo 24/03/2011, 20:16
Avatar de murderer  
Fecha de Ingreso: marzo-2009
Ubicación: Argentina/Misiones/Iguazu/Localhost
Mensajes: 196
Antigüedad: 15 años, 8 meses
Puntos: 2
Respuesta: Problema con menu css

Cita:
Iniciado por carlospc Ver Mensaje
Revisaste si estas usando la ultima versión de JQuery?
Hola carlospc,

Actualizé la versión de 1.4.2 a 1.4.4, pero sigue sin funcionar :(
__________________
"Cuando te propones una meta todo el mundo conspira para que puedas lograrlo." Puedes encontrame en Twitter

Etiquetas: Ninguno
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




La zona horaria es GMT -6. Ahora son las 03:58.