Menu vertical HTML - CSS

Version imprimable

Voir 40 message(s) de cette discussion en une page

1/ Sous-menu ouvert - Flèche

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* ------------------- */
/* FACULTATIF  : Sous-Menu OUVERT au départ */
#navMain > ul > li.openfirst > ul {
  display:block; 
} 
 
#navMain > ul > li.openfirst:after {
    -o-transition: -o-transform 0.5s;
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -moz-transition: -moz-transform 0.5s;
    -webkit-transform: rotate(180deg);
    -webkit-transition: -webkit-transform 0.5s;
    transform: rotate(180deg);
    transition: transform 0.5s;
}

+ ajouter dans le jQuery :

Code:

1
2
3
4
5
6
	// -------------------
	// ouverture/fermeture sous-menu (click/touch)
	$(navMainId+' ul > li').on( 'click', function(event) 
    {
...
      $(this).removeClass('openfirst'); /* FACULTATIF  : Sous-Menu OUVERT au départ : on EFFACE la class */

2/ Scrollbar - modifier :

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( Math.min( $(window).height(), $(navMainId).height() ) ); //  A ADAPTER par rapport à la hauteur effectivement disponible : hors header, footer,....
	$(navMainId).css( { 'overflow-y':'auto' } );
});
// ------------------------------------------------

Citation:

// A ADAPTER par rapport à la hauteur effectivement disponible : hors header, footer,....

12/10/2017, 18h09
Casio

Bon, j'ai du merder quelque part, car y'a toujours un ch'tit bug dans la flèche, et pour le code jQuery d'ascenseur, heu... Pareil... On verra plus tard pour lui.

Par contre, dommage pour la flèche.

P.s : Any idea pour l'indicateur de page ouverte ?
12/10/2017, 18h17
Invité

Mea culpa :

Remplacer

Code:

$(this).removeClass('openfirst');

par

Code:

$(navMainId+' ul > li').removeClass('openfirst');
12/10/2017, 18h19
Casio

C'est... Différent maintenant... Il reste bloqué en Up... :)
12/10/2017, 18h20
Invité

Je suis sur ta page http://wda-fr.org/includes/menu-test.php, et ça fonctionne correctement (Firefox).
12/10/2017, 18h23
Casio

Heu... Testé en vidant la cache... Sur Mac ET PC... Chrome...
Quand on charge, la fleche est bien UP.
Si on re-clique sur "Association", elle reste UP.
Testé aussi avec Firefox PC.
12/10/2017, 18h42
Casio

BEWARE (pour tests) : J'ai re-nommé le menu-test.php en menu.php et réciproquement (ancien/nouveau/ancien)...
12/10/2017, 19h13
Invité

Parfois, il faut savoir dire stop... :aie:
12/10/2017, 19h14
Casio

No pb bien sur...
Le 20/10/2017, ce sera les 20 ans du site... Voici ma motivation. :)
il me reste 8 jours pour parfaire.

Si d'ici la vous avez une idée.

P.s : Le passage du JS en fichier externe n'a pas fonctionné... :(

1 pièce(s) jointe(s)

Code:

1 2 <script type="text/javascript" src="http://wda-fr.org/includes/menu.js"></script> <script type="text/javascript" src="http://wda-fr.org/moteurs/jquery-3.2.1.min.js"></script>
NON.
L'initialisation de jQuery en PREMIER :
Code:

1 2 <script type="text/javascript" src="http://wda-fr.org/moteurs/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="http://wda-fr.org/includes/menu.js"></script>
Tu ne mets pas ton pantalon avant ton slip, si ? :mouarf:
Ou alors tu es Superman !

Pièce jointe 319011

12/10/2017, 19h30
Casio

Hummm... Comme je le disais, je ne suis pas familier avec JS...
Je ne savais qu'il faisait appel à une routine du JQuery...

Done, ça marche sur Safari et Chrome sur PC et Mac... Mais ne veut rien savoir sur Firefox...
Etrange...
12/10/2017, 19h37
Invité

Je suis sur Firefox... et ça fonctionne.
Sur Opera aussi.
12/10/2017, 19h40
Casio

1 pièce(s) jointe(s)

?!?

Je viens de tester sur un autre Mac : Pareil... :(

Pièce jointe 319012

Bon. Changeaons notre fusil d'épaule...

1/ On OUBLIE la classe "openfirst".
-> on supprime dans le CSS et le jQuery ce qu'on avait mis concernant cette class.

2/ on met une classe "active" à la place :

Code:

<li class="active"> 

et dans le jQuery (j'ai tout mis : à copier-coller) :

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
53
54
55
56
57
58
59
60
// ------------------------------------------------
// 	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();
	// -------------------
  //Sous-Menu ouvert par defaut
  $(navMainId+' ul > li.active').addClass('open');
  $(navMainId+' ul > li.active > ul').slideDown('fast');
	// -------------------
	// 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();
	});
	// -------------------
});
 
// ------------------------------------------------
// Scrollbar si menu plus grand que la hauteur de fenêtre
$(window).on( 'load resize', function(){
	var navMainId = '#navMain';
	$(navMainId).height( Math.min( $(window).height(), $(navMainId).height() ) ); //  A ADAPTER par rapport à la hauteur effectivement disponible : hors header, footer,....
	$(navMainId).css( { 'overflow-y':'auto' } );
});
// ------------------------------------------------

Et là... c'est Broadway ! :lahola:

12/10/2017, 19h50
Casio

YES, la ça fonctionne...

