Menu toujours affiché

Invité · 11/01/2015, 16h54

Bonjour,

J'avais fait (ça date un peu) la page suivante pour avoir un menu (image "liens.png") :

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
    <title>Liens
    </title>
    <link rel="stylesheet" type="text/css" href="menu.css" />
    <link rel="icon" type="image/png" href="icone.png" />
  </head>
  <body>
  <p><a id="haut"></a></p>
  <div id="menu">
    <ul>
      <li><a href="http://www.google.fr">Série 1</a>
        <ul>
          <li><a href="http://www.google.fr">Site 1</a></li>
          <li><a href="http://www.google.fr">Site 2</a></li>
          <li><a href="http://www.google.fr">Site 3</a></li>
          <li><a href="http://www.google.fr">Site 4</a></li>
          <li><a href="http://www.google.fr">Site 5</a></li>
        </ul>
      </li>
      <li><a href="http://www.google.fr">Série 2</a>
        <ul>
          <li><a href="http://www.google.fr">Site 1</a></li>
          <li><a href="http://www.google.fr">Site 2</a></li>
          <li><a href="http://www.google.fr">Site 3</a></li>
          <li><a href="http://www.google.fr">Site 4</a></li>
          <li><a href="http://www.google.fr">Site 5</a></li>
        </ul>
      </li>
      <li><a href="http://www.google.fr">Série 3</a>
        <ul>
          <li><a href="http://www.google.fr">Site 1</a></li>
          <li><a href="http://www.google.fr">Site 2</a></li>
          <li><a href="http://www.google.fr">Site 3</a></li>
          <li><a href="http://www.google.fr">Site 4</a></li>
          <li><a href="http://www.google.fr">Site 5</a></li>
        </ul>
      </li>
    </ul>
    </div>
  </body>
</html>

menu.css :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
body {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
}
 
div#menu {
font-weight: bold;
width: 200px;
margin-left: -50px;
margin-top: -14px;
text-align: center;
z-index: 100;
}
 
div#menu a {
display: block;
color: black;
text-decoration: none ;
background: url(./lien.png) no-repeat 0px 0px ;
line-height: 25px;
}
 
div#menu ul li {
list-style: none;
width: 200px;
height: 25px;
float: left;
}
 
div#menu ul ul {
position: relative;
top: -20px;
left: 150px;
display: none;
z-index: 120;
}
 
div#menu a:hover {
background: url(./lien.png) no-repeat 0px -25px ;
}
div#menu ul li:hover ul {display: block;}
div#menu ul li:hover ul li ul {display: none;}
div#menu ul li ul li:hover ul {display: block;}
div#menu ul li ul li:hover ul li ul {display: none;}
div#menu ul li ul li ul li:hover ul {display: block;}

J'aimerais savoir s'il est possible de faire un menu comme dans l'image "Test.png":
- Les sites affichés à droite devant rester affiché. Ce qui permettra d'utiliser ce menu avec une tablette tactile.
- Si on passe sur "Série 2" les 5 sites de la partie de droite changent.

Pour le moment, j'ai fait ceci (je me suis servi de ce que j'avais fait dans un autre de mes post).
La seule idée que j'ai pour modifier la liste affichée à droite serait l'utilisation du display none/block.
Suis-je sur la bonne voie ?

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
<!DOCTYPE html>
<html>
  <title>Liens</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="test.css" />
  <body>
    <p class="lien">Série 1</p>
    <p class="lien1"><a href="http://www.google.fr">Site 1</a></p>
    <span></span>
    <p class="lien">Série 2</p>
    <p class="lien2"><a href="http://www.google.fr">Site 2</a></p>
    <span></span>
    <p class="lien">Série 3</p>
    <p class="lien3"><a href="http://www.google.fr">Site 3</a></p>
    <span></span>
    <p class="lien">Série 4</p>
    <p class="lien4"><a href="http://www.google.fr">Site 4</a></p>
    <span></span>
    <p class="lien">Série 5</p>
    <p class="lien5"><a href="http://www.google.fr">Site 5</a></p>
  </body>
