Résolu Problème menu onglets

Solutions (5)
Tags :
  • Sites Internet
  • Php
  • Design
  • CSS
|
Bonjour,
Mon problème est le suivant : sur mon site internet, je rencontre une difficulté avec les onglets du menu.
C'est à dire je veux que l'onglet reste enfoncé après le relâchement de la souris.
Et donc que la couleur change dès qu'on clique sur un autre onglet.
Si quelqu'un pouvait m'aider , je serai enfin soulagé.
Voici le code PHP:
<nav>
<ul class="menu-design">
<li><a class="menu-design active" href="index.php">Accueil</a></li>
<li><a href="charpente_et_traitement.php">Charpente</a></li>
<li><a href="renovation.php">Rénovation</a></li>
<li><a href="zinguerie.php">Zinguerie</a></li>
<li><a href="entretien.php">Entretien</a></li>
<li><a href="contact.php">contacts</a></li>
</ul>

</nav>

et le code CSS:
a,header,li,nav,ul
{
border:0 none;
font-size:100%;
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:top;
}

ul
{
list-style:none;

}

/*conteneur */
nav
{
display: inline-block;
margin: 0 auto;
padding:20px 0 10px 0;
}

/*menu*/
.menu-design
{
text-decoration:none;
text-transform:uppercase;
font:bold 15px/1.2em "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.menu-design li :active
{
border-style: inset;
color:#000;
background:#ff6600;
}

.menu-design ul
{
position:absolute;
top:-999em;
min-width:100%;
background:#333;
padding:19px 0;
left:0;
}

.menu-design li
{
float:left;
position:relative;
border-left:1px solid #151515;
width:135px;
border-right:1px solid #313131;
background:#333;
}



.menu-design a
{
color:#fff;
text-decoration:none;
display:block;
text-align:center;
padding:20px 0 21px;
}


.menu-design li:hover ul
{
top:59px;
z-index:99;
}

.menu-design li:hover li ul
{
top:-999em
}

.menu-design li:hover
{
background:#ff6600;
}

.menu-design a:hover strong
{
color:#fff;
}

Je vous remercie d'avance
Cordialement
Contenus similaires
Meilleure solution
partage
|
Salut,

Tu devras utiliser Javascript avec la solution de Thiliane13.

Avec jQuery ceci fera l'affaire

=== jQuery ===
$('.menu-design li').click(function(){
$('.menu-design li').removeClass('menu-design-active');
$(this).addClass('menu-design-active');
});
=== End jQuery ===
  • Dreamcaster a sélectionné cette solution comme la meilleure réponse
  • Commenter cette solution |
Score
0
òh
òi
|
Bonjour
regarder cette formation sur html5 et CSS3

https://www.facebook.com/StudyForAllOfficial/posts/2468...
  • Commenter cette réponse |
Score
0
òh
òi
, Modérateur |
Il faut que tu fasses une condition sur l'ajout de la class à chaque élément.
Tu peux avoir le fichier actuellement ouvert (__FILE__ il me semble); ou sinon tu mets dans une variable quel menu doit etre ouvert, et en fonction, tu ajoutes class="active" suivant le cas qu'il faut.
  • Commenter cette réponse |
Score
0
òh
òi
|
ok j'ai compris ce que tu veux, pour ce il serai judicieux de créer deux pages index index1.php et index2.php
Pour le 1er tu met pas class="menu-design-active" dans les liens et mais pour le 2ème tu met class="menu-
design-active" dans le lien index2.php.
Pour les autres pages tu effaces class="menu-design-active" dans index2.php et tu le met dans le lien en question et ainsi de suite.
cordialement...
  • Commenter cette réponse |
Score
0
òh
òi
|
Bonjour,
Je pense que tu doit revoir ca :

pour le html

<body>
<nav>
<ul class="menu-design">
<li><a class="menu-design-active" href="index.php">Accueil</a></li>
<li><a href="charpente_et_traitement.php">Charpente</a></li>
<li><a href="renovation.php">Rénovation</a></li>
<li><a href="zinguerie.php">Zinguerie</a></li>
<li><a href="entretien.php">Entretien</a></li>
<li><a href="contact.php">contacts</a></li>
</ul>
</nav>
</body>

et pour le css

.menu-design-active
{
border-style: inset;
color:#000;
background:#ff6600;
}
  • Commenter cette réponse |

Ce n'est pas ce que vous cherchiez ?

Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS