:: CP - Recursos Web :: - Split Menu Buttons v1.2

Split Menu Buttons v1.2

Si busca un menu de un solo click desplegable este es el tuyo, puedes hacer que solo un boton se despliege asi dandole más opciones al usuario, Este recurso utiliza CSS, JQuery, HTML.

[ Ejemplo: ]

Links

Informacion:
Nombre: Split Menu Buttons v1.2
Fecha: 29-07-2013
Creditos: Dynamicdrive
Garantia: Si ?

Enlazanos:

Compartir:

[ Codigos: ]

- Por encima de la pagina o extra head:

<style>.splitmenubutton, .downtoggler{color:white;font:bold 13px Arial;-webkit-border-radius: 5px;-moz-border-radius: 5px;
border-radius: 5px;text-decoration: none;background:darkred;display: inline-block;} /* En esta lines modifica el color */
.splitmenubutton span.innerspan, .downtoggler span.innerspan{display: block;padding: 8px;line-height: 1em;
background: -moz-linear-gradient(top,  rgba(255,252,252,0.54) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,252,252,0.54)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,252,252,0.54) 0%,rgba(255,255,255,0) 100%); /* W3C */}
.dedicatedtoggler{-moz-border-radius: 0 5px 5px 0;border-radius: 0 5px 5px 0;border-left: 1px solid #f5f5f5;}
a.downtoggler.selected{background: #b13f33;}
.downarrow, rightarrow{cursor: pointer;}
span.innerspan.downarrow::after{content: '25be';}
.splitmenubutton span.innerspan.downarrow:after{content: '�0a025be';}
.rightarrow:after{content: '25b8';position: absolute;right: 5px;font-size: 16px;height: 100%;}
ul.splitdropdown, ul.splitdropdown ul{font: normal 13px Verdana;margin: 0;padding: 0;
position: absolute;display: none;left: 200px;top: 0;list-style: none;
background: white;border: 1px solid lightgray;border-bottom-width: 0;
box-shadow: 0 0 8px #818181;-webkit-box-shadow: 0 0 8px #818181;-moz-box-shadow: 0 0 8px #818181;}
ul.splitdropdown li{position: relative;}
ul.splitdropdown li a{display: block;width: 160px;
color:#000;background: white;text-decoration: none;padding: 8px 4px;}
* html ul.splitdropdown li{display: inline-block;width: 170px;}
ul.splitdropdown li a:hover, .splitdropdown li.selected>a{background: #eee;}
ul.splitdropdown li.separator{border-bottom: 1px solid #dedddd;}
</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src="https://googledrive.com/host/0BzTF4maHDSaGZU0yMXRrRTYxdWM/splitmenubuttons.js"></script>
<script>
jQuery(function(){ // on document load
	$('a[data-showmenu]').splitmenubuttonMenu() 
})</script>

- Donde quieras que aparesca

Apuntes
Modifica las url en el segundo script y las caracteristicas en el Css en el primer Scritp.
- Para cualquier consulta visita nuestro Foro de soporte.

Ya lo han visto 189 visitantesGracias por tu visita!

Recomendamos:

| CERRAR