Discussion :

[steph68b]

Hello ,

Je suis entrain de faire un menu, menu auquel je ne voudrais pas donner de largeur fixe (ni %, ni px)
-> je voudrais qu'il s'adapte automatiquement au nombre d'items du menu

menu.php

Code html :

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
<ul id="main-navigation" style="border: 2px solid red;">
 
		<li>
			<a href="index.php">Menu1</a>
			<ul>
				<li><a href="index.php">sous-menu1</a></li>
				<li><a href="index.php">sous-menu2</a></li>
				<li><a href="index.php">sous-menu3</a></li>
			</ul>
		</li>
 
                <li>
			<a href="index.php">Menu2</a>
			<ul>
				<li><a href="index.php">sous-menu1</a></li>
				<li><a href="index.php">sous-menu2</a></li>
			</ul>
		</li>
 
		<li>
			<a href="index.php">Menu3</a>
		</li>
 
		<li>
			<a href="index.php">Menu4</a>
		</li>
	</ul>

css:

Code :

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

1
2
3
4
5
6
7
8
9
10
#main-navigation {
	background: #484848;
	width: 60%;
	text-align: center;
	height: 65px;
	margin: auto;
	margin-top: 20px;
        font-size: 17px;
	font-underline: none;
}

Ma question:
-> avec un width: 60%; , mon menu est correct: ok

-> mais l'idée était de faire une structure qui passerait automatiquement à 70, ou 80% (voire 100%) SI je rajoutais des items dans mon code PHP, sans avoir à modifier le .css, bien sûr

-> un peu comme un menu standard pour les users lambda, menu qui serait complété par un autre item pour les admin, par exemple, vous voyez?


J'ai donc de suite pensé à l'attribut min-width.......... mais ça ne fonctionne pas!
J'ai regardé en ligne http://www.w3schools.com/cssref/pr_dim_min-width.asp, mais on ne parle que d'une utilisation pour un <p>... étrange à mes yeux, mais soit!


J'ai donc englobé mon menu dans un <p style="min-width: 50%; border: 2px solid blue;"> </p>
-> marche pas mieux
-> pire: mon cadre bleu de débug fait 100% de la largeur ET en plus mon menu se trouve en dessous, et non à l'intérieur


Donc:
-> est-ce-que qq'un aurait une idée?
-> je ne peux pas croire que c'est impossible à faire, c'est donc forcément moi qui merde qq part...

Merci.

[Amnael]

Tu ne pourrais pas faire un script Js qui calcule la taille optimale en fonction du nombre d'item de ton menu ?

Tu fais un css de base, et sous certaine condition tu le modifie par ton js.

[steph68b]

ça doit bien être possible oui, mais je ne peux pas croire que ce n'est pas faisable nativement en css.
-> après, si tu donne un height à un <div> et que son contenu "dépasse", la hauteur s'adapte bien......

[Invité]

Bonjour,

je ne vois pas le rapport entre la largeur et l'ajout d'items...

Le bout de code CSS que tu montres n'aide pas beaucoup à la compréhension.
On n'y voit qu'un menu vertical avec sous-menus visibles.

D'autre part, où as-tu été pêcher "font-underline" ??

Donc, au hasard, je dirais :

Code html :

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

1
2
3
4
5
<nav id="main-navigation">
  <ul>
....
  </ul>
</nav>

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
#main-navigation { 
  text-align:center; 
}
#main-navigation > ul {
	background: #484848;
  border: 2px solid red;
  display:inline-block;
  min-width:50%;
	margin: 20px auto 0;
  padding:0;
  font-size: 100%;
}
#main-navigation li  { 
  list-style-type:none; 
  text-align:center; 
  padding:0; margin:0; 
}
#main-navigation li a { 
  display:block; 
  padding:5px 20px; 
  color:#fff; 
  text-decoration:none; 
}

[steph68b]

alors:

1. font-underline
   un vieux truc de test qui trainait, en effet
   
   
2. code complet
   effectivement, il manquait des choses...
   
   

   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
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   #main-navigation {
   	background: #484848;
   	text-align: center;
           width: 60%;
   	height: 65px;
   	margin: auto;
           padding: 0;
   	margin-top: 20px;
           font-size: 17px;
   }
    
   #main-navigation ul {
       padding:0;
       margin:0;
   }
    
   #main-navigation li {
       float:left;
       list-style: none;
       padding:0;
       margin:0;
   }
    
   #main-navigation li a {
       position:relative;
       color:white;
       background: url('../images/menu/main-navigation-separator.gif') top right no-repeat;
       display:block;
       width:144px;
       height: 65px;
       display: table-cell;
       vertical-align: middle;
   }

   voilà donc le css complet, que je vais comparer avec ton code
   

[Invité]

