Menú superior desplegable con jQuery

 

Las ventajas de un menú superior desplegable es que nos permite ofrecerle al usuario una serie de accesos directos a los enlaces más importante de nuestra web de forma que no estén continuamente en pantalla si no que solo se desplieguen cuando el usuario desee.

Para hacer este menú hemos utilizado la librería jQuery, para conseguir ese efecto. Para aplicarlo en nuestra web tenemos que incluir el código Javascript y la llamada a la librería entre las etiquetas <head></head> de la siguiente forma:

[COPIAR]
Código PHP (Copiar):
  1. <script type="text/javascript" src="jquery.js"></script>  <!-- Libreria jQuery -->
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.  
  5.     $(".btn-slide").click(function(){
  6.         $("#panel").slideToggle("slow");
  7.         $(this).toggleClass("active"); return false;
  8.     });
  9.    
  10.     
  11. });
  12. </script>

El código html quedaría de la siguiente forma:

[COPIAR]
Código HTML (Copiar):
  1. <div id="panel">
  2.     <ul class="list">
  3.         <li><a href="#">Inicio</a></li>
  4.         <li><a href="#">Contacto</a></li>
  5.         <li><a href="#">Portafolio</a></li>
  6.         <li><a href="#">Sobre...</a></li>
  7.         <li><a href="#">Ayuda</a></li>
  8.         <li class="buscar"><input value="Buscar" /></li>
  9.     </ul>
  10.     <div class="clear"></div>
  11. </div>
  12.  
  13. <p class="slide"><a href="#" class="btn-slide">Men&uacute;</a></p>

Y por último necesitamos darle estilo mediante CSS quedando de la siguiente forma:

[COPIAR]
Código CSS (Copiar):
  1. #panel {
  2.     background: #CCC093;
  3.     height: 50px;
  4.     display: none;
  5. }
  6. .slide {
  7.     margin: 0;
  8.     padding: 0 0 0 5px;
  9.     border-top: solid 4px #825948;
  10.     height: 40px;
  11. }
  12. .btn-slide {
  13.     float: left;
  14.     background: #825948 url(white-arrow.gif) no-repeat right -50px;
  15.     text-align: center;
  16.     width: 144px;
  17.     height: 31px;
  18.     padding: 10px 10px 0 0;
  19.     margin: 0 auto;
  20.     display: block;
  21.     font: bold 120%/100% Arial, Helvetica, sans-serif;
  22.     color: #fff;
  23.     text-decoration: none;
  24. }
  25. .active {
  26.     background-position: right 12px;
  27. }
  28.  
  29. ul.list {margin: 0px; padding: 16px 0px 0px 10px; list-style: none;}
  30. ul.list li {float: left; width: auto;}
  31. ul.list a {text-decoration: none; background: #453027; margin: 5px; padding: 4px;}
  32. ul.list a:hover {text-decoration: none; background: #825948;}
  33.  
  34. ul.list li.buscar {float: right; margin-right: 5px;}
  35. ul.list li.buscar input {background-color: #453027; border: 0px; color: #CCC093; font-size: 18px; margin: 0px; width: 300px;}

Si queréis ver un ejemplo de como queda, tenéis esta página disponible. La librería jQuery la tenéis aquí.

18 May del 2008 (11:47 pm) Tutoriales.
0 Comentarios

Enlaces de Interes (III)

10 May del 2008 (1:38 pm) General.
0 Comentarios

Publicado PHP 5.2.6

Hace unos días se publicó la versión 5.2.6 de PHP, esta se encarga de resolver cinco vulnerabilidades de seguridad que podrían permitir a un atacante la ejecución de código arbitrario, eludir reglas de seguridad y provocar ataques del tipo DoS. Más información.

5 May del 2008 (2:03 pm) Asides.
0 Comentarios

PHP 5.3 mejorará considerablemente el rendimiento

Con la salida de la nueva versión de PHP se espera una mejora considerable de rendimiento, algunas aplicaciones o CMS mejorarán su velocidad y por tanto el rendimiento hasta en un 30%.

  • Drupal un 20% más rápido
  • Qdig un 2% más rápido
  • Typo3 un 30% más rápido
  • Wordpress un 15% más rápido
  • Xoops un 10% más rápido

Esperemos que los hostings vallan actualizando los servidores más o menos rápido y que no se demoren demasiado, por que aún hay servicios de almacenamiento que no tienen ni la versión 5.

Vía | Sentido Web (Schlueters).

11 April del 2008 (1:25 pm) Programacion.
1 Comentario