Menu à trois états de la CMS

Menu à trois états de la CMS

Sur la base de la leçon précédente , j'ai décidé de créer ce tutoriel pour expliquer comment faire un menu avec tous de la loi, vous pouvez l'utiliser pour n'importe quelle page php que vous avez, et même pour tout CMS en particulier le célèbre wordpress.

Voir la démo

Outils

1 - L'image de chaque section coupée menu.

2 - Les images seront utilisées dans la propriété hover.

3 - Programme de HTML (Dreamweaver, par exemple).

4 - Quelques connaissances en CSS, HTML et PHP.

Structure HTML

Tout d'abord il faut ouvrir une nouvelle page PHP et rendre la structure HTML de notre menu, que nous allons créer des listes ordonnées: 

  1
 2
 3
 4
 5
 6

 "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"> <! - Menu Démarrer - <li> classe <a> href = "index" "index.php"> Accueil </ a> </ li> <li> une classe = "submit" href = "enviar.php"> Envoyer </ a> </ li> <a <li> classe href = "contact" "contacto.php"> Contact </ a> </ li> <li "resources" = classe <a href => "recursos.php"> Ressources </ a> </ li> </ ul> <! - Fin Menu ->

Maintenant, nous ajoutons un id à l'<ul> tag (première ligne), puis on ajoute une classe à chaque <a> étiquette (un différent pour chaque lien), nous allons donc avoir un indice, un e-mail, un contact une ressource.

C'est assez pour avoir la structure HTML de notre menu, enregistrer la page index.php et aller avec le style.

Ajout de style

Ouvrez une nouvelle page CSS.

css-menu

Nous le garder comme style.css et renvoyé à la page PHP de lien vers le style .

Nous avons commencé notre chemin à l'élément "*" qui, comme expliqué dans le tutoriel vidéo sur comment faire un thème wordpress à partir de zéro, est utilisé pour ajouter des fonctionnalités différentes à tous les éléments, de sorte que chaque propriété que vous ajouter l'astérisque, il sera prises par tous les éléments présents dans notre site, nous allons simplement ajouter de marge et padding: 

  1
 2
 3
 4

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

Nous continuons avec le corps, nous allons placer l'image de fond suivants pour notre site est esthétiquement bien:

et est ainsi le corps dans notre css: 

  1
 2
 3
 4
 5

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

Bon, maintenant si nous commençons à donner du style à notre menu, tout d'abord à l'id "menu" 

  1
 2
 3
 4

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

Il a juste pris hors des points au début de chaque élément dans la liste (ligne 2) et la gamme supérieure pour le bg ubircarlo paire (ligne 3).

Nous continuons avec l'élément «li», que nous allons seulement ajouter la propriété "display: inline" qui sera situé à côté de l'autre. 

  1
 2
 3

  li Menu # (
 inline ; display: inline;
 )

Maintenant il est temps de modifier l'élément "a", il aura les propriétés suivantes. 

  1
 2
 3
 4
 5
 6
 7
 8

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

La largeur et la hauteur de chaque image (lignes 3 et 4 respectivement), la propriété float: left être situé à un à la droite du tiret autre texte pour supprimer le texte qui se trouve dans l'étiquette et <a> marge de gauche pour séparer le menu un peu les uns les autres.

Nous avons maintenant utilisé dans toutes les classes «a». Nous avons donc à gauche. 

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

 { 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. Soumettre (background: url (images / enviar.png) no-repeat;) # menu li a. Contact (background: url (images / contacto.png) no-repeat;) # menu li ressources a. (background: url (images / recursos.png) no-repeat;)

il suffit d'ajouter le fond à chaque élément.

poursuivre le vol stationnaire: de chaque image pour changer ca quand la souris sur eux. 

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

 :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. Envoyer: 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. Ressources: hover (background: url (images / ressources-hover.png) n -repeat;)

Ready, il suffit d'ajouter "hover" à la fin de chaque élément et changer l'image de chacun.

Avec ce qui a été fait jusqu'à présent tout va disposer de l'option de passer la souris sur l'image. C'est là que PHP entre en jeu, comme nous le faisons de sorte qu'il a marqué la section du menu, où sommes-nous?, Nous le faisons simplement en ajoutant une pièce d'identité à l'organisme.

Par exemple: 

  1

  "enviar" > id = <body "post">

Si vous ne pouvez utiliser ce menu dans wordpress ou tout autre CMS id il suffit d'ajouter un autre corps de chaque page et passer à la prochaine étape ci-dessous CSS, vous auriez votre corps comme ceci:

Fichier: index.php

corps: 

  1

  "index" > id = <body "index">

fichier: enviar.php

corps: 

  1

  "enviar" > id = <body "post">

fichier: contacto.php

corps: 

  1

  "contacto" > id = <body "contact">

fichier: recursos.php

corps: 

  1
 2

  ]
 "recursos" > id = <body "resources">

