Menu vertical HTML - CSS

Invité · 12/10/2017, 17h15

1/ Sous-menu ouvert - Flèche

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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 jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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' } );
});
// ------------------------------------------------

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

**Casio** · 12/10/2017, 18h09

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 ?

Invité · 12/10/2017, 18h17

Mea culpa :

Remplacer

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

			$(navMainId+' ul > li').removeClass('openfirst');

**Casio** · 12/10/2017, 18h19

C'est... Différent maintenant... Il reste bloqué en Up...

Invité · 12/10/2017, 18h20

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

**Casio** · 12/10/2017, 18h23

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.

**Casio** · 12/10/2017, 18h42

BEWARE (pour tests) : J'ai re-nommé le menu-test.php en menu.php et réciproquement (ancien/nouveau/ancien)...

Invité · 12/10/2017, 19h13

Parfois, il faut savoir dire stop...

**Casio** · 12/10/2017, 19h14

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é...

Invité · 12/10/2017, 19h20

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

Ou alors tu es Superman !

Nom : 250px-SupermanRoss[1].png
Affichages : 705
Taille : 103,1 Ko

**Casio** · 12/10/2017, 19h30

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...

Invité · 12/10/2017, 19h37

Je suis sur Firefox... et ça fonctionne.
Sur Opera aussi.

**Casio** · 12/10/2017, 19h40

?!?

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

Nom : Capture d'e?cran 2017-10-12 19.39.50.png
Affichages : 319
Taille : 579,4 Ko

Invité · 12/10/2017, 19h45

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

<li class="active"> <!-- Sous-Menu ouvert par defaut !-->

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

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**Casio** · 12/10/2017, 19h50

YES, la ça fonctionne...

Toujours pas sur Firefox... Je viens encore de tester... Mais Chrome & Safari : Ok.

**Casio** · 12/10/2017, 19h55

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.

Invité · 13/10/2017, 00h16

Supprime la partie du CSS avec

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Casio** · 13/10/2017, 08h16

Done.

J'ai donc viré :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

Invité · 13/10/2017, 09h04

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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 jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Casio** · 13/10/2017, 09h07

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.

Menu vertical HTML - CSS

CSS

Discussions similaires

Partager

Partager