Menu avec onglets

Résolu/Fermé
Chamicki Messages postés 525 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 20 juillet 2012 - 22 août 2009 à 14:25
Chamicki Messages postés 525 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 20 juillet 2012 - 24 août 2009 à 15:50
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 ?
A voir également:

15 réponses

Passarinho44 Messages postés 963 Date d'inscription mercredi 28 mai 2008 Statut Contributeur Dernière intervention 13 juin 2012 132
24 août 2009 à 15:41
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
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
22 août 2009 à 14:34
bah montre le code
0
Utilisateur anonyme
22 août 2009 à 14:44
Question :

A quoi servent tes <span> ??

0
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
22 août 2009 à 14:44
montre en plus ..; (ptin on dirait ke je parle a ma meuf :x)
0
Utilisateur anonyme
22 août 2009 à 14:45
Elle est bien bonne celle là...
.
.
.
.
.
(J'ai l'impression de parler à la mienne maintenant !! :-))
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Chamicki Messages postés 525 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 20 juillet 2012 73
22 août 2009 à 14:47
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;
      }
0
Chamicki Messages postés 525 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 20 juillet 2012 73
22 août 2009 à 14:48
Le current sert en faite à dire l'onglet actif.

Ce n'est peut-être pas la bonne façon de faire...
0
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
22 août 2009 à 14:49
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
0
Chamicki Messages postés 525 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 20 juillet 2012 73
22 août 2009 à 14:53
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...
0
Chamicki Messages postés 525 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 20 juillet 2012 73
24 août 2009 à 13:31
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 ??
0
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
24 août 2009 à 14:33
l'inclure en javascript
0
Chamicki Messages postés 525 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 20 juillet 2012 73
24 août 2009 à 14:34
Je ne connais pas le javascript aurais-tu un exemple ou un tutoriel ?
0
resalut Messages postés 784 Date d'inscription vendredi 26 juin 2009 Statut Membre Dernière intervention 21 janvier 2010 55
24 août 2009 à 14:37
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');
0
Utilisateur anonyme
24 août 2009 à 14:54
Et ça change quoi au problème ??

0
Chamicki Messages postés 525 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 20 juillet 2012 73
24 août 2009 à 15:31
Bin je vois pas...
0
Chamicki Messages postés 525 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 20 juillet 2012 73
24 août 2009 à 15:50
OUi sa ma l'air pas mal cela. j'y avais pas penser. Merci beaucoup je vais tester cela.
0
Chamicki Messages postés 525 Date d'inscription jeudi 11 juin 2009 Statut Membre Dernière intervention 20 juillet 2012 73
22 août 2009 à 14:42
<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>
-1