Menu con tre stati di CMS

Sulla base del precedente tutorial , ho deciso di creare questo tutorial per spiegare come fare un menu con tutte le leggi, si può utilizzare per qualsiasi pagina PHP che hai, e anche per ogni particolare il CMS wordpress famosi.

Guarda le Demo

Strumenti

1 - L'immagine di ciascun menu taglio sezione.

2 - Le immagini saranno utilizzate in proprietà hover.

3 - Programma per l'HTML (ad esempio Dreamweaver).

4 - Alcune conoscenze di: CSS, HTML e PHP.

Struttura HTML

Prima di tutto abbiamo bisogno di aprire una nuova pagina PHP e rendere la struttura HTML del nostro menù, che andremo a creare elenchi ordinati:

 "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--> id = <ul "menu"> <! - Start Menu -> classe <li> = href = "index" "index.php"> Home </ a> </ li> <li> <una classe = "href presentare" = "enviar.php"> Invia </ a> </ li> <a <li> class = href = "contact" "contacto.php"> Contatto </ a> </ li> <li = classe <a "resources"> href = "recursos.php"> Resources </ a> </ li> </ ul> <! - Fine Menu ->

Ora, si aggiunge un id per il tag <ul> (prima linea), poi aggiungiamo una classe per ogni <a> etichetta (uno diverso per ogni link), così avremo un indice, un email, un contatto una risorsa.

Questo è sufficiente per avere la struttura html del nostro menu, salvare la pagina come index.php e vai con lo stile.

Aggiunta di stile

Aprire una nuova pagina css.

Noi tenerlo come style.css e torna alla pagina PHP per collegare allo stile .

Abbiamo iniziato la nostra strada per l'elemento "*" che, come spiegato nel video tutorial su come fare un tema wordpress da zero, viene utilizzato per aggiungere funzionalità a tutti i diversi elementi, per cui ciascuna proprietà si aggiunge l'asterisco, sarà adottate da tutti gli elementi presenti nel nostro sito, dobbiamo solo aggiungere margine e padding:

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

Continuiamo con il corpo, si porrà la seguente immagine di sfondo per il nostro sito è esteticamente anche:

e così è il corpo nel nostro css:

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

Okay, ora se cominciamo a dare stile al nostro menu, prima di tutto l'id "menu"

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

Ha appena tolto i punti all'inizio di ciascuna voce nella lista (linea 2) e la gamma superiore per il bg ubircarlo coppia (linea 3).

Continuiamo con l'elemento "LI", da noi solo aggiungere la proprietà "display: inline" per essere collocate una accanto all'altra.

  1
 2
 3

  li Menu # (
 inline ; display: inline;
 )

Ora è il momento di modificare l'elemento "a", prenderà le seguenti proprietà.

 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;)

La larghezza e l'altezza di ciascuna immagine (linee 3 e 4 rispettivamente), la proprietà float: left per essere collocata una a il diritto di altri text-indent per eliminare il testo che si trova all'interno della <a> etichetta e margine sinistro di separare il menu un po 'a vicenda.

Noi oggi utilizzata in ogni classe con l'etichetta "A". quindi abbiamo lasciato.

  { # Li menu 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;
 )
 { # Li menu a. contatto (
 url ( imagenes/contacto.png ) no-repeat ; background: url (images / contacto.png) no-repeat;
 )
 { # Menu li a. risorse (
 url ( imagenes/recursos.png ) no-repeat ; background: url (images / recursos.png) no-repeat;
 )

basta aggiungere lo sfondo di ogni elemento.

continuare con l': hover di ogni immagine di cambiare ca quando il mouse su di loro.

 :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. Indice: hover (background: url (images / home-hover.png) no-repeat;) # menu Invia a. li: hover (background: url (images / presentare-hover.png) no-repeat ;) # menu li a. Contatto: hover (background: url (images / contact-hover.png) no-repeat;) # menu li a. risorse: hover (background: url (images / risorse-hover.png) n. -repeat;)

Pronto, è sufficiente aggiungere "hover" alla fine di ogni elemento e modificare l'immagine di ciascuno.

Con quello che è stato fatto finora solo andando di avere a disposizione la possibilità di passare il mouse sopra l'immagine. Qui è dove entra in gioco PHP, come facciamo in modo che esso ha segnato la sezione del menu dove siamo?, Lo facciamo semplicemente aggiungendo un id al corpo.

Per esempio:

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

Se non si utilizza questo menu in wordpress o qualsiasi altro CMS id basta aggiungere un altro corpo di ogni pagina e passare alla fase successiva di sotto css che, volete che il vostro corpo in questo modo:

File: index.php

corpo:

