Menu con tres estados para CMS

Menu con tres estados para CMS

Tomando como base el tutorial anterior he decidido crear este tutorial para explicar como hacer un menu con todas las de la ley, puedes usarlo para cualquier pagina php que tengas, e incluso para cualquier CMS especialmente el famoso wordpress.

Ver Demo

Herramientas

1- La imagen del menu cortada en cada seccion.

2- Las imagenes que van a ser usadas en la propiedad hover.

3- Programa para HTML (Por ejemplo dreamweaver).

4- Algo de conocimiento en: CSS, HTML y PHP.

Estructura HTML

Primero que nada necesitamos abrir una nueva pagina PHP y hacer la estructura HTML de nuestro menu, la cual vamos a crear con listas ordenadas:

1
2
3
4
5
6

<ul id="menu"><!--Comienza Menu-->
<li><a class="index" href="index.php">Home</a></li>
<li><a class="enviar" href="enviar.php">Enviar</a></li>
<li><a class="contacto" href="contacto.php">Contacto</a></li>
<li><a class="recursos" href="recursos.php">Recursos</a></li>
</ul><!--Termina Menu-->

Veamos, le agregamos un id a la etiqueta <ul> (primera linea), despues le agregamos un class a cada etiqueta <a>, (uno diferente a cada link), asi vamos a tener uno index, uno enviar, uno contacto y uno recursos.

Eso es suficiente para tener la estructura html de nuestro menu, guardamos la pagina como index.php y vamos con el estilo.

Agregando estilo

Abrimos una nueva pagina css.

css-menu

La guardamos como style.css y regresamos a la pagina PHP para linkearla con el estilo.

Comenzamos nuestro estilo con el elemento “*” que, como explique en el videotutorial de como hacer un tema para wordpress desde cero, es usado para agregar diferentes caracteristicas  a TODOS los elementos, asi, cada propiedad que le agreguemos al asterisco, va a ser tomado por todos los elementos presentes en nuestra pagina, vamos a agregarle solo margen y padding:

1
2
3
4

* {
margin: 0;
padding: 0;
}

Seguimos con el body, vamos a colocarle la siguiente imagen de fondo para que nuestra pagina quede esteticamente bien:

y asi queda el body en nuestro css:

1
2
3
4
5

body {
background: url(imagenes/bg.png) repeat-x #333333;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}

Muy bien, ahora si comenzamos a darle estilo propiamente a nuestro menu, primero que nada a el id “menu”

1
2
3
4

#menu {
list-style: none;
margin-top: 15px;
}

Solo le quitamos los puntos al principio del cada elemento de la lista (linea 2) y margen superior para ubircarlo a la par del bg (linea 3).

Seguimos con el elemento “li“, al cual solo vamos a agregarle la propiedad “display: inline” para que se ubique uno al lado del otro.

1
2
3

#menu li {
display: inline;
}

Ahora toca modificar el elemento “a”, éste va a llevar las siguientes propiedades.

1
2
3
4
5
6
7
8

#menu li a {
display: block;
width: 60px;
height: 102px;
float: left;
text-indent: -5000px;
margin-left: 2px;
}

El ancho y el alto de cada imagen (lineas 3 y 4 respectivamente), la propiedad float: left para que se ubiquen uno a la derecha del otro, text-indent para eliminar el texto que esta dentro de la etiqueta <a>, y margen izquierdo para separa un poco cada menu del otro.

Seguimos ahora con cada class usado en la etiqueta “a”. asi nos queda.

1
2
3
4
5
6
7
8
9
10
11
12

#menu li a.index {
background: url(imagenes/home.png) no-repeat;
}
#menu li a.enviar {
background: url(imagenes/enviar.png) no-repeat;
}
#menu li a.contacto {
background: url(imagenes/contacto.png) no-repeat;
}
#menu li a.recursos {
background: url(imagenes/recursos.png) no-repeat;
}

simplemente le agregamos el fondo a cada elemento.

seguimos con los :hover de cada imagen para ca cambien al pasar el mouse sobre ellas.

1
2
3
4
5
6
7
8
9
10
11
12

#menu li a.index:hover {
background: url(imagenes/home-hover.png) no-repeat;
}
#menu li a.enviar:hover {
background: url(imagenes/enviar-hover.png) no-repeat;
}
#menu li a.contacto:hover {
background: url(imagenes/contacto-hover.png) no-repeat;
}
#menu li a.recursos:hover {
background: url(imagenes/recursos-hover.png) no-repeat;
}

Listo, simplemente agregamos “:hover” al final de cada elemento y cambiamos la imagen de cada uno.

Con lo hecho hasta ahora simplemente vamos a tener disponible la opcion de al pasar el mouse sobre la imagen. Ahora es cuando entra en juego el PHP, como hacemos para que quede marcada la seccion del menu en la que estamos?, lo hacemos simplemente agregandole un id al body.

por ejemplo:

1

<body id="enviar">

