Menu con tre stati per CMS

Sulla base del precedente tutorial ho deciso di creare questo tutorial per spiegare come fare un menu con tutta la legge, si può usare a qualsiasi pagina php che hai, e anche per qualsiasi CMS in particolare il famoso wordpress.

Guarda le Demo

Strumenti

1 - L'immagine di ogni menu taglio di sezione.

2 - Le immagini devono essere utilizzati in proprietà hover.

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

4 - Alcuni conoscenza 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 menu, che creeremo liste ordinate:

 "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 -> <a <li> class = "index" href = "index.php"> Home </ a> </ li> <a class = "email" href = "enviar.php"> Invia </ a> </ li> <a <li> class = "contact" href = "contacto.php"> Contatto </ a> </ li <li> > <a class = "resources" href = "recursos.php"> Risorse </ a> </ li> </ UL> <! - Fine Menu ->

Ora, aggiungiamo un id al tag <ul> (prima linea), poi aggiungere una classe per ogni tag <a>, (uno diverso per ogni link), così avremo un indice, una e-mail, un contatto e una risorsa.

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

Aggiungere stile

Abbiamo aperto una nuova pagina CSS.

Salva con nome style.css e ritorna alla pagina PHP per collegamento al stile.

Abbiamo iniziato il nostro modo per l'elemento "*" che, come spiegato nel videotutorial come fare un tema wordpress da zero, viene utilizzato per aggiungere funzionalità diverse a tutti gli elementi, quindi, ogni proprietà che si aggiunge l'asterisco, sarà adottate da tutti gli elementi presenti nella nostra pagina, per non parlare aggiungere margine e padding:

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

Continuiamo con il corpo, abbiamo posto la seguente immagine di sfondo per le nostre pagine sono esteticamente anche:

e così è il corpo nel nostro CSS:

 : url ( imagenes/bg.png ) repeat-x #333333 ; font-size : 12px ; font-family : Arial , Helvetica , sans-serif ; } background (corpo: url (images / bg.png) repeat-x # 333333; font-size: 12px; 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: 15px;
 )

Solo prendiamo i punti all'inizio di ogni voce della lista (linea 2) e di fascia superiore per un par di ubircarlo BG (linea 3).

Continuiamo con l'elemento "li", che abbiamo solo aggiungere la proprietà "display: inline" per essere collocate una accanto all'altra.

  1
 2
 3

  # Menu li (
 inline ; display: inline;
 )

Ora è il momento di modificare l'elemento "a", ci vorranno 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 ogni immagine (linee 3 e 4, rispettivamente), la proprietà float: left essere collocati uno a destra di un altro testo-trattino, per eliminare il testo che si trova all'interno del tag <a>, e margine sinistro per separare il menu un po 'a vicenda.

Ora utilizzati in ogni classe con l'etichetta "a". quindi abbiamo lasciato.

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

semplicemente aggiungere il contesto in cui ogni elemento.

continuare con l': hover di ogni immagine a circa cambiare 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 li a. email: hover (background: url (images / post-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;)

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

Con quanto è stato fatto finora solo avrà a disposizione la possibilità di passare il mouse sopra l'immagine. Questo è PHP, dove entra in gioco, come facciamo in modo che è segnata la sezione del menu dove siamo?, Lo facciamo con la semplice aggiunta di un ID per il corpo.

per esempio:

1	"enviar" > <body Id = "post">

Quando non si utilizza questo menu in wordpress o di qualsiasi altro CMS è sufficiente aggiungere un ID diverso dal corpo di ogni pagina e passare alla fase successiva di sotto di questo css, hai lasciato il tuo corpo qualcosa come questo:

File: index.php

Corpo:

1	"index" > <body Id = "index">

file: enviar.php

Corpo:

1	"enviar" > <body Id = "post">

file: contacto.php

Corpo:

1	"contacto" > <body Id = "contact">

file: recursos.php

Corpo:

1 2	] "recursos" > <body Id = "resources">

