elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recuerda que debes registrarte en el foro para poder participar (preguntar y responder)


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Busco plugin jQuery
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Busco plugin jQuery  (Leído 2,010 veces)
[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Busco plugin jQuery
« en: 13 Noviembre 2012, 16:45 pm »

Hola busco un plugin para jQuery similar al de esta pagina. Me refiero al ovalo negro que esta arriba a la izquierda. El que dice 'categorias' y que al clickearlo se abre una caja, pero flotante, es decir sin alterar el resto de la pagina...alguna sugerencia?  :P

Saludos


En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Busco plugin jQuery
« Respuesta #1 en: 13 Noviembre 2012, 17:43 pm »

Eso lo puedes hacer tu solo con un par de lineas en CSS y un evento (click) en jQuery. No creo que haga falta un plugin con lineas innecesarias para todo esto...

Te dejo un demo:

El javascript.
Código
  1. <script lang="javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4.   // Al hacer click sobre el titulo (toggle)
  5.   $('#titulo_categorias').bind('click', function(){
  6.      // hacer un toggle de fade (fadeIn,fadeOut)
  7.      $('#lista_categorias').fadeToggle('fast');
  8.   });
  9. });
  10. </script>

CSS
Código
  1. <style type="text/css">
  2.   /* position:inherit; para no afectar otros elementos
  3.    de la pagina */
  4.   .categorias {position:inherit;}
  5.  
  6.   /* Esta parte es solo para decoracion...
  7.    para que se parezca un poco a la de mercadoLibre */
  8.   #titulo_categorias {
  9.      width:200px;
  10.      height:20px;
  11.      background:#222;
  12.      color:#FFF;
  13.      font-size:20px;
  14.      padding:10px 0px 15px 0px;
  15.      text-align:center;
  16.      border-radius:10px;
  17.   }
  18.  
  19.   /* Igual que arriba... solo decoracion */
  20.   #titulo_categorias:hover {
  21.      cursor:pointer;
  22.      background:#333;
  23.   }
  24.  
  25.   /* position:absolute; para situarse encima de los demas elementos */
  26.   #lista_categorias {
  27.      width:200px;
  28.      background:#EAEAEA;
  29.      position:absolute;
  30.      display:none;
  31.   }
  32.  
  33.   /* decoracion de los enlaces */
  34.   #lista_categorias a {display:block; padding:0px 0px 0px 10px; color:#000;}
  35. </style>

HTML
Código
  1.   <div class="categorias">
  2.      <div id="titulo_categorias">Categorias</div>
  3.      <div id="lista_categorias">
  4.         <a href="#">Categoria 1</a>
  5.         <a href="#">Categoria 2</a>
  6.         <a href="#">Categoria 3</a>
  7.         <a href="#">Categoria 4</a>
  8.         <a href="#">Categoria 5</a>
  9.      </div>
  10.   </div>
  11.   Esta pagina es super mega ultra chula porque yo lo valgo<br />
  12.   y porque papa noel lo dice. Si no te gusta vete a ver pr0n.<br />
  13.   xD
  14. </body>

Lo que importa es el position:absolute de la lista y el position:inherit del div general...

PD: Demo online aquí.

Saludos


En línea

[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Busco plugin jQuery
« Respuesta #2 en: 13 Noviembre 2012, 17:47 pm »

Muchas gracias por responder. Mi primera idea era buscar un plugin ya hecho, pero mientras tanto esto me sirve  ;D

Saludos!!!
En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Plugin con Jquery retornando respuesta AJAX
Desarrollo Web
Littl3 9 11,182 Último mensaje 12 Diciembre 2012, 12:29 pm
por dengue8830
Ayuda con plugin de Jquery
Desarrollo Web
franfis 0 1,693 Último mensaje 31 Mayo 2013, 03:47 am
por franfis
Por que se usa JQuery.fn en Plugin
Desarrollo Web
franfis 0 1,352 Último mensaje 10 Junio 2013, 16:57 pm
por franfis
Detener ejecucion de Plugin de Jquery
Desarrollo Web
nevermind2403 2 2,450 Último mensaje 26 Febrero 2014, 15:53 pm
por #!drvy
previsualizar imagenes subidas con jquery plugin ezdz
Desarrollo Web
gAb1 1 1,782 Último mensaje 5 Enero 2016, 04:11 am
por gAb1
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines