High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Menu CSS Vertical deroulant au clic

Dernière réponse le 26 aoû 2009 à 01:30:30 Otixx, le 22 aoû 2009 à 19:02:26 
 Signaler ce message aux modérateurs

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
Configuration: Windows XP
Firefox 3.5.2

Meilleures réponses pour « Menu CSS Vertical deroulant au clic » dans :
Modifier la taille du menu démarrer VoirVoici comment changer à volonté la taille de votre menu démarrer. Faites un clic droit sur le menu démarrer, puis, choisissez propriétés. Cliquez sur Personnaliser, dans la nouvelle fenêtre, augmentez ou diminuez le nombre de programmes récents...
Posez votre question Répondre

1

smag42, le 22 aoû 2009 à 19:09:46

C'est :hover qui gere le passage de la souri.

supprime la ou tu a besoin. GOOGLE et ton AMI utilise le   !!!!!!!!!!

   
Répondre à smag42

2

Otixx, le 23 aoû 2009 à 10:31:56

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.

   
Répondre à Otixx

3

smag42, le 23 aoû 2009 à 16:08:28

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>

GOOGLE et ton AMI utilise le   !!!!!!!!!!

   
Répondre à smag42

4

Otixx, le 23 aoû 2009 à 16:16:33

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) :
http://www.lineage2.com/
Merci quand même pour vos réponses.

   
Répondre à Otixx

5

Otixx, le 24 aoû 2009 à 10:28:32

Up

   
Répondre à Otixx

6

Otixx, le 25 aoû 2009 à 08:02:42

Il n'y a vraiment personne qui saurait me répondre ?

   
Répondre à Otixx

7

monkey_monk, le 25 aoû 2009 à 10:43:56
  • +1

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 !
[Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

8

Otixx, le 25 aoû 2009 à 10:53:15

Merci beaucoup.
Par contre tu est sur que l'on peut faire ça seulement en javascript ? (je déteste le javascript)

   
Répondre à Otixx

9

monkey_monk, le 25 aoû 2009 à 11:15:39

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 ! [Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

10

Otixx, le 25 aoû 2009 à 11:21:22

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

   
Répondre à Otixx

11

PMax-57, le 25 aoû 2009 à 11:22:25

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
Alea iacta est.

   
Répondre à PMax-57

12

monkey_monk, le 25 aoû 2009 à 11:31:14

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
[Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

13

PMax-57, le 25 aoû 2009 à 14:07:10

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 ;)

Alea iacta est.

   
Répondre à PMax-57

14

monkey_monk, le 25 aoû 2009 à 15:15:52

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 !

[Monkey Monk]
That's all folks !

   
Répondre à monkey_monk

15

 PMax-57, le 26 aoû 2009 à 01:30: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...

Alea iacta est.

   
Répondre à PMax-57
Posez votre question Répondre
Ils ont besoin de votre aide