1	"index" > id = <BODY "index">

file: enviar.php

corpo:

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

file: contacto.php

corpo:

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

file: recursos.php

corpo:

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

Come ho detto prima, se si esegue questa operazione manualmente, trovare il CSS che questa nuova sezione di seguito in questo tutorial.

Se si utilizza questo menu in WordPress, avremo un problema, come possiamo aggiungere un id per ogni corpo in modo diverso se il menu è in un file chiamato "header.php", cioè la stessa intestazione di file come per l'invio e la home page a contatto, poi aggiungere il seguente codice php. le nostre pagine.

<body> Prima di scrivere la seguente:

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

Ti spiego quello che ogni riga:

1 - Aprire il codice PHP

2 - Portare l'URL in cui siamo (ricordiamo che la url wordpress è utilizzato più a qualcosa tipo "http://www.tublog/tu-pagina/).

3 - Che cosa fare con uno slash "/" sarà sostituito da niente! "."

4 - Dove andare un po '. "PHP", sarà sostituita da niente!.

5 - Dove andare? S = ", sarà sostituita da niente!.

6 - Si restituisce il risultato.

7 - Chiudere tag PHP.

Quindi, ciò che facciamo è prendere l'url e rimuovere tutte quelle cose che non ci servono per la nostra id.

Ora andiamo al nostro corpo e noi aggiungiamo:

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

Pronti! il corpo prenderà l'ID della pagina in cui siamo.

Passiamo ora al nostro stile id aggiungere al corpo.

Aggiungere il seguente.

  { corpo # indice # menu li a. indice (
 url ( imagenes/home-hover.png ) no-repeat ; background: url (images / home-hover.png) no-repeat;
 )
 { corpo e-mail # # menu li a. presentare (
 url ( imagenes/enviar-hover.png ) no-repeat ; background: url (images / presentare-hover.png) no-repeat;
 )
 { # # contatto corpo menu li a. contatto (
 url ( imagenes/contacto-hover.png ) no-repeat ; background: url (images / contact-hover.png) no-repeat;
 )
 { corpo # # li menu una risorsa. (risorse
 url ( imagenes/recursos-hover.png ) no-repeat ; background: url (images / risorse-hover.png) no-repeat;
 )

Ready, questo è ciò che ci dice è che quando il corpo è uno di questi id (indice, inviare, contatto, risorse), renderà la "classe" prendere l'immagine del passaggio del mouse.

Pronti! Abbiamo finito il nostro menu sia Wordpress come CMS o qualsiasi altra pagina. Php, qui dove mi lasciare i file zip sono tutte finali.

Scaricare il risultato di questo tutorial QUI

Michael è il creatore ed editore di skyandstars.net che pubblica guide e tutorial per WordPress, CuteNews, PHP, HTML e altro ancora. Sono uno studente di college corrente.

Mijael166

Forse una di queste voci possono interessarvi

7 Risposte a "Menu a tre stati di CMS

Isa
27 aprile 2009
Risposta
Sono un po 'confusa, che vedo il mio menu come faccio con dreamweaver, e certamente sono più facili: S
Va 'e ha alzato il livello del tutorial Michael! Mi congratulo con lei:)
Michael
28 Aprile 2009
Risposta
yeah Haha ... è fondamentalmente cambiando le immagini .. ma l'effetto che voleva sottolineare è che la pagina è evidenziato in questi .... HACR wordpress dificl è perché la stessa intestazione che funziona per tutte le pagine ... entoncs ... perché con PHP fa questo ... un bacio isa =)
Isa
29 Aprile, 2009
Risposta
Ahm va! esque la prima volta che ho visto non ha lasciato nulla evidenziata quando si fa clic su un'altra pagina, perché il naso. Ora, se la vedo in modo diverso, in effetti volte mi sono chiesto come sarebbe watt, yeah yeah, mi piace questo tutorial, un altro per la lista degli statuti che ho da fare, perché il mio sito può servire giusto?
Michael
30 aprile 2009
Risposta
Certo: P basta farlo da l'id aggiunto stile per il corpo:) ... o se volete mettere automaticamente il corpo farlo con php ... ma bene .. è di vostro gradimento ... Un beso!
Isa
30 aprile 2009
Risposta
ok! hehe
graciebird
30 aprile 2009
Risposta

tuto molto buono lo userà la prossima volta si cambia la versione. Grazie. Naturalmente lasciare un messaggio sul forum con un sacco di disperazione, di speranza mi può aiutare. Attraverso il sito mi ha aiutato tanto.
fran
22 giugno 2009
Risposta

che tuto bene, molto utile, molto ben spiegato, e il file finale. veramente è apprezzato