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
Redireccionamiento mediante meta html
Filed under: herramientas y utilidades, trucos y consejos web
A veces nos puede interesar hacer que una página cambie de dirección automáticamente cuando un usuario accede a ella. Para ello podemos usar la siguiente etiqueta meta:
<META HTTP-EQUIV=”Refresh” CONTENT=”3; URL=http://www.dissenyaweb.com”>
Poniendo esta etiqueta entre <head> y </head> de nuestra página conseguiremos que en 3 segundos redireccione automáticamente a http://www.dissenyaweb.com
Veamos un ejemplo de como sería la típica página de “En 3 segundos comenzará la descarga”:
<html>
<head>
<title>ejemplo redireccionamiento meta html</title>
<META HTTP-EQUIV=”Refresh” CONTENT=”3; URL=archivo.zip”>
</head>
<body>
En 3 segundos comenzará la descarga. Si no empieza, pulsa <a href=’archivo.zip’>aquí</a>
</body>
</html>
El “archivo.zip” debe estar en el mismo directorio que el archivo .html para que este ejemplo funcione. Evidentemente podemos poner la ruta que queramos.
Esta forma se llama “meta refresh”
Si nos interesa consrvar el pagerank de la antigua página y que este sea heredaro por la nueva, tendremos que utilizar otras técnicas como por ejemplo
301 Redirect:
Un “301 redirect” es la forma más eficiente y eficaz para redireccionar urls. De echo es la opción que más recomiendan los buscadores. Esta técnica es prácticamente transparente al usuario (sólo puede ver el cambio de url en la barra de direcciones de su navegador), y además es el método más rápido.
Este tipo de redirección se implementa en un archivo .htaccess.
Cuando un visitante pide una página que se encuentra en un directorio concreto, el servidor Apache lo primero que hace es comprobar si hay un archivo .htaccess en ese directorio. Éste archivo contiene información específica sobre cómo manejar errores, opciones de seguridad y de redireccionamiento entre otras.
El código 301 se interpreta en el servidor como “movido permanentemente”. Antes que nada necesitarás un archivo .htaccess en el directorio donde estan alojadas todas las páginas. Puedes crear uno con el bloc de notas si no existe. Nota: Fíjate en poner un “.” al principio del nombre de archivo. Este archivo no tiene extensión.
El código de redireccionamiento es así:
redirect 301 /tutoriales/viejo.htm http://www.webtutoriales.com.com/tutoriales/nuevo.htm
Así de simple, guarda el archivo y súbelo al servidor. Para probarlo deberías acceder a la dirección vieja y instantáneamente serás redireccionado a la nueva. Te recordamos que debes poner la ruta completa de la nueva página (siempre empezando con “http://…”) tal y como está en nuestro ejemplo.
Puedes ver un ejemplo de esto en: http://www.webtutoriales.com/
Otra opción seria para hacer un redirect 301 seria mediante PHP:
Redirección 301 con PHP
La página que vamos a redireccionar la reemplazamos por un archivo PHP con el siguiente código:
<?php
header("HTTP/1.1 301 Moved Permanently");
header("location:http://www.neoideas.com.mx");
?>Es importante que este código esté hasta el principio del archivo php (en la primera línea).
Encuestas
Cargando ...