Hacer un menú desplegable (html+css)
Filed under: diseño web general, herramientas y utilidades, trucos y consejos web
Muchas veces nos encontramos con la necesidad de incluir distintos apartados dentro de un mismo elemento del menú,
en estos casos nos puede venir muy bién un menú desplegable que muestre los submenus cuando el cursor pasa por encima del menú.
Es muy fácil hacerlo con CSS, usando las etiquetas <ul> y <li> anidadas.
Veamos el código HTML que tendremos en nuestra página (index.html por ejemplo):
” <ul class=”menu_color”>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5
<ul>
<li>menu 5.1</li>
<li>menu 5.2</li>
<li>menu 5.3</li>
</ul>
</li>
<li>menu 6</li>
<li>menu 7</li>
</ul> ”
Ahora veamos el código CSS que hará que el menú se despliegue y tenga el aspecto que deseamos:
ul.menu_color
{
list-style:none;
background-color:#ffffff;
padding-left:5px;
padding-right:5px;
padding-top:4px;
padding-bottom:4px
}
ul.menu_color li
{
display:block;
position:relative;
padding-left:5px;
padding-right:5px;
padding-top:4px;
padding-bottom:4px;
background-color: #ffffff;
}
ul.menu_color ul
{
position:absolute;
left:51px;
top:-1px;
display:none;
list-style:none;
}
ul.menu_color li:hover
{
background:#ffffff;
color:#E55F28;
filter:alpha(opacity=80);
opacity:0.8;
zoom: 1;
}
ul.menu_color li:hover > ul
{
display:block;
width:150px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
left:0px
}
ul.menu_color> li > ul /* Solo para los ul debajo de los li de primer nivel. */
{
position:absolute;
left:-41px;
top:19px;
display:none;
list-style:none;
}
ul.menu_color> li:hover > ul /* Solo para los ul debajo de los li de primer nivel. */
{
color:#000000;
background:#ffffff;
}
ul.menu_color > li /* Sólo para li de primer nivel */
{
display:inline;
}
Si has puesto correctamente este código en tu página HTML y en tu hoja de estilos CSS, ya tienes un menú desplegable en formato horizontal.
Si quieres darle un aspecto más bonito o acorde con el diseño de tu página, debes modificar el CSS para añadir tus colores, tipografias, etc.
También es posible hacer que el menú se despliegue hacia un lado y no hacia abajo, para ello tendrás que modificar la posición que indica el CSS.
Espero que te sirva de ayuda. Puedes ver ejemplos en http://dissenyaweb.com/es_paginas_web/ejemplos_diseno_paginas_web.html
Ejemplo metatags
Filed under: diseño web general, posicionemiento buscadores SEO, trucos y consejos web
Aquí os dejo un ejemplo de los metatags que yo utilizo y que hasta la fecha me han dado my buenos resultados:
<meta name="Title" content="Disseny de pàgines web"/> <meta name="Description" content="Dissenyaweb és una empresa de disseny de pàgines web especialitzada en disseny exclusiu de pàgines web fetes a mida"/> <meta name="Keywords" content="disseny web, pàgines web, pagina web, pagines web págines web, disseny de web, disseny pàgines web, disseny websites, disseny llocs web, disseny de web, disseny gràfic web, diseny web, disseny pàgina web"/> <meta name="Language" content="ca"/> <meta name="Distribution" content="Global"/> <meta name="robots" content="index,follow,all"/> Recordar que siempre que tienen que ir en el header, dentro de la etiqueta <head> Espero que sean de utilidad!!
Menú horizontal vs vertical
Podemos dividir los distintos tipos de diseño que podemos elegir en función de la posición del menú principal.
Básicamente destacaría las páginas con menú horizontal y las páginas con menú vertical.
Normalmente los menús horizontales encajan bien con páginas de muchos apartados y que necesiten ordenar muy bien los módulos de contenido. Este tipo de menú nos permite diseñar páginas muy largas donde el usuario va a hacer scroll para ir leyendo todos los contenidos.
Veamos un ejemplo:
Los menús verticales nos pueden interesar cuando tengamos menos elementos a mostrar en el menú o sea, cuando la página tenga menos apartados. Si queremos hacer un diseño donde el usuario no tenga que hacer scroll para ver todo el contenido nos vendrá muy bien este tipo de menú. Si es así, daremos un alto máximo a la página de 600px (de esta manera el 90% de los usuarios van a ver el contenido entero sin necesidad de hacer scroll)
Veamos un ejemplo:
Cómo diseñar una web
Primera parte: pasos previos:
Si queremos hacer buenas páginas web, estas tendrán que ser estéticas, usables, funcionales y atractivas. Antes que nada nos tendremos que plantear que tipo de cliente tenemos delante y en que sector se va a ubicar la página. La linea de diseño que elijamos dependerá básicamente de esto.
No esta demás navegar un poco por páginas que puedan ser similares a la que vamos a hacer para ver ejemplos y coger ideas que después combinaremos.
Muy importante antes de empezar ningún trabajo es la reunión inicial con el cliente donde tendremos que conseguir que él tenga clara la estructura que quiere para la página y que nos entregue por escrito un esquema de los apartados con menús y submenús que aparecerán.
Evidentemente nosotros asesoraremos y ayudaremos a configurar este esquema, pero es fundamental que la estructura final esté decidida o como mínimo aprobada por el propio cliente (esto nos ahorrará muchas horas de cambios y modificaciones). En esta fase podemos pedir y ayudar a elaborar los primeros textos que irán en cada apartado, aunque no es imprescindible ya que podremos empezar a trabajar con texto simulado que posteriormente substituiremos por el definitivo.
Una buena pregunta a hacer al cliente en esta primera reunión es si hay alguna página de temática similar o que le agrade especialmente, esto nos dará muchas pistas para acertar al primer tiro con la linea de diseño.
No hace falta decir que en esta fase se habrá acordado ya por escrito el presupuesto y plazo de entrega aproximado para el proyecto.
Pues bien, después de una primera reunión y de pensar un poco desde nuestro estudio (o desde casa) tenemos que tener claros los siguientes conceptos para poder empezar a diseñar:
• Que tipo de cliente tenemos delante (a qué se dedica)
• Como son las páginas similares del mismo sector
• Que páginas de ejemplo le gustan
• Esquema o estructura de apartados y menus
Con esto ya podemos empezar a pensar como serà la página: Donde colocaremos cada elemento, que tipografia usaremos, que colores, etc.
Para conseguir un buen resultado aconsejo no empezar a diseñar con programas de código tipo Dreamweaver o similar, en esta fase toca diseñar con programas de diseño gráfico como Frehand, Photoshop o Ilustrator e incluso en ocasiones será bueno empezar con papel y lapiz.
Aunque pueda paracer laborioso, si seguimos este proceso y no empezamos a programar hasta tener 100% claro como será la página, nos ahorraremos multitud de cambios y haremos las cosas una sola vez y bien, y no muchas con errores como suele pasar.
Encuestas
Cargando ...