Menu à trois états pour CMS

Menu à trois états pour CMS

Basé sur le didacticiel précédent, j'ai décidé de créer ce tutoriel pour expliquer comment faire un menu avec toutes de la loi, vous pouvez l'utiliser à n'importe quelle page PHP que vous avez, et même pour toute la CMS en particulier le wordpress célèbre.

Voir la démo

Outils

1 - L'image de chaque menu couper section.

2 - Les images doivent être utilisées dans la propriété hover.

3 - Programme pour le 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, qui nous permettra de 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--> <ul Id = "menu"> <! - Menu Démarrer -> <a class = <li> "index" href = "index.php"> Accueil </ a> </ li> <li> <a class = "email" href = "enviar.php"> Envoyer </ a> </ li> <li> <a class = "contact" href = "contacto.php"> Contact </ a> </ li <li> > class = "resources" <a href = "recursos.php"> Ressources </ a> </ li> </ ul> <! - Fin Menu ->

Maintenant, nous ajoutons un id à la balise <ul> (première ligne), puis on ajoute une catégorie à chaque balise <a>, (un différent sur chaque lien), nous aurons donc un seul indice, un e-mail, un contact et une ressource.

Ça suffit d'avoir la structure HTML de notre menu, enregistrez la page que index.php et aller avec le style.

Ajout de style

Nous avons ouvert une nouvelle page CSS.

css-menu

Enregistrer sous style.css et renvoyé à la page PHP pour lien vers le style.

Nous avons commencé notre chemin à l'élément "*" qui, comme expliqué dans le videotutorial comment faire un thème wordpress à partir de zéro, est utilisé pour ajouter des fonctionnalités différentes pour tous les éléments, ainsi, chaque propriété que vous ajoutez l'astérisque, il sera prise par tous les éléments présents dans notre page, et encore moins ajouter la marge et padding: 

  1
 2
 3
 4

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

Nous continuons avec le corps, nous plaçons l'image de fond ci-après pour nos pages sont esthétiquement bien:

et est ainsi le corps dans notre CSS: 

  1
 2
 3
 4
 5

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

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

Seulement, nous prendre les points au début de chaque élément dans la liste (ligne 2) et la gamme supérieure pour un par de ubircarlo bg (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

  # Menu li (
 inline ; display: inline;
 )

Maintenant il est temps de modifier l'élément "a", il prendra 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; width: 60px; height: 102px; float: left; text-indent:-5000px; margin-right: 2px;)

La largeur et la hauteur de chaque image (lignes 3 et 4 respectivement), le flottant de propriété: de gauche à être situées l'une sur le droit d'un autre texte-tiret pour éliminer le texte qui est à l'intérieur du marqueur, et marge de gauche pour séparer le menu un peu de l'autre.

