Voilà je suis sur un problème depuis plusieurs jours sur lequel je n'arrive pas à y trouver une solution.
Même en ayant cherché des heures sur internet je ne trouve pas un cas similaire au mien. Voilà je vous explique, j'ai créé un petit menu responsive avec lequel quand l'écran est inférieur à 950px, les utilisateurs peuvent cliquer sur un label (input) "Menu" pour que le menu déroulant s'ouvre et se referme, de ce côté là tout marche mais ce que je voulais était aussi le faire disparaître d'une autre manière en cliquant sur les différents "onglets". C'est à dire "Récapitulatif", "Mot de passe" etc... Mais cela ne fonctionne pas..
Voilà en résumé j'aimerai que le sous menu se ferme de 2 manières, la première étant déjà fonctionnelle (cliquer sur "Menu") et l'autre cliquer sur les "onglets.
Oui voilà je sais que c'est largement faisable en JS mais j'aurai aimé le faire que en CSS mais c'est à la limite du impossible. J'aimerai évité utiliser du JS car je suis encore débutant dans tout ça et je ne veux pas faire un copier-coller bêtement d'un script js, après si c'est la seule solution j'utiliserai JS..
Bah soit tu fais un hover en css pour afficher le menu de l’onglet au survol, soit tu fait un jquery tout simple avec un toggle qui va permettre d’ajouter une fonction sur un click et ainsi fermer ou ouvrir tes onglets, ça se fait sur 3 lignes 😛
Oui oui voilà y'a cette solution du jquery mais je ne connais pas du tout le JS encore donc même un petit script lambda me paraît assez compliqué à intégrer dans mon cas. Mais c'est vrai que le CSS est limité et que le JS prend le relay...
Eh bien je sais intégrer du JS oui, avec la balise script ou en liant avec un fichier mais je ne sais pas activer le Jquery, j'imagine que c'est une ligne à intégrer ! Ah et c'est une question, si je veux intégrer du JS directement dans l'index.html je dois le placer à la fin ou bien au début comme les links ?
C'est mieux de mettre tes balises Js juste avant de fermer ton body, pour Jquery tu dois soit télécharger le fichier et le lier, mais je te conseils de mettre le lien hébergé par google, ça charge beaucoup plus vite :
Merci de colorer votre code à l'aide du bouton Code
Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.
Dans ton cas ça sera un script comme ça je pense :
<script>
$(document).ready(function () {
<!--D\abord tu caches ton élément-->
$('.TaClasseACacher').hide();
<!--Ensuite tu mets l\action du clique sur ta classe(.TaClasse) ou id(#TonId)-->
$('a.hide').click(function () {
<!--Et tu mets le toggle sur l\objet que tu as caché pour le faire apparaître et disparaître au deuxième clique le 400 représente la durée de transition -->
$('.TaClasseACacher').toggle(400);
return false;
});
});
</script>
- Edité par EvilSpartans 16 septembre 2019 à 21:34:17
J'ai un soucis j'explique puisqu'il y a 2 phases (responsive) mon menu en mode "ordinateur" est aussi caché par la première ligne du script ce qui fait qu'il n'apparaît plus du tout.. Je dois commenter la ligne pour pouvoir le faire réapparaître à nouveau mais quand je clique sur les boutons du menu déroulants rien ne se passe..
Ah !!! Les boutons du menu au dessus de 950px disparaîssent quand je clique sur la bar orange mais c'est pas la bonne forme... Il faudrait que cela fasse pareil mais pour le menu en-dessous de 950px
En fait il faudrait que lorsque l'utilisateur clique sur les boutons du menu déroulant (en-dessous de 950px) fasse disparaître ce menu déroulant. Je sais pas si ça t'aide
Il faudrait cibler que les boutons <a> une fois les media queries activés et pareil pour .tab-content.
Oui oui je vois mais je pense que je vais refaire un autre menu quand j'aurai le temps et ne pas mettre des input et des label dans le html parce que c'est pas top pour faire ce que je veux.
Je te remercie pour ton aide et pour ta rapidité dans tes réponses, je vais passer le topic en résolu je n'ai pas envi de plus t'embêter avec tout ça comme je t'ai dit je referai quelque chose de plus adapté et de plus propre avec du js. Merci encore
Sur mon dernier site j'ai fait ça perso, un menu normal, qui disparaît dans les formats mobiles, pour laisser place au menu hamburger, dessus j'ai mis un bouton "burger" avec un toggle qui fait descendre les différents onglets au click, et les fait disparaître au second click. Le rendu est super propre et c'est plutôt simple à réaliser
J'ai posté hier un sujet sur lequel je n'ai pas trouvé de véritable réponse en partie de ma faute car j'ai tout simplement mal organisé et fait mon code...
Voilà je vous explique, je n'y connais absolument rien en JS mais je sais que l'effet que je souhaite réaliser est largement faisable en quelques lignes de JS. J'ai fait un petit menu responsive à 2 phases et j'aimerai tout simplement que quand l'utilisateur clique sur n'importe quelle balise <a>, le menu déroulant (2ème photo) pour le moment statique (évidement il faudrait juste voir la barre orange avec "Menu" affiché quand l'écran passe en dessous de 950px) se referme avec une petite animation pour redevenir à la même taille que le menu>950px et j'aimerai que cet effet se fasse SEULEMENT quand le menu est inférieur à 950px (2ème phase) ce qui est logique...
Voilà j'aimerai évidemment que l'effet ne soit "actif" que quand le menu est inférieur à 950px..
Et petite précision, j'aimera que l'effet n'utilise pas Jquery
Marci d'avance.
[HELP] Faire "disparaître" sous-menu hamburger
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Voilà j'ai fait cette mise en page c'est tout bon je pense pouvoir commencer à faire le script.