Toujours pas sur Firefox... Je viens encore de tester... Mais Chrome & Safari : Ok.
12/10/2017, 19h55
Casio

BINGO ... Je ne sais pas pkoi, il me chargeait la page en HTTPS (1and1 me gonfle)...
En http ça fonctionne nickel. :)

Par contre, je remarque SUR MOBILE un décalage quand on ouvre le sous-sous-menu Test... Enfin, l'ensemble du container se déplace sur la droite.
13/10/2017, 00h16
Invité

Supprime la partie du CSS avec

Code:

#navMain ul ul ul .... { ...}

Done.

J'ai donc viré :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#navMain ul ul ul > li > a {
	padding-left: 40px;
}
 
#navMain ul ul ul > li {
	background: #555;
	box-shadow: 0 1px 0 #666 inset, 0 -1px 0 #444 inset;
}
 
#navMain ul ul ul ul > li > a {
	padding-left: 60px;
}
 
#navMain ul ul ul ul > li {
	background: #888;
	box-shadow: 0 1px 0 #999 inset, 0 -1px 0 #777 inset;
}

Maintenant, l'ensemble des blocs du menu sont dans un ascenseur vertical...
C'est... étrange...

Bonjour,

si je comprends bien, c'est moi qui fait tout !

J'espère que j'aurrais au moins un bout de gateau d'anniversaire !

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
* {
	margin: 0; padding: 0; border: 0;
}
/* ------------------------------- */
/* MENU */
#navMain {
	max-width: 150px;
	position: relative;
	width: 100%;
	margin: 0 auto;
	font-family: Verdana, Arial;
}
#navMain ul, #navMain li, #navMain a {
	position: relative;
	padding: 0;
	margin: 0;
	border: 0;
	text-decoration: none;
}
#navMain ul li {
	display: block;
}
#navMain ul li a {
	display: block;
	color: #FFFFFF;
	padding: 10px 10px;
	position: relative;
	text-shadow: 2px 1px 1px #000000; /* Ombrage */
}
/* --------------- */
/* MENU : niveau 1 */
#navMain > ul > li > a {
	background: #FF8727;
	box-shadow: 0 1px 0 #FF9D4F inset, 0 -1px 0 #DD6403 inset;
}
/* --------------- */
/* MENU : niveau 1 ACTIF - Sous-Menu ouvert par defaut */
#navMain > ul > li.active > a { background: #20638f; }
/* --------------- */
/* MENU : niveau 2 et suivants */
#navMain ul ul > li > a {
	padding-left: 20px; /* Ecarts gauches sous-menus */
	font-size: 75%;
}
#navMain ul ul > li {
	background: #333;
	box-shadow: 0 1px 0 #444 inset, 0 -1px 0 #222 inset;
}
#navMain ul ul ul > li {
	background: #444;
}
/* --------------- */
/* hover */
#navMain > ul > li:hover > a {
	background: #DD6403;
}
#navMain ul li:hover {
	background: #DD6403;
	box-shadow: 0 1px 0 #FF9D4F inset, 0 -1px 0 #DD6403 inset;
}
/* --------------- */
/* avec sous-menu */
#navMain li.hasSub > ul {
  display:none; /* on masque */
}
/* ------------------------------- */
/* fleche, avec rotation */
#navMain .hasSub:after {
	position: absolute;
	content: '\25BC';
	display: block;
	font-size: 0.7em;
	color: #fff;
	top: 14px;
	right: 10px;
	cursor: pointer;
 
	-o-transition: -o-transform 0.5s;
	-ms-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-moz-transition: -moz-transform 0.5s;
	-webkit-transform: rotate(0deg);
	-webkit-transition: -webkit-transform 0.5s;
	transform: rotate(0deg);
	transition: transform 0.5s;
}
 
#navMain .hasSub.open:after {
	-o-transition: -o-transform 0.5s;
	-ms-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-moz-transition: -moz-transform 0.5s;
	-webkit-transform: rotate(180deg);
	-webkit-transition: -webkit-transform 0.5s;
	transform: rotate(180deg);
	transition: transform 0.5s;
}
/* ------------------------------- */
/* SPECIAL : class active - menu actif */
#navMain > ul > li.active > a { background: #DD6403; }

On enlève du jQuery la partie "Scrollbar" (utile surtout pour un menu fixe, ce qui n'est pas ton cas) :

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
53
54
55
56
57
58
59
// Partie incluse par le fichier menu.js
// ------------------------------------------------
// 	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();
  // -------------------
  //Sous-Menu ouvert par defaut
  $(navMainId + " ul > li.active").addClass("open");
  $(navMainId + " ul > li.active > ul").slideDown("fast");
  // -------------------
  // 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 desactive les liens des Menus AVEC Sous-Menus
  // (obligatoire pour Tablettes TACTILES / Smartphones)
  $(navMainId + " > ul > li.hasSub > a").on("click", function(event) {
    event.preventDefault();
  });
  // -------------------
});
// ------------------------------------------------
// Fin de partie incluse par le fichier menu.js

13/10/2017, 09h07
Casio

Vous avez mis le code complet pour JS et CSS ? Je veux dire, je copie/colle/remplace ?

Bah, comme il me semble que vous soyez le créateur du dit menu, j'avoue profiter en effet de votre élan créatif. J'en profite pour essayer de comprendre le travail.
Progressivement, je commenterais le code pour pérenniser l'ensemble.

Je peux citer vos crédits sur le site.

Voir 40 message(s) de cette discussion en une page