Si no vas a usar este menu en wordpress o en cualquier otro CMS basta con agregarle  un id diferente al body de cada pagina y saltar al siguiente paso css que esta mas abajo, te quedaria tu body algo asi:

archivo: index.php

body:

1

<body id="index">

archivo: enviar.php

body:

1

<body id="enviar">

archivo: contacto.php

body:

1

<body id="contacto">

archivo: recursos.php

body:

1
2

]
<body id="recursos">

Como dije antes, si haces esto manualmente, busca la nueva seccion css que esta mas abajo en este tutorial.

Si vas a usar este menu en WordPress, vamos a tener un problema, ¿como hacemos para agregarle a cada body un id diferente si el menu esta en un solo archivo llamado “header.php”, es decir, es el mismo archivo header tanto para la pagina enviar como para home como para contacto, entonces vamos a agregar el siguiente codigo php. a nuestras paginas.

Antes del <body> vamos a escribir lo siguiente:

1
2
3
4
5
6
7

<?php
$pagina = $_SERVER['REQUEST_URI'];
$pagina = str_replace("/","", $pagina);
$pagina = str_replace(".php","", $pagina);
$pagina = str_replace("?s=","", $pagina);
$pagina = $pagina ? $pagina : 'default'
?>

Te explico para que sirve cada linea:

1- Abre el codigo php

2- Trae la URL en la que nos encontramos (recordaras que la url mas usada en wordpress es algo parecido a “http://www.tublog/tu-pagina/“).

3- Donde salga alguna barra “/“, va a ser remplazado por nada! “”.

4- Donde salga algun “.php”, va a ser remplazado por nada!.

5- Donde salga algun “?s=”, va a ser remplazado por nada!.

6- Nos devuelve el resultado obtenido.

7- Cierra etiqueta php.

Entonces, lo que hacemos es tomar la url y quitarle todas aquellas cosas que no nos sirven para nuestro id.

Ahora vamos a nuestro body y le vamos a agregar lo siguiente:

1

<body id="<?php echo $pagina ?>">

Listo!! el body va a tomar el ID de la pagina en la que nos encontremos.

Pasamos ahora a agregarle estilo a nuestro id del body.

Agreguemos lo siguiente.

1
2
3
4
5
6
7
8
9
10
11
12

body#index #menu li a.index {
background: url(imagenes/home-hover.png) no-repeat;
}
body#enviar #menu li a.enviar {
background: url(imagenes/enviar-hover.png) no-repeat;
}
body#contacto #menu li a.contacto {
background: url(imagenes/contacto-hover.png) no-repeat;
}
body#recursos #menu li a.recursos {
background: url(imagenes/recursos-hover.png) no-repeat;
}

Listo, eso lo que nos dice es que cuando el body tenga alguno de esos id (index, enviar, contacto, recursos), va a hacer que los “class” tomen la imagen del hover.

Listo! hemos terminado nuestro menu tanto para Wordpress como para cualquier otro CMS o pagina .php, aqui abajo te dejo el zip donde estan todos los archivos finales.

DESCARGA EL RESULTADO DE ESTE TUTORIAL AQUI

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

7 Comentarios en "Menu con tres estados para CMS"

  1. Isa

    27 Abril 2009

    Respuesta

    Estoy un poco confusa, esto yo lo veo igual a mis menús que hago con dreamweaver, y desde luego son más fáciles :S

    Vaya como ha subido el nivel de los tutoriales Mijael! te felicito :)

  2. Mijael

    28 Abril 2009

    Respuesta

    Jajaja si…es basicamente imagenes cambiantes..pero el efecto que queria resaltar es que se quede marcada la pagina en la que estas….en wordpress es dificl hacr eso porque un mismo header funciona para todas las paginas…entoncs…pues con php se logra esto…un beso isa =)

  3. Isa

    29 Abril 2009

    Respuesta

    Ahm vale! esque la primera vez que lo ví no salía resaltado nada cuando pinchaba en otra página, nose porqué. Ahora si lo veo diferente, de hecho vatias veces me he preguntado como se pondría eso, si si, me gusta este tutorial, otro más para la lista de tutos que tengo que hacer, porque para mi web puede servir ¿no?

  4. Mijael

    30 Abril 2009

    Respuesta

    Por supuesto :P solo tienes que hacerlo desde el estilo agregandole el id al body :)…o si quieres que se coloque automaticamente el body, hacerlo con php…pero bueno.. es a tu gusto…Un beso!!

  5. Isa

    30 Abril 2009

    Respuesta

    ok! jeje

  6. graciebird

    30 Abril 2009

    Respuesta

    Muy buen tuto lo usare le proxima vez que cambie de de version. Gracias. Por cierto deje un mensaje en el foro con mucha desesperacion espero me ayuden. Gracias la web me ha ayudado tanto.

  7. fran

    22 Junio 2009

    Respuesta

    que buen tuto, muy util, muy bien, explicado, y con los archivos finales¡¡¡. se agradece de verdad

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