• http://codepen.io/jreaux62/pen/Qyxqjv

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
#main-navigation { 
    text-align:center; /*centrage du menu*/ 
}
#main-navigation ul {
    padding:0;
    margin:0;
}
#main-navigation li {
    list-style: none;
    padding:0;
    margin:0;
  text-align:center;
}
/* niveau 1 : menu horizontal */
#main-navigation > ul {
	background: #484848;
	text-align: center;
  display:inline-block;
	height: 65px;
	margin: 20px auto;
  padding: 0;
  font-size: 17px;
}
#main-navigation > ul > li {
  position:relative; 
  float:left;
}
#main-navigation li a {
  position:relative;
  color:white;
  background: url('../images/menu/main-navigation-separator.gif') top right no-repeat;
  display:block;
  text-decoration:none;
  padding:3px;
}
#main-navigation li:hover {
  background-color:grey;
}
#main-navigation li a:hover {
  color:yellow;
}
#main-navigation > ul > li > a {
  width:144px;
  height: 65px;
  display: table-cell;
  vertical-align: middle;
  padding:0;
}
/* niveau 2 : sous-menus */
#main-navigation > ul ul { 
  position:absolute; 
  top:100%; 
  width:100%;
  display:none; 
  background: #484848;
}
#main-navigation > ul ul a { color:white; }
#main-navigation > ul li:hover > ul { display:block; }

[steph68b]

Voilà c'est ça oui!

J'avoue, depuis hier, je suis sur 12 trucs en même temps donc je n'ai pas été super clair, mea culpa!

Mais merci.

[steph68b]

ok

[steph68b]

Je relance, vite fait, le sujet pour une question complémentaire........

Pour améliorer mon menu, j'ai remplacé le texte des menus par des icones, avec un système d'info bulles.

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
18
19
20
21
22
23
24
25
26
27
28
#main-navigation a.infobulle{
  position:relative;
  z-index:24;
  color:#000000;
  text-decoration:none;
  border-bottom: 0px dotted;
  font-weight: bold;
}

#main-navigation a.infobulle:hover{
  z-index:25;
}

#main-navigation a.infobulle span{
  display: none
}

#main-navigation a.infobulle:hover span{
  display:inline;
  position:absolute;
  border:1px solid grey;
  border-radius: 10px;
  background-color:orange;
  color:#000;
  font-weight:normal;
  text-align: center;
  margin-left: 5px;
  width:6em;}

appel en rajoutant la classe infobulle au sous menu de niveau 2:

Code :

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

<li><a class="infobulle" href="index.php"><img src="images/menu/menu1-1.png" alt="mon compte"><span>libellé sous menu 1</span>

Et ça fonctionne très bien! Ok!

Sauf, que je voudrais pouvoir changer la couleur de la bulle (orange -> rouge), mais uniquement pour le menu ADMIN.

Je pourrais bien sûr faire ça en créant une autre classe CSS #main-navigation a.infobulleRouge et ses dérivées, mais j'imagine qu'on peut faire ça en JS?
Changer la valeur de background-color dans #main-navigation a.infobulle:hover span?

Un truc genre (mélange de code php html & js, pour aller plus vite):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
if user==admin
{
JS_changer_couleur_bulle_dansCSS_pour_ce_menu_la();
<li>
<a href="index.php"><img src="images/menu/admin.png" alt="messagerie"><br/>Menu admin</a>
<ul>
<li><a class="infobulle" href="index.php"><img src="images/menu/admin-1.png" alt="boite de réception"><span>sous menu1</span></a></li>
<li><a class="infobulle" href="index.php"><img src="images/menu/admin-2.png" alt="boite d'envoi"><span>sous menu2</span></a></li>
</ul>
</li>
}

[Invité]

Bonjour,

pourquoi vouloir utiliser JavaScript quand le CSS suffit ???

Code html :

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

1
2
3
4
5
6
7
<li>
   <a href="index.php"><img src="images/menu/admin.png" alt="messagerie"><br/>Menu admin</a>
   <ul class="ssmenu-admin">
      <li><a class="infobulle" href="index.php"><img src="images/menu/admin-1.png" alt="boite de réception"><span>sous menu1</span></a></li>
      <li><a class="infobulle" href="index.php"><img src="images/menu/admin-2.png" alt="boite d'envoi"><span>sous menu2</span></a></li>
   </ul>
</li>

Code :

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

#main-navigation .ssmenu-admin a.infobulle:hover span { background-color:red; }

Et si je peux me permettre une amélioration :

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
#main-navigation a.infobulle span{
  display: none;
  position:absolute;
  width:100%;
  left:100%;
}
 
#main-navigation a.infobulle:hover span{
  display:inline-block; width:90%;
  border:1px solid grey;
  border-radius: 10px;
  background-color:orange;
  color:#000;
  font-weight:normal;
  text-align: center;
  margin-left: 5px;
  }
#main-navigation .ssmenu-admin a.infobulle:hover span { background-color:red; }
#main-navigation li:last-child ul li a.infobulle span {
  left:-100%;
}

N.B. Ce type de menu (avec affichage sur :hover) n'est pas adapté aux tablettes tactiles, ni smatphones.

[steph68b]

pourquoi vouloir utiliser JavaScript quand le CSS suffit ???

Parce que:
1.) je voyais plus de code CSS à écrire
2.) JS le permet d'après mes recherches
3.) à terme je voudrais pouvoir changer le background : url(...); du <body> selon l'heure de la journée
en gros:
-> 1 fond le jour
-> et 1 autre la nuit
et que ça, à part en JS, je ne vois pas comment conditionner du CSS...

Donc, changer la couleur de la bulle pour le menu admin, c'était un 1er pas JS, sur les CSS, voilà.