Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje02-10-2011, 18:57 (UTC)    
Título del mensaje: [CSS-jQuery] | Panel flotante para mostrar Contenido

Les traigo un codigo que lo tenia hace bastante, pero como esta Seccion estaba bloqueada, se los muestro ahora.



Al darle click sobre el boton que sale al costado, se abre el panel con el contenido.


1- Vamos a ir a Editar Diseño - Configuraciones avanzadas - Texto por ensima de la pagina y vamos a pegar la siguiente Libreria entre las etiquetas Head y Body
Cita:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>


2- Ahora pegaremos el codigo Javascript debajo del codigo pegado anteriormente
Cita:
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>


3-Ahora vamos a ir a Editar Diseño - Configuraciones avanzadas - CSS-Code sin Style Tags: y vamos a pegar el siguiente codigo al principio o al final del codigo que ya tenemos :
Cita:
/* Panel de Contenidos Brianpwg */
.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(http://spyrestudios.com/demos/sliding-panel-right/images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(images/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(http://spyrestudios.com/demos/sliding-panel-right/) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}


y le vamos a dar en guardar cuando tengamos todos los codigos pegados.(Libreria,javascript y css)

4Ahora hiremos a Controlar paginas - Creamos una nueva pagina o en la que ya tengamos, y pegaremos lo siguiente:

Cita:
<div class="panel">
<h3>Por BrianPwg</h3>
<p>[b]Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners
</p>
<p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>
<h3>A Little Something About Me</h3>
<img class="right" src="[b]images/jon_image.jpg
" alt="Jon Phillips" />
<p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>
<div style="clear:both;">&nbsp;</div>
<div class="columns">
<div class="colleft">
<h3>Redes Sociales</h3>
<ul>
<li><a href="http://twitter.com/jophillips" title="Twitter[b]">[b]Twitter</a></li>
<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
<li><a href="http://digg.com/users/jophillips" title="Digg[b]">[b]Digg</a></li>
<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us[b]">[b]Del.Icio.Us</a></li>
<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo[b]">[b]DesignMoo</a></li>
</ul>
</div>
<div class="colright">
<h3>Redes Sociales</h3>
<ul>
<li><a href="http://twitter.com/jophillips" title="Twitter[b]">[b]Twitter</a></li>
<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
<li><a href="http://digg.com/users/jophillips" title="Digg[b]">[b]Digg</a></li>
<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us[b]">[b]Del.Icio.Us</a></li>
<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo[b]">[b]DesignMoo</a></li>
</ul>
</div>
</div>
<div style="clear:both;">&nbsp;</div>
</div>
<a class="trigger" href="#">infos</a>

Donde esta marcado con Negrita es donde nosotros lo podremos editar.
ATENCION:
Cita:
<a class="trigger" href="#">infos</a>

En ese codigo, no pondremos ninguna url, si no la accion no sera abrir el panel, sino una url.

Fuente : http://spyrestudios.com

Saludos.


Ultima edición por brianpwg el Dom Oct 02, 2011 3:06 pm; editado 1 vez
Mensaje02-10-2011, 19:28 (UTC)    
Título del mensaje:

Que buen codigo Brian me sera util algun dia,buen aporte.

Saludos
______________

Noticias Relevantes
Diablo III llegara el 15 de mayo
Se desvela Angry Birds Space
Call of Duty: Black Ops 2 podria anunciarse el 28
La portatil Neo Geo es oficial
Hemos activado nuestro foro... ¡ Entrar al foro !
Mensaje02-10-2011, 21:11 (UTC)    
Título del mensaje: buen

hola buen post lo pongre en mi web como recurso saludos
Mensaje03-10-2011, 21:42 (UTC)    
Título del mensaje:

Muy lindo el aporte, aunque no se si es funcional en todoz los navegadorez, saquenme de la duda!

Graz por compartirlo =)
______________


https://radiovijaer.es.tl/
Mensaje03-10-2011, 22:23 (UTC)    
Título del mensaje:

Hola Brianpwg,

Buen aporte, sera muy utiles para los usuarios
Recuerda poner la url de la fuente completa y no la pagina central.
Cita:
[+] Todo código compartido debe de adjuntar el vínculo directo a la fuente, por ejemplo si compartes un código del elwebmaster.com, debes de colocar la dirección completa al mismo y no la página central "elwebmaster.com".


Mas información:
http://www.paginawebgratis.es/forum/viewtopic.php?t=66177

Muchas gracias por su Comprencion y Colaboracion
Design-PWG.
______________

10 años ayudando a PWG.

Soporte PWG: ayuda@paginawebgratis.es
Reportes: support-es@webme.com


Ultima edición por design-pwg el Lun Oct 03, 2011 6:25 pm; editado 2 veces
Mensaje03-10-2011, 23:08 (UTC)    
Título del mensaje:

Buen aporte BrianPWG!
______________
Mensaje03-10-2011, 23:10 (UTC)    
Título del mensaje:

Mensaje04-10-2011, 12:47 (UTC)    
Título del mensaje:

Esta bueno ese Panel Flotante

Saludos
______________


Super Mario la lleva, es lo mejor en Videojuegos, se los recomiendo
Mensaje05-10-2011, 01:14 (UTC)    
Título del mensaje:

supermarioworldsnes escribió:
Esta bueno ese Panel Flotante

Saludos

GRacias
Mensaje05-10-2011, 10:25 (UTC)    
Título del mensaje:

Hola Brian !

El Codigo me gusta , y me funciono , nada mas que cuando lo aplico se deforma La plantilla :S
Mensaje22-12-2011, 20:50 (UTC)    
Título del mensaje:

Hola, me parece interesante tu código, ¿no hay una forma de aplicarlo a multiples elementos independientes?
______________

Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group