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:
#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