Menu with three states to 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 for 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 will be used in hover property.

3 - Programme 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 = "submit" 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 every label <a> (a different one for each link), so we will have an index, an email, a contact a 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

Open a new page css.

We keep it 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 video tutorial on how to make a wordpress theme from scratch, is used to add different features to all elements, so each property you add the asterisk, it will be taken by all the elements present in our site, we'll just add margin and padding:

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

We continue with the body, we will place the following background image for our website is 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 # 333 333; font-size: 12px; font-family: Arial, Helvetica, Sans-serif;)

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

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

He just took off points to the beginning of each item in the list (Line 2) and upper range for the pair 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's 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 to the right of other text-indent to delete text that is inside the label <a> and left margin to separate the menu a bit each other.

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

  { # Menu li a. Index (
 url ( imagenes/home.png ) no-repeat ; background: url (images / home.png) no-repeat;
 )
 { # Menu li a. Submit (
 url ( imagenes/enviar.png ) no-repeat ; background: url (images / enviar.png) no-repeat;
 )
 { # Menu li a. Contact (
 url ( imagenes/contacto.png ) no-repeat ; background: url (images / contacto.png) no-repeat;
 )
 { # Menu li a. Resources (
 url ( imagenes/recursos.png ) no-repeat ; 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. Send: hover (background: url (images / submit-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;)

Ready, 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 that it marked the section of the menu where we are?, We do so simply by adding an id to the body.

For example:

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

If you will not use this menu in wordpress or any other CMS id just add a different body of each page and jump to the next step below css that, you would have your body 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 css that this new section below 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 for sending and home page to contact, then we add the following php code. our pages.

<body> Before we write the following:

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

I'll explain what each line:

1 - Open the php code

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

3 - Where to leave a 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 we go to our body and we'll add:

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

Ready! the body will take the ID of the page where we are.

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. submit (background: url (images / submit-hover.png) No -repeat;) body # contact # menu li a. contact (background: url (images / contact-hover.png) no-repeat;) # body # menu li a resource. resources (background: url (images / resources-hover . png) no-repeat;)

Ready, that is what tells us is that when the body has any of these id (index, send, contact, resources), will make the "class" take the image of the hover.

Ready! We finished our menu both WordPress as CMS or any other page. php, down here where I leave the zip files are all final.

DOWNLOAD THE RESULT OF THIS TUTORIAL HERE

Michael is the creator and editor of skyandstars.net which publishes guides and tutorials for WordPress, CuteNews, PHP, HTML and more. Are a current college student.

Mijael166

Maybe one of these entries may interest you

7 Responses to "Menu with three states to CMS

Isa
April 27, 2009
Response
I'm a little confused, that I see my menus as I do with dreamweaver, and certainly are easier: S
Go and has raised the level of the tutorial Michael! I congratulate you:)
Michael
April 28, 2009
Response
Haha yeah ... is basically changing pictures .. but the effect he wanted to emphasize is that the page is highlighted in these .... HACR dificl wordpress is because the same header that works for all pages ... entoncs ... because with php does this ... a kiss isa =)
Isa
April 29, 2009
Response
Ahm goes! esque the first time I saw did not leave anything highlighted when you click on another page, why nose. Now if I see it differently, in fact I have sometimes wondered watts as it would, yeah yeah, I like this tutorial, another one to the list of statutes that I have to do, because my site can serve right?
Michael
April 30, 2009
Response
Of course: P just have to do it from the id added style to the body:) ... or if you want to automatically put the body, do it with php ... but well .. is to your liking ... Un beso!
Isa
April 30, 2009
Response
ok! hehe
graciebird
April 30, 2009
Response
Very good tuto will use it next time you change the version. Thank you. Of course leave a message on the forum with a lot of despair, hope can help me. Through the website has helped me so much.
fran
June 22nd, 2009
Response
that good tuto, very useful, very well explained, and the final files. really is appreciated