Busco plugin jQuery

[u]nsigned · 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?

Saludos

#!drvy · 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 (javascript) [Seleccionar]


<script lang="javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   // Al hacer click sobre el titulo (toggle)
   $('#titulo_categorias').bind('click', function(){
      // hacer un toggle de fade (fadeIn,fadeOut)
      $('#lista_categorias').fadeToggle('fast');
   });
});
</script>

CSS

Código (css) [Seleccionar]

<style type="text/css">
   /* position:inherit; para no afectar otros elementos
   de la pagina */
   .categorias {position:inherit;}

   /* Esta parte es solo para decoracion...
   para que se parezca un poco a la de mercadoLibre */
   #titulo_categorias {
      width:200px;
      height:20px;
      background:#222;
      color:#FFF;
      font-size:20px;
      padding:10px 0px 15px 0px;
      text-align:center;
      border-radius:10px;
   }

   /* Igual que arriba... solo decoracion */
   #titulo_categorias:hover {
      cursor:pointer;
      background:#333;
   }

   /* position:absolute; para situarse encima de los demas elementos */
   #lista_categorias {
      width:200px;
      background:#EAEAEA;
      position:absolute;
      display:none;
   }

   /* decoracion de los enlaces */
   #lista_categorias a {display:block; padding:0px 0px 0px 10px; color:#000;}
</style>

HTML

Código (html4strict) [Seleccionar]

<body>
   <div class="categorias">
      <div id="titulo_categorias">Categorias</div>
      <div id="lista_categorias">
         <a href="#">Categoria 1</a>
         <a href="#">Categoria 2</a>
         <a href="#">Categoria 3</a>
         <a href="#">Categoria 4</a>
         <a href="#">Categoria 5</a>
      </div>
   </div>
   Esta pagina es super mega ultra chula porque yo lo valgo<br />
   y porque papa noel lo dice. Si no te gusta vete a ver pr0n.<br />
   xD
</body>

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

PD: Demo online aquí.

Saludos

[u]nsigned · 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

Saludos!!!

Test Foro de elhacker.net SMF 2.1

Busco plugin jQuery

[u]nsigned

#!drvy

[u]nsigned