En effet, cela colle à merveille, si ce n'est qu'il intègre du JS.
Je vais tester.
Version imprimable
ooops mille excuses, je me suis trompé dans mes archives et j'ai pris un menu horizontal au lieu de vertical.
Désolé, vais voir si la réponse n'est pas déjà là.
AAArg je viens de comprendre enfin ce qu'est le tag A .... c'est une BALISE html A ou <a> ... ha oui faut appeler un chat un chat.
Mais merci à Jreaux62 pour ses solutions au click ou à la souris, je vais mettre cela dans mes archives.
Toujours aussi clair et concis dans son code. Merci encore, bien que je cherche toujours à être en css pur et sans javascript (que je ne connais pas encore bien sûr)
Merci pour l'aide que tu apportes et tes solutions
Jef
Ca, j'ai répondu ici.
Citation:
2/ Je cherche a faire en sorte qu'un des sous-menus ( "Association") soit ouvert d'office, quitte a etre refermable par la suite.
Code:
1
2
3 <div id="cat1"> <h3>Association</h3> <input type="checkbox" id="Association" checked="checked" />
C'est là où ton menu pose problème.Citation:
3/ Je cherche enfin a faire en sorte que l'ouverture d'un sous-menu en ferme un autre, voir les autres... Sinon, ca va etre un menu vertical trop long...
CSS signifie "Cascading Style Sheet", soit "Feuilles de style en cascade".
Et qui dit "cascade" dit "en descendant".
Or, tes sous-menus s'ouvrent avec une checkbox, contenue dans la div parente.
Pour pouvoir fermer les AUTRES sous-menus, il faudrait "REMONTER" la cascade... Ce qui n'est pas possible (avec le CSS classique).
Merci de ces retours constructifs.
Par contre, dans le nouveau code, moyen de virer ça ? :
Je n'aime pas dépendre trop d'un serveur externe. Sans compter que je ne sais pas à quoi sert ce code.Code:<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Comme quoi, même "agacé", je reste pédagogue ;) (et je ne reste pas "agacé" longtemps)
C'est le script d'initialisation de jQuery.
Sans ça, le code ne fonctionne pas.
Par contre, tu peux télécharger le fichier sur ton serveur : :recherch: "jquery.min.js"
Tu ne dépendras pas d'un lien externe.
Code:<script type="text/javascript" src="http://www.ton-site.com/js/jquery.min.js"></script>
Yep, je viens de voir cela... Merci Wikipédia ( https://fr.wikipedia.org/wiki/JQuery ).
Bon, nouvelle mouture de test : http://wda-fr.org/includes/menu-test.php
J'ai inclue la bibliothèque "jQuery".
Par contre, j'ai du merder niveau intégration JS (ce pkoi je n'aime pas le JS, Ajax, et autres... Je n'y comprends quasi rien)...
Le menu ne se decollapse pas...
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52 <script type="text/javascript" src="https://wda-fr.org/moteurs/jquery-3.2.1.slim.min.js"></script> <script type="text/javascript"> // ------------------------------------------------ // jquery.dropdown.js (depends on: jquery.hoverIntent.js) // ------------------------------------------------ $.fn.dropdown = function(options) { var defaults = {}; var opts = $.extend(defaults, options); // Apply class=hasSub on those items with children this.each(function(){ $(this).find('li').each(function() { if( $(this).find('ul').length > 0) { $(this).addClass('hasSub'); } }); }); return this; }; // ------------------------------------------------ // MENU MAIN $(function(){ var navMainId = '#navMain'; // ------------------- // Calling the jquery dropdown $(navMainId).dropdown(); // ------------------- // ouverture/fermeture sous-menu (click/touch) $(navMainId+' ul > li').on( 'click', function(event) { event.stopPropagation(); /* important */ $(this).parent().find('li:not(:hover)').removeClass('open'); $(this).toggleClass('open'); $(this).parent().find('li:not(:hover) ul').slideUp('fast'); if( $(this).hasClass('hasSub') ) { $(this).children('ul').slideToggle('fast'); } }); // ------------------- // on désactive les liens des Menus AVEC Sous-Menus (obligatoire pour Tablettes TACTILES / Smartphones) $(navMainId+' > ul > li.hasSub > a').on( 'click', function(event) { event.preventDefault(); }); // ------------------- }); // ------------------------------------------------ </script>
Ton fichier https://wda-fr.org/moteurs/jquery-3.2.1.slim.min.js n'est pas bon.
Prends celui que je t'ai indiqué.
Sa version officielle : https://code.jquery.com/jquery-3.2.1.min.js
?!? Je ne devais pas prendre le slim compressé ? L'idée est d'alléger à fond...
"allégé" ne veut pas dire "compressé", mais "avec le minimum de fonctionnalités".
Ha oui, en effet... Je pensais que ct mon include de JS dans le HTML qui merdait...
D'ailleurs, à ce sujet, niveau poids ? Il vaut mieux le charger DANS le HTML, ou en tant que fichier séparé ? (et la je ne sais pas comment faire.)
Je vais essayer de décortiquer un peu le code voir si je comprends, histoire que s'il se mets à merder un jour (MaJ hébergeur ou autre), que je puisse assurer la pérennité du truc... Pas gagné...
1/ Le script va servir sur plusieurs pages : il est à mettre dans un fichier séparé.
L'inclusion se fait exactement comme l'autre script jQuery.
N.B. Le navigateur le mettra en cache : il ne sera chargé qu'une fois !
2/ Idem pour le CSS : on le met dans un fichier .css séparé.
Oki, thx. Je vais tester...
Pour le CSS, je me suis rendu compte depuis 20 ans que je gère seul le site de l'asso., qu'il était plus simple de lier le truc à la page, car sinon, avec le temps, j'ai des tonnes de garbage qui ne servent plus à rien...
Je vais tenter de faire des fichiers séparés CSS pour chaque gros moteurs.
Et si je voulais donc rendre le menu "Association" ouvert par défaut ?
...
?!? Désolé, mais la il faut m'expliquer...
Class "Active" ?
Non, en fait, c'est :
Code:
1
2
3 <li> <a href="#">Association</a> <ul style="display:block;">
Nickel... Merci ;-)
Je continue à décoder... ( http://wda-fr.org/includes/menu-test.php ).
Mieux :
et ajoute dans le CSS :Code:
1
2
3 <li class="openfirst"> <a href="#">B - Two</a> <ul>
Code:
1
2
3 #navMain > ul > li.openfirst > ul { display:block; }
Alors ? Elle est pas belle, la vie ?? :D
Cerise sur le cagot :
Ajoute dans le script jQuery :
Code:
1
2
3
4
5
6
7
8 // ------------------------------------------------ // Scrollbar si menu plus grand que la hauteur de fenêtre $(window).on( 'load resize', function(){ var navMainId = '#navMain'; $(navMainId).height( $(window).height() ); // A ADAPTER par rapport à la hauteur effectivement disponible : hors header, footer,.... $(navMainId).css( { 'overflow-y':'auto' } ); }); // ------------------------------------------------
Cela devient super propre... Bien mieux que mon test précédent... Merci !
( http://wda-fr.org/includes/menu-test.php )
Juste un petit bug sur la fleche du menu ouvert par defaut... Elle est inversée du coup...
Par contre, le script jQuery pour l'ascenseur ne fonctionne pas correctement.... Ca me descends mon footer et fout un ascenseur même si il y a la place... Alors que sans j'ai deja l'ascenseur (?!?).
Question Subs. : Si je veux afficher un indicateur de la page chargée actuellement dans le menu ?