</html>

test.css

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
body {
  background-color: #000000;
  font-weight: bold;
}
 
a {
  color: #000000;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
 
span:empty {
  display: block;
  clear: both;
}
 
p {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
  font-size: 13px;
  color: #000000;
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  margin: 5px;
  float: left;
  width: 300px;
}
 
p:hover {
  background-color: #6689FF;
}
 
.lien {
  background-color: #FFFFFF;
}
 
.lien1 {
  background-color: #FFC759;
}
 
.lien2 {
  background-color: #FFC759;
}
 
.lien3 {
  background-color: #FFC759;
}
 
.lien4 {
  background-color: #FFC759;
}
 
.lien5 {
  background-color: #FFC759;
}

Merci

**miss_socrates** · 11/01/2015, 22h33

Pourquoi créer un menu avec des balises <p> ? Il faut des items de liste <li> dans des <ul> (comme dans le 1er code).
Et oui, les mettre en display: block

Invité · 12/01/2015, 00h03

Je n'arrive pas à faire ce que je souhaite avec les balise ul/li ...

Voici ce que j'ai fait et le résultat est l'image en pièce jointe.

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
    <title>Liens
    </title>
    <link rel="stylesheet" type="text/css" href="menu.css" />
    <link rel="icon" type="image/png" href="icone.png" />
  </head>
  <body>
  <p><a id="haut"></a></p>
  <div id="menu">
    <ul>
      <li class="serie1">Série 1
        <ul>
          <li class="site"><a href="http://www.google.fr">Site 1</a></li>
          <li class="site"><a href="http://www.google.fr">Site 2</a></li>
          <li class="site"><a href="http://www.google.fr">Site 3</a></li>
          <li class="site"><a href="http://www.google.fr">Site 4</a></li>
          <li class="site"><a href="http://www.google.fr">Site 5</a></li>
        </ul>
      </li>
      <li class="serie2">Série 2
        <ul>
          <li class="site"><a href="http://www.google.fr">Site 2</a></li>
          <li class="site"><a href="http://www.google.fr">Site 3</a></li>
          <li class="site"><a href="http://www.google.fr">Site 4</a></li>
          <li class="site"><a href="http://www.google.fr">Site 5</a></li>
          <li class="site"><a href="http://www.google.fr">Site 6</a></li>
        </ul>
      </li>
      <li class="serie3">Série 3
        <ul>
          <li class="site"><a href="http://www.google.fr">Site 3</a></li>
          <li class="site"><a href="http://www.google.fr">Site 4</a></li>
          <li class="site"><a href="http://www.google.fr">Site 5</a></li>
          <li class="site"><a href="http://www.google.fr">Site 6</a></li>
          <li class="site"><a href="http://www.google.fr">Site 7</a></li>
        </ul>
      </li>
    </ul>
    </div>
  </body>
</html>

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
34
35
36
37
38
39
40
41
body {
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  background-color: #000000;
  color: #FFFFFF;
}
 
div#menu {
  margin-top: -10px;
  font-weight: bold;
  text-align: center;
  width: 400px;
  line-height: 25px;
}
 
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
 
