18 réponses
Wapaca
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.
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és
- 641
- Date d'inscription
- mercredi 1 juillet 2009
- Statut
- Membre
- Dernière intervention
- 10 août 2012
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:
et javascrip (dans ton head):
et enfin le css:
J'espère que ça t'aidera à accomplir ton projet ! :D
Bon travail !
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
- Messages postés
- 641
- Date d'inscription
- mercredi 1 juillet 2009
- Statut
- Membre
- Dernière intervention
- 10 août 2012
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
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és
- 193
- Date d'inscription
- lundi 15 juin 2009
- Statut
- Membre
- Dernière intervention
- 12 février 2017
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...
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...
smag42
- Messages postés
- 200
- Date d'inscription
- dimanche 15 février 2009
- Statut
- Membre
- Dernière intervention
- 22 mai 2014
c'est :hover qui gere le passage de la souri.
supprime la ou tu a besoin.
supprime la ou tu a besoin.
Otixx
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.
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.
smag42
- Messages postés
- 200
- Date d'inscription
- dimanche 15 février 2009
- Statut
- Membre
- Dernière intervention
- 22 mai 2014
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>
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>
Otixx
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.
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.
Otixx
Merci beaucoup.
Par contre tu est sur que l'on peut faire ça seulement en javascript ? (je déteste le javascript)
Par contre tu est sur que l'on peut faire ça seulement en javascript ? (je déteste le javascript)
monkey_monk
- Messages postés
- 641
- Date d'inscription
- mercredi 1 juillet 2009
- Statut
- Membre
- Dernière intervention
- 10 août 2012
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 !
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 !
Otixx
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
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és
- 193
- Date d'inscription
- lundi 15 juin 2009
- Statut
- Membre
- Dernière intervention
- 12 février 2017
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
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
PMax-57
- Messages postés
- 193
- Date d'inscription
- lundi 15 juin 2009
- Statut
- Membre
- Dernière intervention
- 12 février 2017
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 ;)
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 ;)
monkey_monk
- Messages postés
- 641
- Date d'inscription
- mercredi 1 juillet 2009
- Statut
- Membre
- Dernière intervention
- 10 août 2012
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 !
Et puis Firefox marche partout donc soit la personne va 3 fois par an sur le net... soit elle lit le braille !
pirate
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???
