#
Menús desplegables, ¡solo con CSS! Normalmente solemos usar Javascript para añadirles efectos pero realmente si queremos realizar un menú desplegable sencillo lo podemos hacer solo usando CSS tal y como lo explica el señor Janko en su blog.
Diseño

Sidebar a la izquierda, derecha, ambos o ninguno

Comments
publicado el 27 de September del 2008 bajo , , , , .

Un punto importante a la hora de diseñar un sitio web es la colocación del sidebar (A partir de ahora menú). Podemos optar por colocar el menú a la izquierda del contenido, a la derecha o en ambos sitios.

En principio la decisión puede no parecer importante, pero dependiendo del tipo de web o del tipo de contenido del menú puede ser más o menos interesante colocarlo en un lugar o otro. Pasemos a nombrar las ventajas y desventajas de cada posición:

Sidebar en la derecha

Ventajas

  • Al leer de izquierda a derecha conseguiremos que el contenido gane importancia en nuestra página dejando el menú lateral en un segundo plano.
  • El sidebar en la derecha es ideal para añadir cierta información extra en la vista completa de las entradas como enlaces a redes sociales.
  • Al colocar el sidebar en la derecha conseguimos que nuestra página luzca como un verdadero blog.

Desventajas

  • Al colocar el sidebar a la derecha el contenido queda en la izquierda de la pantalla y obligaremos a el lector a mirar hacia el borde de la pantalla para leer.
  • Perdemos una buena posición para un bloque publicitario, aun que en la derecha también funcionan bastante bien.

Sidebar en la izquierda

Ventajas

  • Al leer de izquierda a derecha el menú se verá más lo cual puede ser interesante para colocar publicidad en él, o enlaces importantes para navegar por el blog/web.
  • El sidebar en la izquierda hace que el contenido quede más centrado en la página lo que hace que el usuario para leer el contenido mire al centro de la pantalla y no al lateral.

Desventajas

  • Al estar en la izquierda le resta importancia/visibilidad al contenido.
  • El sidebar a la izquierda hará que nuestra página recuerde más a una web que a un blog.

Continuar »

Tutoriales

Menú superior desplegable con jQuery

Comments
publicado el 18 de May del 2008 bajo , , , , , , .

 

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í.

#
IzzyMenu nos permite crear menús en CSS con un aspecto muy profesional y de forma sencilla y todo vía Web. Solo deberemos configurar todos los valores que nos permite a nuestro gusto y finalmente guardarlo y descargarlo y ya estará listo para usar en nuestra web.
Más noticias & Buscar »