Come ho detto prima, se si esegue questa operazione manualmente, trovare la nuova sezione di seguito css che 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", vale a dire la stessa intestazione file di inviare alla home page di contatto, poi aggiungere il seguente codice php. alle 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 $ page = $ _SERVER [ 'REQUEST_URI'], $ page = str_replace ( "/", "", $ page) $ page = str_replace ( ". Php", "", $ page) $ page = str_replace ( "? s =", "", $ page) $ page = $ page: $ pagina: 'default'?>

Mi spiego quello che ogni riga:

1 - Aprire il codice php

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

3 - Dove andare slash "/", sarà sostituita da niente! "".

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

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

6 - E 'restituisce il risultato.

7 - tag di chiusura PHP.

Quindi quello che facciamo è prendere l'url e rimuovere tutte quelle cose che non servono a noi per la nostra identità.

Ora il nostro corpo e ci aggiungere le seguenti:

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

Pronto! l'organismo avrà l'ID della pagina in cui ci troviamo.

Passiamo ora al nostro id aggiungere stile al corpo.

Aggiungere il seguente.

  { index # corpo # menu li a. index (
 url ( imagenes/home-hover.png ) no-repeat ; background: url (images / home-hover.png) no-repeat;
 )
 { # # email corpo menu li invia a. (
 url ( imagenes/enviar-hover.png ) no-repeat ; background: url (images / post-hover.png) no-repeat;
 )
 { li corpo # # contatto menu. contatto (
 url ( imagenes/contacto-hover.png ) no-repeat ; background: url (images / contact-hover.png) no-repeat;
 )
 { risorse # corpo # menu li risorse A. (
 url ( imagenes/recursos-hover.png ) no-repeat ; background: url (images / risorse-hover.png) no-repeat;
 )

Di solito, questo è quello che dice è che, quando il corpo è una di quelle ID (indice, email, contatti, risorse), farà la "classe" prendere l'immagine del passaggio del mouse.

Intelligente! Quindi abbiamo completato il nostro menù per Wordpress come CMS o qualsiasi altra pagina. PHP, qui lascio la cerniera verso il basso, dove tutti i file finale.

Scaricare il risultato di questo tutorial QUI

Michael è il creatore e skyandstars.net editore che pubblica guide e tutorial su Wordpress, cutenews, PHP, HTML e altro ancora. Acutalmente studente di college.

Mijael166

Forse una di queste voci possono interessarti

7 Commenti su "Menu con tre Stati di CMS"

Isa
27 aprile 2009
Risposta
Sono un po 'confuso, che vedo il mio menu, come faccio con Dreamweaver, e certamente sono più facili: S
Va 'e ha innalzato il livello di Michael tutorial! congratulazioni:)
Michael
28 aprile 2009
Risposta
Jajaja si ... è fondamentalmente cambiando le immagini .. ma l'effetto che volevano sottolineare è che la pagina venga segnato in questi .... Dificl HACR in wordpress è che funziona la stessa intestazione per tutte le pagine ... ... poi con entoncs PHP è fa questo ... un bacio isa =)
Isa
29 aprile 2009
Risposta
AHM fiera! esque la prima volta che ho visto tutto ciò che non ha evidenziato quando si punge su un'altra pagina, perché il naso. Ora, se lo vedo in modo diverso, in realtà volte mi sono chiesto watt come sarebbe se se mi piace questo tutorial, un altro per la lista di statuti che faccio, perché il mio sito può servire no?
Michael
30 aprile 2009
Risposta
Ovviamente: P basta farlo dallo stile di aggiungere l'id al corpo:) ... o se si desidera inserire automaticamente il corpo, farlo con php ... ma buoni .. è di vostro gradimento ... Un beso!
Isa
30 aprile 2009
Risposta
ok! jeje
graciebird
30 aprile 2009
Risposta

Tuto Very good userà la prossima volta si cambia la versione. Grazie. Ovviamente lasciare un messaggio sul forum mi aiuta un sacco di speranza disperazione. Attraverso il web mi ha aiutato tanto.
fran
22 giugno 2009
Risposta

que buen tuto, molto utile, molto ben spiegato, e con il file finale. è davvero apprezzato