He editado un menú desplegable hacia arriba, lo he modificado con imágenes y demás, solo me falta que encajen los submenús, pero eso es lo de menos...
Lo que quiero es que el menú no esté estático, es decir, que aparezca en la cabecera de mi página y haga efecto Scroll o Slider y gire y vuelva por el otro lado de la página y claro, que siga manteniendo el efecto desplegable de las subcategorías, si no, no me valdría de nada...
Si esto no fuera posible, quisiera poner dos botones a cada lado para que al darle a la derecha, el menú se arrastre a la derecha y muestre más opciones con sus correspondientes submenús, y lo mismo con la izquierda.
Dejo aquí el code:
CSS
Código:
HTML
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#menu { text-align: center;
font-size: 14px;
font-style:bold;
width: 100%;
}
#menu ul { list-style-type:none;}
#menu ul li.nivel1 { float: left;
width: 173px;
margin-right: 0px;
border:#636;
}
/*Fondo para el menu de abajo*/
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-image:url(http://www.tjlfifa.com/picture_library/cuadrovacio.png);
background-color: #;
top:-95px;
height:22px;
border: solid 1px #999;
padding: 14px;
position: relative;
}
/*fondo para el menú de arriba*/
#menu ul li:hover {
background-image: url(http://www.tjlfifa.com/picture_library/bg_pattern.png)repeat-x;
position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1
{background-image:url(http://www.tjlfifa.com/picture_library/cuadrovacio.png);
background-color:#;
color: #000;
position: relative;
}
#menu ul li a.nivel1 {display: block!important;display: none;
}
#menu ul li ul {display: none;
}
/*centrar los bloques superiores*/
#menu ul li a:hover ul, #menu ul li:hover ul {display: block;
position: absolute;right: 0px;
}
/*tamaño categorias superiores*/
#menu ul li ul li a {width: 171px;
background-image:url(http://www.tjlfifa.com/picture_library/cuadrnegrosuperior.png);
padding: 3px 0px 8px 0px;
border-bottom-color: #000;
border: solid 1px #151314;
background-color:#000;
}
#menu ul li ul li a:hover {border-bottom-color: #000;
position: relative;
background-image:url(http://www.tjlfifa.com/picture_library/cuadromenusuperiorblanco.png);
}
table.falsa {border-collapse:collapse;
border:0px;
float:right;
position: relative;
}
ul#uno {top: -211px!important; top: -148px;}
ul#dos {top: -172px!important; top: -148px;}
ul#tres {top: -225px!important; top: -148px;}
ul#cuatro {top: -163px!important; top: -147px;}
ul#cinco {top: -183px!important; top: -118px;}
ul#seis {top: -60px!important; top: -118px;}
.centrar
{
/*nos posicionamos en el centro del navegador*/
position: absolute;
left:10%;
/*determinamos una anchura*/
width:1250px;
/*indicamos que el margen izquierdo, es la mitad de la anchura*/
margin-left:-100px;
/*determinamos una altura*/
/*indicamos que el margen superior, es la mitad de la altura*/
padding 45px;
}
Código:
No he encontrado otro ejemplo más claro para explicar esto que trato de hacer, así que ví uno en flash muy parecido...
<div class="centrar"><div id="menu">
<ul>
<li class="nivel1"><a href="http://www.tjlfifa.com" class="nivel1"><img src="http://www.tjlfifa.com/picture_library/menus/inicio.png" /></a>
<!--[if lte IE 6]><a href="http://www.tjlfifa.com" class="nivel1ie"><img src="http://www.tjlfifa.com/picture_library/menus/inicio.png" /><table class="falsa"><tr><td><![endif]-->
<ul id="uno">
<li><a href="#">Normativa</a></li>
<li><a href="#">Inscripciones</a></li>
<li><a href="#">Tutoriales</a></li>
<li><a href="#">Mi Perfil</a></li>
<li><a href="#">Información Usuarios</a></li>
<li><a href="#">Avatares</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1"><img src="http://www.tjlfifa.com/picture_library/menus/actualidad.png" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie"><img src="http://www.tjlfifa.com/picture_library/menus/actualidad.png" /><table class="falsa"><tr><td><![endif]-->
<ul id="dos">
<li><a href="#">Noticias</a></li>
<li><a href="#">Comité de Competición</a></li>
<li><a href="#">Actualidad TJL</a></li>
<li><a href="#">Actualizaciones</a></li>
<li><a href="#">EAsports</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1"><img src="http://www.tjlfifa.com/picture_library/menus/manager.png" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie"><img src="http://www.tjlfifa.com/picture_library/menus/manager.png" /><table class="falsa"><tr><td><![endif]-->
<ul id="tres">
<li><a href="#">Ligas</a></li>
<li><a href="#">Comp. Europeas</a></li>
<li><a href="#">Copas</a></li>
<li><a href="#">Supercopas</a></li>
<li><a href="#">Comp. Internacionales</a></li>
<li><a href="#">Torneos Pretemporada</a></li>
<li><a href="#">Salón de la Fama</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1"><img src="http://www.tjlfifa.com/picture_library/menus/dire.png" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie"><img src="http://www.tjlfifa.com/picture_library/menus/dire.png" /><table class="falsa"><tr><td><![endif]-->
<ul id="cuatro">
<li><a href="#">Base de Datos Jugadores</a></li>
<li><a href="#">Sala de Prensa</a></li>
<li><a href="#">Historial de Negociación</a></li>
<li><a href="#">Economía Clubs</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1"><a href="#" class="nivel1"><img src="http://www.tjlfifa.com/picture_library/menus/mercado.png" /></a>
<!--[if lte IE 6]><a href="#" class="nivel1ie">img src="http://www.tjlfifa.com/picture_library/menus/mercado.png" /><table class="falsa"><tr><td><![endif]-->
<ul id="cinco">
<li><a href="#">Agentes Libres</a></li>
<li><a href="#">Cláusulas</a></li>
<li><a href="#">Confirmaciones</a></li>
<li><a href="#">Cesiones</a></li>
<li><a href="#">Ofertas</a></li>
<li><a href="#">Despidos</a></li>
</ul>
<li class="nivel1"><a href="http://www.tjlfifa.com" class="nivel1"><img src="http://www.tjlfifa.com/picture_library/menus/mas%20FIFA.png" /></a>
<!--[if lte IE 6]><a href="http://www.tjlfifa.com" class="nivel1ie"><img src="http://www.tjlfifa.com/picture_library/menus/mas%20FIFA.png" /><table class="falsa"><tr><td><![endif]-->
<ul id="uno">
<li><a href="#">Torneos en Igualada</a></li>
<li><a href="#">Ultimate Team</a></li>
<li><a href="#">FIFA Manager</a></li>
<li><a href="#">FIFA Street</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Off Topic</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1">
<li class="nivel1"><a href="http://www.tjlfifa.com" class="nivel1"><img src="" /></a>
<!--[if lte IE 6]><a href="http://www.tjlfifa.com" class="nivel1ie"><img src="" /><table class="falsa"><tr><td><![endif]-->
<ul id="uno">
<li><a href="#">Torneos en Igualada</a></li>
<li><a href="#">Ultimate Team</a></li>
<li><a href="#">FIFA Manager</a></li>
<li><a href="#">FIFA Street</a></li>
<li><a href="#">Descargas</a></li>
<li><a href="#">Off Topic</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="nivel1">
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
</div>
http://www.cristalab.com/ejemplos/menu-con-easing-3-tooltip-text-c14l/#ejemplo-demo
Esto del sonido no lo tengáis en cuenta, ni que es en flash, es que no encontré otro ejemplo más claro...
Espero haberlo descrito bien, si no, buscaré otro ejemplo y lo dejaré aquí.
