Menu déroulant et compagnie
Fermé
DarkAurora
Messages postés
417
Date d'inscription
lundi 26 novembre 2007
Statut
Membre
Dernière intervention
21 janvier 2013
-
19 août 2011 à 12:57
Eillon Messages postés 65 Date d'inscription jeudi 30 avril 2009 Statut Membre Dernière intervention 22 novembre 2013 - 5 mars 2012 à 14:02
Eillon Messages postés 65 Date d'inscription jeudi 30 avril 2009 Statut Membre Dernière intervention 22 novembre 2013 - 5 mars 2012 à 14:02
A voir également:
- Menu déroulant et compagnie
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Windows 11 menu démarrer classique - Guide
- Supprimer menu déroulant excel - Forum Excel
6 réponses
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
19 août 2011 à 13:36
19 août 2011 à 13:36
Salut,
Donne le code html et css de ton menu ;)
Donne le code html et css de ton menu ;)
DarkAurora
Messages postés
417
Date d'inscription
lundi 26 novembre 2007
Statut
Membre
Dernière intervention
21 janvier 2013
27
19 août 2011 à 13:42
19 août 2011 à 13:42
pour le html
et la le css
<div id="nav"> <ul class="menu"> <li> <a href="#">Accueil</a> </li><li> <a href="#">Location</a> </li><li> <a href="#">Produits</a> <ul> <li><a href="Pages\Produits.html">Radio numérique DMR</a></li> <li><a href="Pages\Produits.html">Radio numérique TETRA</a></li> <li><a href="Pages\Produits.html">Radio Spécifiques</a></li> <li><a href="Pages\Produits.html">Accessoires</a></li> <li><a href="Pages\Produits.html">Radio Analogiques</a></li> <li><a href="Pages\Produits.html">Radio sans license</a></li> </ul> </li><li> <a href="#">Services</a> </li><li> <a href="#">Contact</a> </li> </ul> </div>
et la le css
.menu, .menu ul /* Liste */ { padding : 16px 0 0 0; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ list-style : none; /* on supprime le style par défaut de la liste */ line-height : 21px; /* on définit une hauteur pour chaque élément */ text-align : center; /* on centre le texte qui se trouve dans la liste */ } .menu /* Ensemble du menu */ { font-weight : bold; /* on met le texte en gras */ font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */ font-size : 15px; /* hauteur du texte : 12 pixels */ } .menu a /* Contenu des listes */ { display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ padding : 0; /* aucune marge intérieure */ background : transparent; /* couleur de fond */ color : #fff; /* couleur du texte */ text-decoration : underline; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ width : 144px; /* largeur */ } .menu li /* Elements des listes */ { float : left; /* pour IE qui ne reconnaît pas "transparent" */ border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body .menu li { border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */ } .menu li ul /* Sous-listes */ { padding : 0 0 0 0; /* pas de marge intérieure */ margin : 0; /* ni extérieure */ position: absolute; /* Position absolue */ width: 190px; /* Largeur des sous-listes */ left: -999em; /* Hop, on envoie loin du champ de vision */ z-index:1000; border: 1px solid black; background: #244664; } .menu li ul a{ display : block; /* on change le type d'élément, les liens deviennent des balises de type block */ padding : 0; /* aucune marge intérieure */ background : transparent; /* couleur de fond */ color : #fff; /* couleur du texte */ text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */ width : 190px; /* largeur */ } .menu li ul li /* Éléments de sous-listes */ { /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous liste */ } .menu a:hover /* Lorsque la souris passe sur un des liens */ { color: #000; /* On passe le texte en noir... */ background: url(../Images/onglet_hover.jpg); /* ... et au contraire, le fond en blanc */ text-decoration:none; } .menu li ul a:hover{ color: #000; /* On passe le texte en noir... */ background: #EF7D01; /* ... et au contraire, le fond en blanc */ text-decoration:none; } .menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */ { left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */ } .menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */{ left: auto; /* Repositionnement normal */ min-height: 0; /* Corrige un bug sous IE */ } /* IE ne reconnaissant pas le sélecteur ">" */ html>body .menu li ul li { border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */ } .menu li ul ul { margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */ /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */ border-left : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */ } /* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */ html>body .menu li ul ul { border-left : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */ }
DarkAurora
Messages postés
417
Date d'inscription
lundi 26 novembre 2007
Statut
Membre
Dernière intervention
21 janvier 2013
27
19 août 2011 à 15:19
19 août 2011 à 15:19
un problème avec le code peut être??
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
24 août 2011 à 11:59
24 août 2011 à 11:59
Re,
Désolé pour le retard,
Sinon je n'ai pas cernée ton problème,
tu souhaite que quand l'utilisateur passe la souris sur un des onglets, il garde le rouge et le surlignement ?
Désolé pour le retard,
Sinon je n'ai pas cernée ton problème,
tu souhaite que quand l'utilisateur passe la souris sur un des onglets, il garde le rouge et le surlignement ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
DarkAurora
Messages postés
417
Date d'inscription
lundi 26 novembre 2007
Statut
Membre
Dernière intervention
21 janvier 2013
27
24 août 2011 à 17:46
24 août 2011 à 17:46
en fait c'est un menu a onglet avec volet déroulant le problème est que lorsque j'arrive sur l'onglet qui se déroule et que mes sous listes apparaissent j'aimerais que mon onglet reste en surlignement lorsque je me balade dans mes sous listes
en espérant que tu as compris dsl de mon manque de réactivité mais je suis en vac^^
en espérant que tu as compris dsl de mon manque de réactivité mais je suis en vac^^
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
25 août 2011 à 12:02
25 août 2011 à 12:02
Si j'ai bien compris, tu veux que lorsque tu survoles Produits, et que tu navigues dans les sous listes (radio spécifique, accessoires...) ton menu Produits reste en noir ?
DarkAurora
Messages postés
417
Date d'inscription
lundi 26 novembre 2007
Statut
Membre
Dernière intervention
21 janvier 2013
27
29 août 2011 à 09:15
29 août 2011 à 09:15
dsl pour cette réponse tardive mais oui c'est tout à fait ça (ici c'est une image fond orange que je souhaite garder) j'ai cherché pas moyen d'activer une propriété d'un élément à partir d'un autre élément
Melooo
Messages postés
1405
Date d'inscription
vendredi 28 novembre 2008
Statut
Membre
Dernière intervention
18 mars 2013
84
Modifié par Melooo le 30/08/2011 à 08:52
Modifié par Melooo le 30/08/2011 à 08:52
En faite je pense que ton problème est très simple,
tu dois enlever le hover concernant la couleur de tes liens :
toi tu as
tu dois enlever le hover concernant la couleur de tes liens :
toi tu as
.menu a:hover /* Lorsque la souris passe sur un des liens */ { color: #000; /* On passe le texte en noir... */ background: url(../Images/onglet_hover.jpg); /* ... et au contraire, le fond en blanc */ text-decoration:none; } ce qui bien évidemment te met en noir les liens quand tu les survoles, tu dois donc faire : <code> .menu a:hover /* Lorsque la souris passe sur un des liens */ { background: url(../Images/onglet_hover.jpg); /* ... et au contraire, le fond en blanc */ text-decoration:none; }
DarkAurora
Messages postés
417
Date d'inscription
lundi 26 novembre 2007
Statut
Membre
Dernière intervention
21 janvier 2013
27
2 sept. 2011 à 11:03
2 sept. 2011 à 11:03
je te remercie mais la j'ai un autre problème je me suis aperçu que l'image qui s'affichait était de la taille d'un <li> qui avait une largeur bien définit le problème est que l'on m'a demander de modifier le menu incluant des mots plus grands que précédemment.... et ayant supprimer ma largeur pour travailler avec u padding et margin ( mis en forme plus jolie ) je me retrouve avec des images onglet qui sont coupées lorsque je passe sur un lien y a t il un moyen pour adapter mon image à la taille d'un texte? ou à l'ensemble du block?
Eillon
Messages postés
65
Date d'inscription
jeudi 30 avril 2009
Statut
Membre
Dernière intervention
22 novembre 2013
9
Modifié par Eillon le 5/03/2012 à 14:02
Modifié par Eillon le 5/03/2012 à 14:02
Bonjour,
As-tu trouvé une solution, je suis dans le même cas, mais j'arrive à garder l'imgage hover mais l'autre réapparait en même temps avec
As-tu trouvé une solution, je suis dans le même cas, mais j'arrive à garder l'imgage hover mais l'autre réapparait en même temps avec
#menu li:hover { background: url(menu_hover.png) no-repeat; }