Últimos temas
» [SKIN] Hello? how are you
por Unity Vie Ene 06, 2017 11:55 pm

» Pack 1 de html (personaje + firma)
por Rose Jue Ene 05, 2017 5:19 pm

» [FIRMA] Mikagura Suite
por Natty Mar Dic 27, 2016 9:57 am

» [SKIN] Attack No Titan
por Flowman Jue Dic 15, 2016 8:51 pm

» Owari no seraph's
por Cool Skelleton_95 Mar Nov 15, 2016 2:04 pm

» Simple flutter
por Amaranth Miér Oct 26, 2016 8:54 am

» Duda sobre sorteo de skin
por SS Jue Sep 15, 2016 8:22 pm

» [MOVIL] [ FA ] Haikyuu
por Sarisha Mar Ago 30, 2016 6:07 am

» Pedido grafico
por DangerStRichard Dom Ago 28, 2016 7:09 pm


{TUTORIAL CSS} POP UP pestañas sencillas

Ver el tema anterior Ver el tema siguiente Ir abajo

{TUTORIAL CSS} POP UP pestañas sencillas

Mensaje por Mikae el Miér Jun 29, 2016 10:00 pm

Tablón de anuncios en pestañas POP UP sencillas
Nombre del tutorial: Tablón en POP UP sencillas
Dificultad: Intermedio
Tiempo de lectura: 30 minutos
Creador del tutorial: Mikae
Si está dedicado a alguien en particular: Usuarios de Serendipity ❤

Bases y Recordatorios

¿Tablones grandes? ¿Con pestañas JS? ¿Enormes a la vista? ¡Eso se acabo! Porque ahora contamos con pestañas Pop-UP quienes además de ser simples y bonitas a la vista, permite mejor visualización del foro -Ojala no descubran mi empleo de medio tiempo como vendedor de comerciales(?)-  Los créditos no son obligatorios, pero me gustaría agradecieran e hicieran referencia de donde se encontró el código, claramente en Serendipity, solo eso. Comenta para ver el hermoso tutorial.

Utilizaremos:
CSS
HTML
JS hermoso y diabólico.

Preview: Dale click para mayor tamaño


Manos a la obra

Primero armaremos el esqueleto, siempre comencemos por eso, así tenemos bien definido todo.
Usaremos un div para el texto o titulo de la pestaña
Código:
<div id="mikaup">Nombre de pestaña</div>

Luego, el cajón de este ( Que contendrá el contenido y demás, menos las pestañas. Añadiremos id o class, pero será obligatorio dejarle un style con display none. Este servirá para el fondo negro.
Código:
<div id="mikaup">Nombre de pestaña</div>
<div style="display: none;" id="mikacont1"></div>

Dentro de la caja ya mencionada irá un div para el contenido y un div para el botón de cerrar.
Código:
<div id="mikaup">Nombre de pestaña</div><div style="display: none;" id="mikacont1"><div id="mikacont2">CONTENIDO</div><br /><br />  <div id="mikapop">Cerrar</div></div>

Ya tenemos armado nuestro esqueleto, ahora vamos a ponerlo bonito con CSS
Ir al planel de administración Visualización   Imágenes y Colores Colores CSS
Las propiedades en mi caso a editar serán:

  • #mikaup -  Será para editar la forma del boton / pestañitas
  • #mikacont1 - Será para editar el fondo negro que aparece como preview, la posición etc.
  • #mikacont2 - Será para editar el cuadro del contenido
  • #mikapop - Será para un botoncito chachi para cerrar con más comodidad el pop up.


Cada quien puede editar a su criterio, pero les dejaré las propiedades que no deben borrar, o al menos tomar en cuenta
Código:
#mikaup {
propiedades que desees
}

Código:
#mikapop {
  margin: 10px 400px;
/*Añadir tus propiedades*/
}

Código:
 #mikacont1 {
  z-index: 999;
  position: fixed;/*No borrar*/
  top: 0px;/*No borrar*/
  left: 0px; /*No borrar*/
  right: 0px;/*No borrar*/
  bottom: 0px;/*No borrar*/
  background: #000;
 /*Añadir más propiedades*/
  }

Código:
#mikacont2 {
  background: #color;
  width: 800px;
  margin: auto;/*No borrar, si modificar*/
  margin-top: 100px; /*No borrar, si modificar*/
  }

Ya casi terminamos, ahora para darle el efecto visitaremos a nuestro amigo JS
Ir al planel de administración Módulos   HTML Y JAVASCRIPT Gestión de los códigos Javascript Crear un nuevo JS

Agregamos este código visible en todas las páginas:
Código:
$(document).ready(function () {
 $("#mikaup").click(function () { $("#mikacont1").fadeIn(300); });
 $("#mikapop").click(function () { $("#mikacont1").fadeOut(300); });
});

¿Se puede añadir más pestañas?
¡Por supuesto! Solo es necesario duplicar el código una y otra vez (?) Si tienen problemas con eso u otro código al respecto del tutorial, pueden postearlo.

mikae © 2016
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.