li {
  display: block;
  background-color: #FFC759;
  color: #000000;
  text-decoration: none ;
  padding: 10px;
  border-radius: 10px;
  margin: 0px 10px 10px 0px;
  list-style: none;
  width: 200px;
}
li.site:hover { background-color: #6689FF; }
 
li li {
  position: relative;
  top: -35px;
  left: 220px;
  list-style: none;
  width: 200px;
}

Sinon avec l'autre méthode, j'ai presque réussi à avoir le bon résultat.
Seul problème: la modification n'est pas permanente et le fait de passer sur une "série" ne modifie pas les cases de droite qui sont au-dessus...

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
<!DOCTYPE html>
<html>
  <title>Liens</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="test.css" />
  <body>
    <p class="serie1">Série 1</p>
    <p class="lien"><a class="serie1" href="http://www.google.fr">Site 1</a><a class="serie2" href="http://www.google.fr">Site 2</a><a class="serie3" href="http://www.google.fr">Site 3</a></p>
    <span></span>
    <p class="serie2">Série 2</p>
    <p class="lien"><a class="serie1" href="http://www.google.fr">Site 2</a><a class="serie2" href="http://www.google.fr">Site 3</a><a class="serie3" href="http://www.google.fr">Site 4</a></p>
    <span></span>
    <p class="serie3">Série 3</p>
    <p class="lien"><a class="serie1" href="http://www.google.fr">Site 3</a><a class="serie2" href="http://www.google.fr">Site 4</a><a class="serie3" href="http://www.google.fr">Site 5</a></p>
    <span></span>
    <p class="serie4">Série 4</p>
    <p class="lien"><a class="serie1" href="http://www.google.fr">Site 4</a><a class="serie2" href="http://www.google.fr">Site 5</a><a class="serie3" href="http://www.google.fr">Site 6</a></p>
    <span></span>
    <p class="serie5">Série 5</p>
    <p class="lien"><a class="serie1" href="http://www.google.fr">Site 5</a><a class="serie2" href="http://www.google.fr">Site 6</a><a class="serie3" href="http://www.google.fr">Site 7</a></p>
  </body>
</html>

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
body {
  background-color: #000000;
  font-weight: bold;
}
 
a {
  color: #000000;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
 
span:empty {
  display: block;
  clear: both;
}
 
p {
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
  font-size: 13px;
  background-color: #FFFFFF;
  color: #000000;
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  margin: 0px 10px 10px 0px;
  float: left;
  width: 300px;
}
 
p:hover {
  background-color: #6689FF;
}
 
a.serie2 { display: none; }
a.serie3 { display: none; }
 
p.serie1:hover ~ p.lien a.serie1 { display: inline; }
p.serie1:hover ~ p.lien a.serie2 { display: none; }
p.serie1:hover ~ p.lien a.serie3 { display: none; }
 
p.serie2:hover ~ p.lien a.serie1 { display: none; }
p.serie2:hover ~ p.lien a.serie2 { display: inline; }
p.serie2:hover ~ p.lien a.serie3 { display: none; }
 
p.serie3:hover ~ p.lien a.serie1 { display: none; }
p.serie3:hover ~ p.lien a.serie2 { display: none; }
p.serie3:hover ~ p.lien a.serie3 { display: inline; }
 
.lien {
  background-color: #FFC759;
}

**mondoudou** · 13/01/2015, 05h52

Bonjour,
Il va etre difficile de garder une modification permanente sans une classe active avec javascript je crois.

Invité · 13/01/2015, 15h06

Ok, donc je vais voir si j'arrive à faire quelque chose avec les listes et une position absolue. Mais comme j'aimerais avoir de l'espace entre chaque bloc ça ne devrait pas fonctionner vu que les modifications ne seront que temporaires.

C'est sûr qu'en javascript j'arriverais à faire ce que je souhaite. Mais je pensais bêtement que le css 3 pourrait éventuellement me permettre de s'en passer.

**NoSmoking** · 13/01/2015, 20h04

Bonjour,

Mais je pensais bêtement que le css 3 pourrait éventuellement me permettre de s'en passer.

effectivement, et comme j'ai un exemple sous la main

Galerie au clic sans JavaScript

Invité · 14/01/2015, 00h57

C'est parfait

Il m'a suffit de faire quelques modifications:
- remplacer les images par les paragraphes
- placer les paragraphes correspondant aux liens via une position absolue
- rajouter le z-index pour que les liens affiché soit bien au premier plan (sinon c'était toujours les mêmes malgré le texte qui changeait)

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
<!DOCTYPE html>
<html>
  <title>Liens</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="test.css" />
  <body>
<div>
  <input type="radio" id="check_1" name="check" class="r_check" checked="checked">
  <label for="check_1"><p>Série 1</p></label>
  <p class="lien1"><a href="http://www.google.fr">Site 1</a></p>
  <p class="lien2"><a href="http://www.google.fr">Site 2</a></p>
  <p class="lien3"><a href="http://www.google.fr">Site 3</a></p>
  <p class="lien4"><a href="http://www.google.fr">Site 4</a></p>
  <p class="lien5"><a href="http://www.google.fr">Site 5</a></p>
</div>
<div>
  <input type="radio" id="check_2" name="check" class="r_check">
  <label for="check_2"><p>Série 2</p></label>
  <p class="lien1"><a href="http://www.google.com">Site 2</a></p>
  <p class="lien2"><a href="http://www.google.com">Site 3</a></p>
  <p class="lien3"><a href="http://www.google.com">Site 4</a></p>
  <p class="lien4"><a href="http://www.google.com">Site 5</a></p>
  <p class="lien5"><a href="http://www.google.com">Site 6</a></p>
</div>
  </body>
</html>

Le fichier css:

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
<!--
 
body {
  background-color: #000000;
  font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, sans-serif;
  font-size: 13px;
  font-weight: bold;
}
 
p {
  background-color: #FFFFFF;
  color: #000000;
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  margin: 0px 10px 10px 0px;
  width: 300px;
}
a {
  color: #000000;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
p:hover {
  background-color: #6689FF;
}
 
.r_check{
  opacity:0;
  position:absolute;
}
.lien1{ background-color: #FFC759; position:absolute; width:300px; top:  10px; left: 340px; opacity:0; z-index: 50; }
.lien2{ background-color: #FFC759; position:absolute; width:300px; top:  60px; left: 340px; opacity:0; z-index: 50; }
.lien3{ background-color: #FFC759; position:absolute; width:300px; top:  110px; left: 340px; opacity:0; z-index: 50; }
.lien4{ background-color: #FFC759; position:absolute; width:300px; top:  160px; left: 340px; opacity:0; z-index: 50; }
.lien5{ background-color: #FFC759; position:absolute; width:300px; top:  210px; left: 340px; opacity:0; z-index: 50; }
.r_check:checked ~ .lien1 { opacity:1; z-index: 100; }
.r_check:checked ~ .lien2 { opacity:1; z-index: 100; }
.r_check:checked ~ .lien3 { opacity:1; z-index: 100; }
.r_check:checked ~ .lien4 { opacity:1; z-index: 100; }
.r_check:checked ~ .lien5 { opacity:1; z-index: 100; }
 
-->

Il me reste plus qu'à faire de petites modifications mais le plus dur est fait et sans javascript

**NoSmoking** · 14/01/2015, 21h02

Il me semble qu'il y avait plus simple comme positionnement en partant sur la base d'une structure UL LI comme suggéré par miss_socrates.

Je te mets un exemple de ce que je voyais plutôt

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
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[...]</title>
<meta name="Author" content="NoSmoking">
<style>
body {
    font:normal 1.0em/1.5em Verdana,Arial,Helvetica,sans-serif;
    background: #000;
    color:#FFF;
}
.r_check{
/*  display:none; /* si masqué pas d'accès avec les touches */
    opacity:0;
    position:absolute;
}
.r_check,
.on_check{
    cursor: pointer;
}
#menu {
    position:relative;
    float:left;
    color:#000;
}
/*-- UL de 1st niveau --*/
ul {
    /*-- reset UL --*/
    list-style: none;
    margin: 0;
    padding: 0;
}
/*-- UL de 2nd niveau --*/
ul ul{
    position:absolute;
    left:100%;
    top:0;
    margin:0;
    display:none;   /* non visible au départ */
/*    opacity:0;      /* autre possibilité */
}
li,
label {
    display: block;
    line-height:3em;
    width: 12em;
    text-align:center;
    padding: 0;
    margin: 0 0 0.5em 0;
    background-color: #FFC759;
    border-radius: 10px;
}
li{
    margin: 0px 0.5em 0.5em;
}
li:hover {
    background-color: #6689FF;
}
/*-- mise en forme des liens A --*/
li a {
    display:block;
    color: #000;
    text-decoration: none ;
}
/*-- apparition des sous menus --*/
.r_check:checked ~ ul {
/*  opacity:1;      /* autre possibilité */
  display:block;/**/
}
/* modification du style du contenu du label */
:checked +label{
    font-weight:bold;
}
</style>
</head>
<body>
  <ul id="menu">
    <li>
      <input type="radio" id="menu_1" name="check" class="r_check" checked="checked"><!-- checked à supprimer éventuellement -->
      <label for="menu_1" class="on_check">Menu #1</label>
        <ul>
          <li class="site"><a href="">Menu 1.1</a></li>
          <li class="site"><a href="">Menu 1.2</a></li>
          <li class="site"><a href="">Menu 1.3</a></li>
          <li class="site"><a href="">Menu 1.4</a></li>
          <li class="site"><a href="">Menu 1.5</a></li>
        </ul>
    </li>
    <li>
      <input type="radio" id="menu_2" name="check" class="r_check">
      <label for="menu_2" class="on_check">Menu #2</label>
        <ul>
          <li class="site"><a href="">Menu 2.1</a></li>
          <li class="site"><a href="">Menu 2.2</a></li>
          <li class="site"><a href="">Menu 2.3</a></li>
          <li class="site"><a href="">Menu 2.4</a></li>
          <li class="site"><a href="">Menu 2.5</a></li>
        </ul>
    </li>
    <li>
        <input type="radio" id="menu_3" name="check" class="r_check">
      <label for="menu_3" class="on_check">Menu #3</label>
        <ul>
          <li class="site"><a href="">Menu 3.1</a></li>
          <li class="site"><a href="">Menu 3.2</a></li>
          <li class="site"><a href="">Menu 3.3</a></li>
          <li class="site"><a href="">Menu 3.4</a></li>
          <li class="site"><a href="">Menu 3.5</a></li>
        </ul>
    </li>
  </ul>
</body>
</html>

le seul CSS intéressant, pour la gestion des sous menus, se résumant à

Code :

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

1
2
3
4
5
/*-- apparition des sous menus --*/
.r_check:checked ~ ul {
/*  opacity:1;      /* autre possibilité */
  display:block;/**/
}

le reste n'étant que mise en forme.

Invité · 14/01/2015, 22h04

Je ne dit pas le contraire, je n'étais pas certain de garder les paragraphes. Il me manquait juste du temps pour faire plus de tests (notamment sur la gestion des couleurs).
C'est ce que j'appelle "petite modification"

**mondoudou** · 14/01/2015, 22h40

Bonjour,
Bravo pour ces menus au click
J'avais refait ce menu aussi comme suggéré avec des li, mais avec des menus qui changent au survol et non au click, mais j'ai du terminer en utilisant du javascript.
Est il possible uniquement en css de faire que le bloc de droite change et reste affiché mais au survol des liens de gauche, je n'ai pas pu trouvé ?

**NoSmoking** · 15/01/2015, 19h53

Est il possible uniquement en css de faire que le bloc de droite change et reste affiché mais au survol des liens de gauche, je n'ai pas pu trouvé ?

le :hover CSS "libére" le style appliqué dès qu'il (le :hover) n'est plus effectif, donc NON il te faut passer par du javascript.

**mondoudou** · 15/01/2015, 23h20

Merci pour cette réponse

Invité · 15/01/2015, 23h41

@NoSmoking : j'ai eu un peu de mal à bien comprendre tout ton CSS mais ça va mieux maintenant. Je ne suis pas un pro du css et mon menu avec les listes était très vieux

Je ne savais pas non plus qu'on pouvait utiliser em pour le font-size. Pratique pour utiliser ce menu sur plusieurs appareils

Merci encore pour ton aide

Menu toujours affiché

CSS

Discussions similaires

Partager

Partager