-
buzzdungeon
Destacado
Ubicación: México
|
02-01-2013, 00:19 (UTC) Título del mensaje: Menú desplegable automático [Para Ice-blue] |
|
|
Este es mi primer aporte del año
lo que hace es hacer un menú desplegable automáticamente sin necesidad de editar los puntos del menú, submenús, etc, por ahora solo lo he hecho para el diseño ice blue, pero pronto estará para mas diseños por defecto de PWG
ejemplo:
¿Pero como lo configuro?
Tus paginas tienen que tener la siguiente estructura:
*sorry por la imagen tan fea, estoy apresurado posteando esto xD
* Cada punto del menú tiene que tener los atributos remarcados en azul y tiene que ser 'Punto del menú sin link'
*puedes poner cuantos puntos del menú quieras, entre mas sean, mas ancho se hará el menú.
Texto por encima de la pagina:
Código: <script type="text/javascript">$(document).ready(function(){
var es = '<ul class="menuib">';
$("td.nav u i b").each(function(){
var i = $(this).parent().parent().parent().parent().index()-1;
es += '<li class="itic" id="'+i+'">'+$(this).text()+'<ul>';
$('td.nav:gt('+i+') a').each(function(){
es += '<li class="subic" id="'+($(this).parent().parent().index()-1)+'">'+$(this).parent().html()+'</li>';
});
es+='</ul></li>';
});
es += '</ul>';
$(".edit_header_full").append(es);
$(".menuib .subic").each(function(){
if(parseInt($(this).attr("id")) >= parseInt($(this).parent().parent().next(".itic").attr("id"))){
$(this).remove();
}
});
//programado por buzzdungeon.es.tl
</script>
<style type="text/css">ul.menuib{
list-style:none;
margin:35px 0 0 -41px;
}
ul.menuib li{
position:relative;
width:auto;
}
ul.menuib ul{
display:none;
list-style:none;
}
ul.menuib li:hover > ul{
display:block;
}
/*creado por buzzdungeon.es.tl*/
ul.menuib> li > ul{
display:none;
left:-41px;
list-style:none;
position:absolute;
top:22px;
}
ul.menuib > li > ul li{
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
border-top: none;
border:1px solid black;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
padding: 3px 4px;
}
ul.menuib > li > ul li:first-child{
border-top:1px solid black;
}
ul.menuib > li > ul li:hover{
background: #ededed;
background: -moz-linear-gradient(top, #ededed 0%, #f6f6f6 53%, #ffffff 100%);
background: -ms-linear-gradient(top, #ededed 0%,#f6f6f6 53%,#ffffff 100%);
background: -o-linear-gradient(top, #ededed 0%,#f6f6f6 53%,#ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(53%,#f6f6f6), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top, #ededed 0%,#f6f6f6 53%,#ffffff 100%);
background: linear-gradient(to bottom, #ededed 0%,#f6f6f6 53%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#ffffff',GradientType=0 );
}
ul.menuib > li{
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
background: -ms-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -o-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#cccccc));
background: -webkit-linear-gradient(top, #eeeeee 0%,#cccccc 100%);
background: linear-gradient(to bottom, #eeeeee 0%,#cccccc 100%);
border-right: none;
border:1px solid black;
display:inline;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
font-size: 1.1em;
font-weight: bold;
padding: 4px 4px;
width: auto;
}
ul.menuib > li:last-child{
border-right:1px solid black;
}
ul.menuib >li:hover{
background: #cccccc;
background: -moz-linear-gradient(top, #cccccc 0%, #eeeeee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#eeeeee));
background: -webkit-linear-gradient(top, #cccccc 0%,#eeeeee 100%);
background: -o-linear-gradient(top, #cccccc 0%,#eeeeee 100%);
background: -ms-linear-gradient(top, #cccccc 0%,#eeeeee 100%);
background: linear-gradient(to bottom, #cccccc 0%,#eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 );
}</style>
Eso es todo, cualquier duda pueden comentar o mandarme un mp
------
- ¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui______________ /* Programador web freelance. */
/* twitter: @jfdelarosa */
Ultima edición por buzzdungeon el Vie Feb 01, 2013 3:43 pm; editado 1 vez
|
|