Ver Mensaje Individual
  #1 (permalink)  
Antiguo 24/03/2011, 17:19
Avatar de murderer
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