Coucou tout le monde !
J'ai un petit problème au niveau d'un menu vertical en CSS/XHTML que je veux installer sur mon site.
En fait il marche bien mais il se déroule au passage de la souris alors que je souhaiterait que se soit lors du clic.
J'ai déjà essayé avec la fonction :active mais les sous menus disparaissent dés que l'on relâche le clic.
Le menu et sur cette page : http://lesbombers.free.fr/menu/menuHover.html
Voici son code CSS :
#menu {list-style-type:none; padding:0; margin:0; width:150px; z-index:100; float:left; height:0px; background:#000;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#fff url(menuvertical/boutton1.gif) no-repeat;}
#menu li.sub {background:#fff url(menuvertical/boutton1.gif) no-repeat;}
#menu li, #menu li a {display:block; color:#fff; font-family:arial, sans-serif; font-size:11px; line-height:30px; width:150px; text-decoration:none; cursor:pointer; font-weight:bold; text-align:center;}
#menu table {border-collapse:collapse; padding:0; margin:0 -1px -1px;}
#menu ul,
#menu :hover ul ul,
#menu :hover ul :hover ul ul {position:absolute; left:-9999px; width:150px;}
#menu :hover {color:#fff; background:#fff url(menuvertical/boutton2.gif) no-repeat; z-index:500; white-space:nowrap;}
#menu :hover > a {color:#fff; background:#fff url(menuvertical/boutton2.gif) no-repeat; z-index:500; white-space:nowrap;}
#menu :hover ul {position:static; height:0px; margin-top:-1px; background:#000;}
#menu :hover ul {position:static; height:0px; margin-top:-1px; background:#000;}
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul {display:block; position:absolute; left:130px; top:0; height:auto; z-index:500; border:1px solid #fff;}
#menu :hover ul li, #menu :hover ul li a {background:#000; text-align:left; text-indent:10px; }
#menu :hover ul li.fly a {background: #000 url(menuvertical/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover {background:#D74A4A; position:relative; z-index:100;}
#menu a:hover ul li.fly a:hover {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}
#menu :hover ul li.fly:hover > a {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}
#menu :hover ul :hover ul li,
#menu :hover ul :hover ul li a
{background:#000;}
#menu :hover ul :hover ul :hover ul li {background:#000; z-index:500;}
#menu :hover ul :hover ul li.fly a {background: #000 url(menuvertical/arrow.gif) no-repeat 120px center;}
#menu :hover ul :hover ul :hover {z-index:500; background:#D74A4A; color:#fff;}
#menu a:hover ul a:hover ul li.fly a:hover {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}
#menu :hover ul :hover ul li.fly:hover > a {background:#D74A4A url(slide/arrow.gif) no-repeat 120px center; color:#fff;}
#menu :hover ul :hover ul :hover ul li,
#menu :hover ul :hover ul :hover ul li a {background:#000;}
#menu :hover ul :hover ul :hover ul :hover {background:#D74A4A; color:#fff;}
#menu :hover ul :hover ul :hover ul :hover a {color:#fff;}
Tu peux aussi faire un menu cliquable en css sans javascript en utilisant les checkbox et l'opérateur css +.
En gros l'astuce c'est qu'on peut aussi cliquer une checkbox en cliquant sur le label donc tu fous le label, la checkbox auquel tu appliques un display:none, puis au même niveau tu fais une div et tu n'auras qu'à faire :
input:checked + #divdudessous
Puis appliqué les règles css pour permettre l'affichage de cette div.
monkey_monk
Messages postés641Date d'inscriptionmercredi 1 juillet 2009StatutMembreDernière intervention10 août 2012127 25 août 2009 à 10:43
L'effet que tu veux donner est fait en javascript (action au clic et non au survol).
Je te suggère de te renseigner sur les menu accordéon en jquery, il y a une multitude de tutoriaux sur le sujet !
Et pour te donner une piste valable :
html:
<div class="accordeon">
<h2 class="faq" title="Click to open the FAQ">Titre de la FAQ</h2>
<div class="infos">
Texte info ou autre menu
</div>
</div>
et javascrip (dans ton head):
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
// On cache les sous-menus :
$('div.accordeon div.infos').hide();
// Curseur main sur les h2
$('div.accordeon > h2.faq').css('cursor','pointer');
$('div.accordeon > h2').click(function(){
//si ouvert -> referme
if($(this).next('div.infos:visible').length!=0){
$(this).next('div.infos').slideUp('normal');
}
//si cache, on ferme les autres et on affiche
else {
$('div.accordeon div.infos').slideUp('normal');
$(this).next('div.infos').slideDown('normal');
}
return false;
});
} ) ;
// -->
</script>
monkey_monk
Messages postés641Date d'inscriptionmercredi 1 juillet 2009StatutMembreDernière intervention10 août 2012127 25 août 2009 à 11:31
Non, pas moyen de le réactiver ! (heureusement d'ailleurs...)
Mais c'est justement pour ça qu'il faut coder "proprement" et de manière sémantique !
Comme ça, même s'il n'y a pas de javascript... la page fonctionnera avec moins d'effets certes, mais fonctionnera avec un design élégant et bien pensé !
Faut pas croire, mais c'est un vrai boulot le webdesign ! ^^D
PMax-57
Messages postés193Date d'inscriptionlundi 15 juin 2009StatutMembreDernière intervention12 février 201740 26 août 2009 à 01:30
Oui, enfin tout ça c'est une polémique qu'il faut prendre en compte.
Un exemple => 10% des parts de marchés (chiffres 2008) sont pris par IE6.
La plupart sont des terminaux d'entreprises encore équipées de vieilles versions (genre Windows2000).
Et malheureusement, certains ont javascript désactivé par défaut, mais c'est très rare...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Merci de ta réponse.
J'ai essayé mais sa ne marche pas :
Si je supprime les :hover les sous menus sont toujours visibles et ce n'est pas ce que je souhaite.
Je voudrait que les sous menus se déroulent quand on clique sur les menus et qu'il se ré-enroulent quand on re-clique dessus.
J'espère avoir été asse clair.
Bonjour
En fait c'est exactement ce que j'ai mis.
Et étant donné que sur mon CSS il y a une fonction :hover, le menu se déroule au passage de la souris...
Pour donner un exemple, mon objectif est de faire un menu de ce type (a gauche sur cette page) :
https://www.lineage2.com/ Merci quand même pour vos réponses.
monkey_monk
Messages postés641Date d'inscriptionmercredi 1 juillet 2009StatutMembreDernière intervention10 août 2012127 25 août 2009 à 11:15
Et bien... il doit y avoir moyen d'arriver à un certain résultat via le css mais tu ne pourras gérer que le survol... et pas d'effet (animation, transition...).
En plus, la pseudo classe :hover est reconnu par IE6 (et 7 ? ...sais plus) que sur les balises a... du coup tu risques d'avoir tout un public en moins si tu veux des hover sur des boites ou autres... !
Alors que via une bonne structure et du Javascript tu peux le rendre élégant et accessible à tous !
En gros, il faut structurer ton menu (et toute ta page) sans aucun css ou javascript puis, quand tout "tiens la route", tu le stylise(css) et l'anime(javascript)... comme ça tu rempliras toutes les conditions pour tous les cas de figure ! (pas de js, nivagateur oral, etc...)
Donc oui, fait le maximum en css et ce qui ne peut se faire en css tu le fais en js ! :D
Ok merci de ton aide.
Ce qui me retient de faire du J.S c'est que y a des gens qui le désactivent de leur navigateur.
Y a pas moyen de de leurs réactiver automatiquement ?... loin de moi toute intention malveillantes bien entendu
PMax-57
Messages postés193Date d'inscriptionlundi 15 juin 2009StatutMembreDernière intervention12 février 201740 25 août 2009 à 11:22
Salut !
Pour donner suite à la proposition du :hover, cette fonction n'est pas utilisée par tous les navigateurs (seul IE l'utilise, mine de rien, c'est peut être une daube mais il fait des bon trucs quand même !)
Dans le codage valide CSS => il faut passer par un joli Javascript (ou du flash).
Un truc mignon pour les menu ? Jquery (recherche sur google, Jquery et menu accordéon). :)
monkey_monk
Messages postés641Date d'inscriptionmercredi 1 juillet 2009StatutMembreDernière intervention10 août 2012127 25 août 2009 à 15:15
Surtout qu'il faut vraiment le vouloir pour être encore sous IE5... :D vu que même les agence pro ne code que pour IE6 au plus loin ! (et c'est de plus en plus rare !)
Et puis Firefox marche partout donc soit la personne va 3 fois par an sur le net... soit elle lit le braille !
