Menu with three states for CMS

Based on the previous tutorial I decided to create this tutorial to explain how to make a menu with all of the law, you can use it to any php page you have, and even for any CMS especially the famous wordpress.

View Demo

Tools

1 - The image of each section cut menu.

2 - The images are to be used in hover property.

3 - Program for HTML (eg dreamweaver).

4 - Some knowledge of: CSS, HTML and PHP.

HTML Structure

First of all we need to open a new PHP page and make the HTML structure of our menu, which we will create ordered lists:

 "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--> <Ul id = "menu"> <! - Start Menu -> <li> <a class = "index" href = "index.php"> Home </ a> </ li> <li> <a class = "email" href = "enviar.php"> Send </ a> </ li> <li> <a class = "contact" href = "contacto.php"> Contact </ a> </ li> <li > <a class = "resources" href = "recursos.php"> Resources </ a> </ li> </ ul> <! - End Menu ->

Now, we add an id to the tag <ul> (first line), then we add a class to each tag <a>, (a different one on each link), so we will have one index, one email, one contact and one resource.

That's enough to have the html structure of our menu, save the page as index.php and go with the style.

Adding style

We opened a new page css.

The save as style.css and returned to the PHP page to link to the style.

We started our way to the element "*" which, as explained in the videotutorial how to make a wordpress theme from scratch, is used to add different features to all elements, thus, each property that you add the asterisk, it will be taken by all the elements present in our page, let alone add margin and padding:

 : 0 ; padding : 0 ; } * (Margin: 0; padding: 0;)

We continue with the body, we place the following background image for our pages are aesthetically well:

and so is the body in our css:

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

Okay, now if we start to give style to our menu, first of all to the id "menu"

  # menu (
 none ; list-style: none;
 15px ; margin-top: 15px;
 )

Only we take the points at the beginning of each item in the list (line 2) and upper range for a par of ubircarlo bg (line 3).

We continue with the element "li", which we will only add the property "display: inline" to be located next to each other.

  1
 2
 3

  # menu li (
 inline ; display: inline;
 )

Now it is time to edit the item "a", it will take the following properties.

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

The width and height of each picture (lines 3 and 4 respectively), the property float: left to be located one on the right of other text-indent to eliminate the text that is inside the tag <a>, and left margin to separate the menu a bit each other.

We now used in every class labeled "a". so we have left.

 { 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 ; } # menu li a. index (background: url (images / home.png) no-repeat;) # menu li a. post (background: url (images / enviar.png) no-repeat;) # menu li a. contact (background: url (images / contacto.png) no-repeat;) # menu li a. resources (background: url (images / recursos.png) no-repeat;)

simply add the background to each element.

continue with the: hover of each image to ca change when mouse over them.

 :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 ; } # menu li a. index: hover (background: url (images / home-hover.png) no-repeat;) # menu li a. email: hover (background: url (images / post-hover.png) no-repeat ;) # menu li a. Contact: hover (background: url (images / contact-hover.png) no-repeat;) # menu li a. resources: hover (background: url (images / resources-hover.png) No -repeat;)

Usually, simply add "hover" at the end of each element and change the image of each.

With what has been done so far just going to have available the option of passing the mouse over the image. This is where PHP comes into play, as we do so it is marked the section of the menu where we are?, We do it by simply adding an id to the body.

for example:

1	"enviar" > <Body id = "post">

When not using this menu in wordpress or any other CMS just add an id different from the body of each page and jump to the next step below this css, you have left your body something like this:

File: index.php

body:

1	"index" > <Body id = "index">

file: enviar.php

body:

1	"enviar" > <Body id = "post">

file: contacto.php

body:

1	"contacto" > <Body id = "contact">

file: recursos.php

body:

1 2	] "recursos" > <Body id = "resources">

As I said before, if you do this manually, find the new section below css that in this tutorial.

If you are using this menu in WordPress, we'll have a problem, how do we add an id to each body differently if the menu is in one file called "header.php", ie the same header file as to send to the home page to contact, then we add the following php code. to our pages.

<body> Before we write the following:

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

I'll explain what each line:

1 - Open the php code

2 - Bring the URL at which we are (remember that wordpress url is used more in something like "http://www.tublog/tu-pagina/").

3 - Where to go any slash "/", will be replaced by anything! "".

4 - Where to go some. "Php", will be replaced by anything!.

5 - Where to go any? S = ", will be replaced by anything!.

6 - It returns the result.

7 - Close php tag.

So what we do is take the url and remove all those things that do not serve us for our id.

Now let our body and we'll add the following:

1	"<?php echo $pagina ?>" > <Body id = "<? Php echo $ page?>">

Ready! the body will take the ID of the page in which we find ourselves.

We turn now to our id add style to the body.

Add the following.

 { 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 ; } body # index # menu li a. index (background: url (images / home-hover.png) no-repeat;) body # email # menu li a. post (background: url (images / post-hover.png) No -repeat;) body # contact li # menu. contact (background: url (images / contact-hover.png) no-repeat;) body # resources # menu li a. resources (background: url (images / resources-hover . png) no-repeat;)

Usually, that's what it says is that when the body has one of those id (index, email, contact, resources), will make the "class" take the image of the hover.

Clever! Therefore we have completed our menu for Wordpress as CMS or any other page. php, here I leave the zip down where all the final files.

DOWNLOAD THE RESULT OF THIS TUTORIAL HERE

Michael is the creator and editor skyandstars.net which publishes guides and tutorials about WordPress, CuteNews, PHP, HTML and more. Acutalmente college student.

Mijael166

Maybe one of these entries may interest you

7 Comments on "Menu with three states to CMS"

Isa
April 27, 2009
Answer
I'm a little confused, that I see my menus like I do with dreamweaver, and certainly are easier: S
Go and has raised the level of the tutorials Michael! congratulations:)
Michael
April 28, 2009
Answer
Jajaja si ... is basically changing pictures .. but the effect they wanted to emphasize is that the page be marked in these .... Dificl HACR in wordpress is that it works the same header for all pages ... ... then with php entoncs is does this ... a kiss isa =)
Isa
April 29, 2009
Answer
Ahm fair! esque the first time I saw anything not highlighted when pricked out on another page, why nose. Now if I see it differently, in fact I have sometimes wondered watts as it would if if I like this tutorial, another for the list of statutes that I do, because my site can serve no?
Michael
April 30, 2009
Answer
Of course: P just have to do it from the style to add the id to the body:) ... or if you want to automatically put the body, do it with php ... but good .. is to your liking ... Un beso!
Isa
April 30, 2009
Answer

ok! jeje
graciebird
April 30, 2009
Answer

Very good tuto will use it next time you change the version. Thank you. Of course leave a message on the forum help me a lot of despair hope. Through the web has helped me so much.
fran
June 22, 2009
Answer

que buen tuto, very useful, very well explained, and with the final files. really is appreciated