Menu avec onglets [Résolu/Fermé]

Signaler
Messages postés
525
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2012
-
Messages postés
525
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2012
-
Bonjour,

Je cherche à faire un menu sous forme d'onglets. Le problème est que je ne comprend pas comment faire pour le mettre dans toute les pages de mon site.
J'avais penser le mettre dans un include php mais le problème est que je ne peut plus détecter l'onglet actif pour le changer de couleur.

Qu'elle méthode dois-je utiliser ?

15 réponses

Messages postés
964
Date d'inscription
mercredi 28 mai 2008
Statut
Contributeur
Dernière intervention
13 juin 2012
127
Pour inclure ton menu il faut que tu trouves dynamiquement sur quelle page tu te trouves.
Pour cela utilises le : $_SERVER['SCRIPT_FILENAME']

Ainsi dans ton menu tu mettras :

<li <?php if(basename($_SERVER['SCRIPT_FILENAME'])=="Home.html") echo 'id="current"'; ?>><a href="Home.html"><span>Accueil</span></a></li>
<li <?php if(basename($_SERVER['SCRIPT_FILENAME'])=="Products.html") echo 'id="current"'; ?>><a href="Products.html"><span>Interviews</span></a></li>
<li <?php if(basename($_SERVER['SCRIPT_FILENAME'])=="Services.html") echo 'id="current"'; ?><a href="Services.html"><span>Convocations</span></a></li>
<li <?php if(basename($_SERVER['SCRIPT_FILENAME'])=="Support.html") echo 'id="current"'; ?><a href="Support.html"><span>Partenaires</span></a></li>
<li <?php if(basename($_SERVER['SCRIPT_FILENAME'])=="Order.html") echo 'id="current"'; ?><a href="Order.html"><span>Order</span></a></li>
<li <?php if(basename($_SERVER['SCRIPT_FILENAME'])=="News.html") echo 'id="current"'; ?><a href="News.html"><span>News</span></a></li>
<li <?php if(basename($_SERVER['SCRIPT_FILENAME'])=="About.html") echo 'id="current"'; ?><a href="About.html"><span>About</span></a></li>

Teste ça en le mettant dans un fichier php que tu inclues.

Il y a peut-être un moyen de retrouver ça en JS mais je ne le connais pas.
3
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60835 internautes nous ont dit merci ce mois-ci

Messages postés
784
Date d'inscription
vendredi 26 juin 2009
Statut
Membre
Dernière intervention
21 janvier 2010
52
bah montre le code
Messages postés
1002
Date d'inscription
vendredi 7 août 2009
Statut
Membre
Dernière intervention
21 mars 2010
188
Question :

A quoi servent tes <span> ??

Messages postés
784
Date d'inscription
vendredi 26 juin 2009
Statut
Membre
Dernière intervention
21 janvier 2010
52
montre en plus ..; (ptin on dirait ke je parle a ma meuf :x)
Messages postés
1002
Date d'inscription
vendredi 7 août 2009
Statut
Membre
Dernière intervention
21 mars 2010
188
Elle est bien bonne celle là...
.
.
.
.
.
(J'ai l'impression de parler à la mienne maintenant !! :-))
Messages postés
525
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2012
71
Html :
 <body>
                <h2>Tab Menu 3</h2>
                <div id="tabs3">
                        <ul>
                                <!-- CSS Tabs -->
<li><a href="Home.html"><span>Accueil</span></a></li>
<li id="current"><a href="Products.html"><span>Interviews</span></a></li>
<li><a href="Services.html"><span>Convocations</span></a></li>
<li><a href="Support.html"><span>Partenaires</span></a></li>
<li><a href="Order.html"><span>Order</span></a></li>
<li><a href="News.html"><span>News</span></a></li>
<li><a href="About.html"><span>About</span></a></li>

                        </ul>
                </div>
        </body>

CSS:
#tabs3 {
      float:left;
      width:100%;
      background:#E4E6EB;
      font-size:93%;
      line-height:normal;
      }
    #tabs3 ul {
          margin:0;
          padding:10px 10px 0 50px;
          list-style:none;
      }
    #tabs3 li {
      display:inline;
      margin:0;
      padding:0;
      }
    #tabs3 a {
      float:left;
      background:url("tableft3.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabs3 a span {
      float:left;
      display:block;
      background:url("tabright3.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#FFF;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabs3 a span {float:none;}
    /* End IE5-Mac hack */
    #tabs3 a:hover span {
      color:#FFF;
      }
    #tabs3 a:hover {
      background-position:0% -42px;
      }
    #tabs3 a:hover span {
      background-position:100% -42px;
      }

      #tabs3 #current a {
              background-position:0% -42px;
      }
      #tabs3 #current a span {
              background-position:100% -42px;
      }
Messages postés
525
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2012
71
Le current sert en faite à dire l'onglet actif.

Ce n'est peut-être pas la bonne façon de faire...
Messages postés
784
Date d'inscription
vendredi 26 juin 2009
Statut
Membre
Dernière intervention
21 janvier 2010
52
bon je sais pas si j'ai compris mais tu crée une page que tu inclue dans toute les autres ou mieux tu inclues les autres pages dans celle ki aura ce code :x
Messages postés
525
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2012
71
Bin étant donnée que ceci est mon menu il me le faut dans toutes les pages. et pour éviter le copier coller je voulais faire un include. Mais a cause du current je ne peux pas...
Messages postés
525
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2012
71
Bon bin du coup je crois qu'un copier coller du menu pour chaque page va être indispensable...
Est ce que quelqu'un a une autre solution ??
Messages postés
784
Date d'inscription
vendredi 26 juin 2009
Statut
Membre
Dernière intervention
21 janvier 2010
52
l'inclure en javascript
Messages postés
525
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2012
71
Je ne connais pas le javascript aurais-tu un exemple ou un tutoriel ?
Messages postés
784
Date d'inscription
vendredi 26 juin 2009
Statut
Membre
Dernière intervention
21 janvier 2010
52
dans tes pages tu mets <script type="text/javascript" src="lemenu.js"></script>

et tu creer la page menu.php ou tu met
document.write('tous ton menu');
Messages postés
1002
Date d'inscription
vendredi 7 août 2009
Statut
Membre
Dernière intervention
21 mars 2010
188
Et ça change quoi au problème ??

Messages postés
525
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2012
71
Bin je vois pas...
Messages postés
525
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2012
71
OUi sa ma l'air pas mal cela. j'y avais pas penser. Merci beaucoup je vais tester cela.
Messages postés
525
Date d'inscription
jeudi 11 juin 2009
Statut
Membre
Dernière intervention
20 juillet 2012
71
<li id="current"><a href="Home.html"><span>Home</span></a></li>
<li><a href="Products.html"><span>Products</span></a></li>
<li><a href="Services.html"><span>Services</span></a></li>
<li><a href="Support.html"><span>Support</span></a></li>
<li><a href="Order.html"><span>Order</span></a></li>
<li><a href="News.html"><span>News</span></a></li>
<li><a href="About.html"><span>About</span></a></li>