Menu CSS Vertical deroulant au clic

Fermé
Signaler
-
 Wapaca -
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;}

Merci d'avance pour votre aide

18 réponses

Salut,

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.
9
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 41989 internautes nous ont dit merci ce mois-ci

Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
120
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> 


et enfin le css:
h2.faq {
	display:block;
	width:auto;
	height:20px;
	line-height:17px;
	border-top:2px dotted #D9D9D9;
	border-bottom:2px dotted #D9D9D9;
	background:#d0edff url(faq.gif) top left no-repeat;
	padding:3px 0 0 25px;
	font-size:12px;
	color:#0468b2;
	margin:5px -10px 0 -10px;
}


J'espère que ça t'aidera à accomplir ton projet ! :D

Bon travail !
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
120
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
Messages postés
193
Date d'inscription
lundi 15 juin 2009
Statut
Membre
Dernière intervention
12 février 2017
40
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...

Messages postés
200
Date d'inscription
dimanche 15 février 2009
Statut
Membre
Dernière intervention
22 mai 2014
10
c'est :hover qui gere le passage de la souri.

supprime la ou tu a besoin.
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.
Messages postés
200
Date d'inscription
dimanche 15 février 2009
Statut
Membre
Dernière intervention
22 mai 2014
10
Je prend exemple du bouton "type":

si tu mettrais sa ca ferait quoi?
<body>
<ul id="menu">
<li>
<a href="#nogo">Home</a>
</li>
<li>
<a href="#nogo">Privacy Policy</a>
</li>
<li>
<a href="#nogo">Types</a>


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.
Il n'y a vraiment personne qui saurait me répondre ?
Merci beaucoup.
Par contre tu est sur que l'on peut faire ça seulement en javascript ? (je déteste le javascript)
Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
120
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

Bon travail !
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
Messages postés
193
Date d'inscription
lundi 15 juin 2009
Statut
Membre
Dernière intervention
12 février 2017
40
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). :)


Bonnneee journéeee :-D
Messages postés
193
Date d'inscription
lundi 15 juin 2009
Statut
Membre
Dernière intervention
12 février 2017
40
Bah tu sais, rares sont ceux qui on Javascript désactivé.

Il faut juste faire gaffe au référencement des moteurs de recherches qui utilisent aucun script additionnel...

Pour ceux qui n'ont pas javascript, tampis pour eux. Avec une belle balise <noscript> tu leur demande de le réactiver.

C'est comme si tu codais encore pour ceux qui utilisent IE 5.0 ^^ ok y'en a, ben tampis pour eux !

Bon courage ;)

Messages postés
641
Date d'inscription
mercredi 1 juillet 2009
Statut
Membre
Dernière intervention
10 août 2012
120
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 !

j'ai le même problème mais la suolution que vous avez proposé ne résous pas mon problème. Est ce que vous pourez m'aider???