Nous avons maintenant utilisé dans toutes les classes marqués «A». Nous avons donc à gauche. 

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

  { # Menu li a. indice (
 url ( imagenes/home.png ) no-repeat ; background: url (images / home.png) no-repeat;
 )
 { # Menu li a. send (
 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. Ressources (
 url ( imagenes/recursos.png ) no-repeat ; background: url (images / recursos.png) no-repeat;
 )

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

continuer avec le: hover de chaque image aux ca change 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. 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. Personne ressource: hover (background: url (images / contact-hover.png) no-repeat;) # menu li a. des ressources: hover (background: url (images / ressources hover.png) n repeat-x;)

Habituellement, 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 va juste disposer de l'option de passer la souris sur l'image. C'est là que PHP arrive en jeu, comme nous le faisons de sorte qu'il est marqué de la section du menu où sommes-nous?, Nous le faisons en ajoutant simplement un id à l'organisme.

Par exemple: 

  1

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

Lorsque vous n'utilisez pas ce menu dans wordpress ou tout autre CMS il suffit d'ajouter un identifiant différent du corps de chaque page et passer à l'étape suivante en dessous de ce CSS, vous avez quitté votre corps quelque chose comme ceci:

Fichier: index.php

corps: 

  1

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

file: enviar.php

corps: 

  1

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

file: contacto.php

corps: 

  1

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

file: recursos.php

corps: 

  1
 2

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

Comme je le disais auparavant, si vous le faire manuellement, à trouver la nouvelle section ci-dessous CSS 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 à envoyer à la page d'accueil de contacter, puis nous ajoutons le code PHP suivant. à nos pages.

<body> Avant de nous écrire ce qui suit: 

  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 à laquelle nous sommes (rappelez-vous que les URL WordPress est davantage utilisé dans quelque chose comme "http://www.tublog/tu-pagina/").

3 - Où aller slash "/", sera remplacé par rien! "".

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

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

6 - Elle retourne le résultat.

7 - Fermer php balise.

Donc ce que nous faisons ici est l'url et supprimer toutes ces choses qui ne servent pas de nous de notre identité.

Maintenant, notre corps et nous allons ajouter le texte suivant: 

  1

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

Prêt! l'organisme aura l'ID de la page dans laquelle nous nous trouvons.

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

Ajoutez la ligne suivante. 

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

  { Indice # # menu li a. indice (
 url ( imagenes/home-hover.png ) no-repeat ; background: url (images / home-hover.png) no-repeat;
 )
 { # email Body # menu li a. send (
 url ( imagenes/enviar-hover.png ) no-repeat ; background: url (images / post-hover.png) no-repeat;
 )
 { # Li contact corporel menu #. contact (
 url ( imagenes/contacto-hover.png ) no-repeat ; background: url (images / contact-hover.png) no-repeat;
 )
 { Body # ressources # menu li a. des ressources (
 url ( imagenes/recursos-hover.png ) no-repeat ; background: url (images / ressources hover.png) no-repeat;
 )

Habituellement, c'est ce qu'il dit, c'est que lorsque le corps a une de ces id (index, e-mail, contacts, les ressources), fera la "classe" prendre l'image du vol stationnaire.

Intelligent! Par conséquent, nous avons terminé notre menu pour Wordpress comme CMS ou n'importe quelle autre page. Php, je laisse ici la fermeture éclair vers le bas où tous les fichiers finaux.

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

Michael est le créateur et skyandstars.net éditeur qui publie des guides et des tutoriels sur WordPress, CuteNews, PHP, HTML et bien plus. Acutalmente étudiant du niveau collégial.

Mijael166

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

7 Commentaires sur "Menu à trois états de 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 ne sont certainement plus facile: S

    Allez et a élevé le niveau des didacticiels Michael! Félicitations:)

  2. Michael

    28 avril 2009

    Réponse

    Jajaja si ... change fondamentalement images .. mais l'effet qu'ils voulaient souligner, c'est que la page soit marqué dans ces HACR Dificl .... dans wordpress, c'est que cela fonctionne de la même en-tête pour toutes les pages ... ... puis avec entoncs php est cela ... une isa kiss =)

  3. Isa

    29 avril 2009

    Réponse

    AHM juste! esque la première fois que j'ai vu quelque chose de pas mis en évidence lorsque repiqué sur une autre page, pourquoi le nez. Maintenant, si je vois les choses différemment, en fait je me suis parfois demandé watts comme ce serait le cas si j'aime ce tutoriel, un autre pour la liste des lois que je fais, parce que mon site ne peut servir?

  4. Michael

    30 avril 2009

    Réponse

    Bien sûr: P viens de le faire du style pour ajouter l'ID à l'organisme:) ... ou si vous voulez mettre automatiquement le corps, le faire avec php ... mais bon .. est à votre goût ... Un beso!

  5. Isa

    30 avril 2009

    Réponse

    d'accord! jeje

  6. graciebird

    30 avril 2009

    Réponse

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

  7. fran

    22 juin 2009

    Réponse

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

Laissez un commentaire

Nom (Requis)

Courrier électronique (Requis mais non publié)

Web

Commentaire (Requis)

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