Menu con 3 estados

Menu con 3 estados

Para comenzar con esta guia tengo que explicar un poco mejor esto de los 3 estados, cuando digo 3 estados me estoy refiriendo a hover, normal y pagina revisada.

hover: Como se ve la imagen al pasar el mouse sobre ella
Normal: Como se ve la imagen al momento de cargar la pagina
Pagina revisada: Como se ve la imagen del menu que corresponde a la pagina visitada (por ejemplo, si vamos a tutoriales, como hacemos para que la imagen del menu que sea “tutoriales” esté diferente a las demas)

Si no entendiste muy bien, con el paso del tutorial vas a entenderlo.

Vamos a hacer este menu un poco diferente a los demas hechos anteriormente, en otros tutoriales te dije que recortaras dos imagenes, una normal y una diferente para el hover, ahora ¿que tal si hacemos una sola imagen con los 3 estados?, veamos como queda mi imagen:

menu1

ok, lo importante es que la imagen sea correcta en cuanto a su tamaño, por ejemplo si quieres que el campo del menu sea de un alto de 100px, debes hacer tu imagen de 300px porque tienes 3 en una sola.

ahora vamos a nuestro index y hacemos nuestro menu con listas ordenadas, el archivo completo me queda asi.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
 
<link href="style-menu-hover.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<h1>Menu con 3 estados</h1>
 
<div id="contenido">
<ul id="menu">
<li><a href="menu-hover-hover.html" class="skyandstars">skyandstars.net</a></li>
</ul>
</div>
</body>
</html>

Guardé a ésta como menu-hover, tu guardala como desees.

Abre ahora otra página html nueva, yo guardé a ésta siguiente como “menu-hover-hover” que fue la url que especificamos en la segúnda línea del código de arríba, a esta nueva página le vamos a agregar un id en el body, y vamos a colocar nuestro menu como en la página anterior, el código quedaría así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
 
<link href="style-menu-hover.css" rel="stylesheet" type="text/css" />
</head>
 
<body id="menu-hover-hover">
<h1>Menu con 3 estados</h1>
 
<div id="contenido">
<ul id="menu">
<li><a href="menu-hover-hover.html" class="skyandstars">skyandstars.net</a></li>
</ul>
</div>
</body>
</html>

Como dige anteriormente, le agregamos un id al body, ponle el nombre de la pagina, en este caso “menu-hover-hover”.

eso es todo, ahora vamos a nuestra hoja de estilos y agregamos lo siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
}
#contenido {
margin: 0 auto;
width: 600px;
}
ul#menu {
list-style: none;
}
ul#menu li {
display: inline;
}
ul#menu li a {
text-indent: -5000px;
display: block;
float: left;
width: 400px;
height: 100px;
}
ul#menu li a.skyandstars {
background: url(menu.png) bottom center no-repeat;
}
ul#menu li a.skyandstars:hover, ul#menu li a.skyandstars:active {
background-position: center center;
}
body#menu-hover-hover ul#menu li a.skyandstars {
background-position: top center;
}

hasta la linea 26 todo debe ser normal para alguien con conocimiento medio en css, vamos ahora con la linea 27

1

background: url(menu.png) bottom center no-repeat;

las palabras bottom y center reflejan la posicion del fondo, éste es el id para la pagina normal, si ves la imagen del principio de tutorial, veras que la normal esta en el fondo, de ahí la palabra bottom.

1
2
3

ul#menu li a.skyandstars:hover, ul#menu li a.skyandstars:active {
background-position: center center;
}

aqui tenemos el “:hover” y el “:active”, en la imagen, nuestro hover esta en el medio, de ahí la palabra center

1
2
3

body#menu-hover-hover ul#menu li a.skyandstars {
background-position: top center;
}

Aqui tenemos los id de que colocamos en el body, vemos que la posicion de la imagen es superior, de ahí el “top”

Puedes agregar tantas imagenes al menu como quieras, solo cambia los id y no tendras problemas:

1
2
3
4
5

<ul id="menu">
<li><a href="menu-hover-hover.html" class="skyandstars">skyandstars.net</a></li>
<li><a href="about.html" class="about">about</a></li>
<li><a href="tutoriales.html" class="tutoriales">tutoriales</a></li>
</ul>
clic aqui para ver un ejemplo

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166

Quizas alguna de estas entradas te pueda interesar

4 Comentarios en "Menu con 3 estados"

  1. xCanibalx

    19 mayo 2010

    Respuesta

    hola men esto esta rebueno, tengo dudas espero que me puedes ayudar, quiero un menu con hover de imagenes como este,pero como hago para poner varias imagenes en el mismo menu, que cada unba tenga un link deferente, paresidos a los menus de myspace de bandas musicales, quiero alg0o como esto, http://www.myspace.com/avengedsevenfold, ahi podras ver los menus, espero respuesta saludos

  2. xCanibalx

    19 mayo 2010

    Respuesta

    gracias

  3. fragiletension

    30 junio 2010

    Respuesta

    Hola!! Bueno, con imagenes lo tengo claro, pero ¿cómo puedo hacerlo con alguna palabra o frase? por ejemplo, si quiero que en mi web, cuando pase el raton por encima de esa palabra, aparezca resaltada con un fondo de otro color, o que cambie de color.. espero haberme explicado bien.
    Espero que me puedas ayudar. Gracias :)

    • Mijael

      30 junio 2010

      Respuesta

      Eso lo logras con CSS, por ejemplo si quieres que el color de fondo sea otro haces algo como:


      a.hover {
      background: #000000;
      }

      En ese caso el color de fondo sera negro

      Si quieres que el texto cambie de color debes hacer algo como:


      a.hover {
      background: #ffffff;
      }

      En ese caso las letras van a cambiar a color blanco, de todas formas te aconsejo que leas un poquito de CSS para que estes mas claro. Saludos

Deja un Comentario

Nombre (Requerido)

Email (Requerido pero no publicado)

Web

Comentario (Requerido)

*Tu E-mail es usado para relacionarlo con tu cuenta en Gravatar