Menu avec onglets
Résolu
Chamicki
Messages postés
552
Statut
Membre
-
Chamicki Messages postés 552 Statut Membre -
Chamicki Messages postés 552 Statut Membre -
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 ?
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:
- Menu avec onglets
- Menu déroulant excel - Guide
- Restaurer les onglets chrome - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
15 réponses
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Html :
CSS:
<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;
}
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
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...
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 ??
Est ce que quelqu'un a une autre solution ??
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');
et tu creer la page menu.php ou tu met
document.write('tous ton menu');
<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>
