Problème onglet menu

Fermé
exal Messages postés 4 Date d'inscription lundi 14 décembre 2009 Statut Membre Dernière intervention 15 juillet 2014 - Modifié par crapoulou le 14/05/2014 à 18:10
MxM971 Messages postés 244 Date d'inscription samedi 26 juillet 2008 Statut Membre Dernière intervention 23 octobre 2018 - 31 mai 2014 à 20:45
Bonjour,


Mon problème est le suivant : sur mon site internet, je rencontre une difficulté avec les onglets du menu.
C'est à dire que lorsque je clique sur un onglet je souhaite qu'il reste enfoncé pour une meilleure visibilité. Mais après essayé plusieurs solutions, je n'y arrive pas.

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
A voir également:

3 réponses

MxM971 Messages postés 244 Date d'inscription samedi 26 juillet 2008 Statut Membre Dernière intervention 23 octobre 2018 36
16 mai 2014 à 20:33
Bonjour, la solution serais d'avoir une classe spécifique a ton onglet en question par exemple on est sur la page "rénovation"
tu aura ta liste d'élément dont :
<li class="active"><a href="renovation.php" >Rénovation</a></li>

ta classe "active" devra avoir les memes propriété que : li:hover

tu vois ou je veux en venir?
0
Bonsoir,

je ne sais pas si je me suis fais comprendre MxM971.
En fait je pense que vous avez compris que mon problème c'est le active c'est à dire la couleur au clic de la souris alors que mon problème c'est que 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.

Le seul moyen que j'ai trouvé c'est d'appliquer du javascript mais c'est pas concluant.

As-tu une autre solution stp parce que c'est pu possible là.

Merci.
0
MxM971 Messages postés 244 Date d'inscription samedi 26 juillet 2008 Statut Membre Dernière intervention 23 octobre 2018 36
31 mai 2014 à 20:45
Bonjour,
Quand tu clique sur un bouton, tu change de page?
si oui, je ne vois pas le probleme
si non tu sera obligé d'appliquer du JS ou JQuerry pour plus de facilité.

le mieu serais de faire une classe style ="bouton_enfonce" avec les propriété que tu veux. et quand tu clique sur un bouton, lien ou peux importe tu rajoute cette classe
exemple en jquery : $( "#tonElement" ).addClass( "bouton_enfonce" );

+ d'infos : https://api.jquery.com/addclass/
0