Design menu en CSS
Résolu
Mo0oN
Messages postés
59
Date d'inscription
Statut
Membre
Dernière intervention
-
Mo0oN Messages postés 59 Date d'inscription Statut Membre Dernière intervention -
Mo0oN Messages postés 59 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je souhaite réaliser un site où je "copie" quelque peu le menu de ce site :
https://fr.millenium.gg
Quand on se déplace sur un onglet du menu, sa couleur change. J'ai réussi à faire cela grace à la fonction hover en CSS.
En revanche, je souhaiterais (comme c'est le cas sur le site Millenium) que lorsque l'on clique sur l'onglet et que l'on arrive sur la page correspondante, l'onglet reste colorisé sur la page nouvellement ouverte. Je ne sais pas trop comment faire cela. Y aurait-il une astuce en HTML / CSS à laquelle je n'aurais pas pensé ? Faut-il passer par du JavaScript ? Si oui, comment ?
Deuxième question, je souhaiterai lorsque l'on se déplace sur un onglet du menu, sa couleur change (ça c'est ok) et que lorsque l'on n'est plus sur cet onglet (et que l'on ne va pas sur un autre onglet et/ou que l'on ne change pas de page), il reste colorisé durant quelques secondes avant de reprendre sa couleur initiale. Mêmes questions que précédemment, comment faire ? (On retrouve ce principe sur le site www.mymym.com , dans le menu de navigation).
Merci d'avance !
Je souhaite réaliser un site où je "copie" quelque peu le menu de ce site :
https://fr.millenium.gg
Quand on se déplace sur un onglet du menu, sa couleur change. J'ai réussi à faire cela grace à la fonction hover en CSS.
En revanche, je souhaiterais (comme c'est le cas sur le site Millenium) que lorsque l'on clique sur l'onglet et que l'on arrive sur la page correspondante, l'onglet reste colorisé sur la page nouvellement ouverte. Je ne sais pas trop comment faire cela. Y aurait-il une astuce en HTML / CSS à laquelle je n'aurais pas pensé ? Faut-il passer par du JavaScript ? Si oui, comment ?
Deuxième question, je souhaiterai lorsque l'on se déplace sur un onglet du menu, sa couleur change (ça c'est ok) et que lorsque l'on n'est plus sur cet onglet (et que l'on ne va pas sur un autre onglet et/ou que l'on ne change pas de page), il reste colorisé durant quelques secondes avant de reprendre sa couleur initiale. Mêmes questions que précédemment, comment faire ? (On retrouve ce principe sur le site www.mymym.com , dans le menu de navigation).
Merci d'avance !
A voir également:
- Design menu en CSS
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Excel menu déroulant en cascade - Guide
- Windows 11 menu contextuel classique - Guide
- Windows 11 menu démarrer classique - Guide
7 réponses
salut,
l'onglet reste colorisé sur la page nouvellement ouverte
en HTML tu ajoutes une classe au lien ou à l'item qui est sélectionné.
et tu le codes en CSS :
Mêmes questions que précédemment, comment faire ? (On retrouve ce principe sur le site www.mymym.com , dans le menu de navigation).
dans ledit site, ils utilisent du Javascript.
l'onglet reste colorisé sur la page nouvellement ouverte
en HTML tu ajoutes une classe au lien ou à l'item qui est sélectionné.
<li class="current"><a href="#">blabla</a></li>
et tu le codes en CSS :
li.current{
color:red;
}
Mêmes questions que précédemment, comment faire ? (On retrouve ce principe sur le site www.mymym.com , dans le menu de navigation).
dans ledit site, ils utilisent du Javascript.
J'avais oublié un petit détail ... :x
En fait, c'est pas tout à fait que du HTML et du CSS, je travaille sur des pages en php, et mon menu est dans le fichier menu.php, et dans chaque page du site je fais un include de menu.php
En fait, c'est pas tout à fait que du HTML et du CSS, je travaille sur des pages en php, et mon menu est dans le fichier menu.php, et dans chaque page du site je fais un include de menu.php
En fait, c'est pas tout à fait que du HTML et du CSS, je travaille sur des pages en php
c'est pareil…
il faut que tu modifies ton "menu.php" pour qu'il y ait une classe sur l'item du menu de la page en cours.
c'est pareil…
il faut que tu modifies ton "menu.php" pour qu'il y ait une classe sur l'item du menu de la page en cours.
Non, ça ne peut pas marcher comme ça.
Voici l'architecture un peu plus précisément :
Dans menu.php, il y a un <p> pour chaque onglet du menu, avec des <ul><li> pour chaque sous-menu.
Exemple :
Il y a du JavaScript dans le <p>
Et ensuite dans le CSS, j'ai des tas de rubriques genre :
ou
Bref, si je mets ce que tu me dis, ça ne changera rien. En fait, le problème vient du fait que la page où je suis appelle menu.php, mais menu.php n'a aucun moyen de savoir qui l'appelle.
Je ne sais pas si j'ai été très clair :x
Voici l'architecture un peu plus précisément :
Dans menu.php, il y a un <p> pour chaque onglet du menu, avec des <ul><li> pour chaque sous-menu.
Exemple :
<p id="menu5" class="menu1"
onmouseover="MontrerMenu('ssmenu5');"
onmouseout="CacherDelai();">
<a href="society.php"
onmouseover="MontrerMenu('ssmenu5');"
onfocus="MontrerMenu('ssmenu5');">Société</a>
</p>
<ul id="ssmenu5" class="ssmenu"
onmouseover="AnnulerCacher();"
onfocus="AnnulerCacher();">
<li>
<a href="Mission.php">Notre mission</a>
</li>
<li>
<a href="Clients.php">Nos clients</a>
</li>
<li>
<a href="Team.php">Nos consultants</a>
</li>
<li>
<a href="contact.php">Nous contacter</a>
</li>
</ul>
Il y a du JavaScript dans le <p>
Et ensuite dans le CSS, j'ai des tas de rubriques genre :
.menu1, .menu2 {
text-align:center;
font-size:12px;
}
ou
.menu1 a:hover, .menu2 a:hover, .menu1 a:focus, .menu2 a:focus {
background-repeat:repeat-x;
text-decoration:none;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:100%;
background-image: url("../images/topmenu.png");
}
Bref, si je mets ce que tu me dis, ça ne changera rien. En fait, le problème vient du fait que la page où je suis appelle menu.php, mais menu.php n'a aucun moyen de savoir qui l'appelle.
Je ne sais pas si j'ai été très clair :x
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
au début du traitement :
dans menu.php:
<p id="menu5" class="menu1<?php echo ($_SESSION['current_page'] === 'societe') ? ' current' : ''; ?>"
ou quelque chose du même genre…
$_SESSION['current_page'] = 'la_page';
dans menu.php:
<p id="menu5" class="menu1<?php echo ($_SESSION['current_page'] === 'societe') ? ' current' : ''; ?>"
onmouseover="MontrerMenu('ssmenu5');"
onmouseout="CacherDelai();">
<a href="society.php"
onmouseover="MontrerMenu('ssmenu5');"
onfocus="MontrerMenu('ssmenu5');">Société</a>
</p>
ou quelque chose du même genre…