Comme je l'ai déjà dit, si vous effectuez cette opération manuellement, trouver le css que cette nouvelle section ci-dessous dans ce tutoriel.

Si vous utilisez ce menu dans WordPress, nous aurons un problème, comment pouvons-nous ajouter un id à chaque corps différemment si le menu est dans un fichier appelé "header.php", c'est à dire l'en-tête même fichier en tant que pour l'envoi et la page d'accueil de contact, puis on ajoute le code PHP suivant. nos pages.

Avant de nous écrire <body> le texte suivant: 

  1
 2
 3
 4
 5
 6
 7

 = $_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: "par défaut"?>

Je vais vous expliquer ce que chaque ligne:

1 - Ouvrir le code php

2 - Amener l'URL dans lequel nous sommes (rappelez-vous que l'URL WordPress est davantage utilisé dans quelque chose comme "http://www.tublog/tu-pagina/).

3 - Où déposer une barre oblique "/" sera remplacé par n'importe quoi! ».

4 - Où aller quelques-uns. "Php", sera remplacé par quelque chose!.

5 - Où aller? S = ", sera remplacé par quelque chose!.

6 - Il retourne le résultat.

7 - Fermer balise PHP.

Donc, ce que nous faisons ici est l'url et supprimer toutes ces choses qui ne nous servent pour nos id.

Maintenant, nous allons à notre corps et nous ajouterons: 

  1

  "<?php echo $pagina ?>" > <Conseil d'id = "<? Php echo $ page?>>

Prêt! le corps prendra l'ID de la page où nous sommes.

Nous passons maintenant à notre id ajouter du style à l'organisme.

Ajouter le texte suivant. 

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

 { 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 ; } # # indice corps menu li a. index (background: url (images / home-hover.png) no-repeat;) corps du message # # menu li a. présenter (background: url (images / submit-hover.png) n -repeat;) corps de contact # # menu li a. contact (background: url (images / contact-hover.png) no-repeat;) corps # # li menu d'une ressource. ressources (background: url (images / ressources-stationnaire . png) no-repeat;)

Ready, c'est ce que nous dit, c'est que quand le corps a une de ces id (index, envoyer, contact, ressources), fera la «classe» de prendre l'image du vol stationnaire.

Prêt! Nous avons terminé notre menu à la fois WordPress comme CMS ou n'importe quelle autre page. Php, ici-bas où je laisse les fichiers zip sont tous final.

Télécharger le résultat de ce tutoriel ICI

Michael est le créateur et rédacteur en chef de skyandstars.net qui publie des guides et des tutoriels pour WordPress, CuteNews, PHP, HTML et plus encore. Êtes un étudiant en cours.

Mijael166

Peut-être une de ces entrées peuvent vous intéresser

7 réponses à "Menu de trois États à la CMS

  1. Isa

    27 avril 2009

    Réponse

    Je suis un peu confus, que je vois mes menus comme je le fais avec Dreamweaver, et certainement plus facile: S

    Allez a élevé le niveau du tutoriel Michael! Je vous félicite:)

  2. Michael

    28 avril 2009

    Réponse

    Haha ... ouais est essentiellement le changement de vues .. mais l'effet qu'il voulait souligner, c'est que la page est mise en évidence dans ces .... HACR wordpress dificl parce que le même en-tête qui fonctionne pour toutes les pages ... entoncs ... parce que avec php cela ... un baiser = ISA)

  3. Isa

    29 avril 2009

    Réponse

    Ahm va! esque la première fois que j'ai vu ne rien laisser en surbrillance lorsque vous cliquez sur une autre page, pourquoi le nez. Maintenant, si je vois les choses différemment, en fait, je me suis parfois demandé watts car il ouais ouais, j'aime bien ce tutoriel, une autre à la liste des lois que j'ai à faire, parce que mon site peut servir de droit?

  4. Michael

    30 avril 2009

    Réponse

    Bien sûr: p suffit de le faire à partir de l'id ajouté style à l'organisme:) ... ou si vous voulez placer automatiquement le corps, le faire avec php ... mais bon .. est à votre goût ... Un beso!

  5. Isa

    30 avril 2009

    Réponse

    ok! hehe

  6. graciebird

    30 avril 2009

    Réponse

    Très bon tuto va l'utiliser la prochaine fois que vous modifiez la version. Merci. Bien sûr, laisser un message sur le forum avec beaucoup de désespoir, l'espoir peut m'aider. Grâce au site Web m'a aidé beaucoup.

  7. Fran

    22 juin 2009

    Réponse

    que tuto bien, très utile, très bien expliqué, et les fichiers finaux. est très apprécié

Laissez un commentaire

Nom (requis)

Email (requis mais non publié)

Web

Commentaire (Requis)

* Votre adresse e-mail est utilisée pour le relier à votre compte Gravatar