Menu vertical extensible

**betroix** · 10/12/2013, 13h25

Hello,

J'aimerais designer un menu tel que sur l'image (ci-dessous) mais je rencontre quelques difficultés alors j'ai vraiment besoin d'être guidé.

J'ai au départ utilisé des images pour représenter chaque item du menu mais cette solution s'avérait être inefficace:

ralentissement du chargement de la page
j'ai du mal à faire afficher le menu sur toute la page.

(Juste une précision, lorsque l'on passe la souris sur un élément menu, on fait apparaître tous les sous-menus associés)

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
<!DOCTYPE html>
    <head>
        <meta charset="utf-8" />
        <title>Menu &amp; Rotation</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <ul>
            <li class="menu"> MENU 1
                <ul>
                    <li class="submenu">SUBMENU 1</li>
                    <li class="submenu">SUBMENU 2</li>
                    <li class="submenu">SUBMENU 3</li>
                </ul>
            </li>
            <li class="menu"> MENU 2
                <ul>
                    <li class="submenu">SUBMENU 4</li>
                    <li class="submenu">SUBMENU 5</li>
                    <li class="submenu">SUBMENU 6</li>
                </ul>
            </li>
            <li class="menu"> MENU 3
                <ul>
                    <li class="submenu">SUBMENU 7</li>
                    <li class="submenu">SUBMENU 8</li>
                    <li class="submenu">SUBMENU 9</li>
                </ul>
            </li>
            <li class="menu"> MENU 4
                <ul>
                    <li class="submenu">SUBMENU 10</li>
                    <li class="submenu">SUBMENU 11</li>
                    <li class="submenu">SUBMENU 12</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

Pour le css, j'ai quelques éléments de réponse, mais globalement j'utiliserai quelque chose comme ça. J'ai évité de mettre le code CSS complet utilisé parce que de toutes les façons il est erroné. J'ai beau suivre des tutoriels ça ne marche.

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
.menu
{
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: lr-tb;
    background-color:blue;
    color:white;
}
 
 
.submenu
{
    display:none;
}
 
.menu:hover .submenu
{
    /***/
}

Merci d'avance de votre aide.

Invité · 10/12/2013, 16h38

Bonjour,
voila une solution (à peaufiner) : http://codepen.io/jreaux62/pen/yKvGm

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
        <ul id="menu">
            <li><a href="..."><span>MENU 1</span></a>
                <ul>
                    <li><a href="...">SUBMENU 1</a></li>
                    <li><a href="...">SUBMENU 2</a></li>
                    <li><a href="...">SUBMENU 3</a></li>
                </ul>
            </a></li>
            <li><a href="..."><span>MENU 2</span></a>
                <ul>
                    <li><a href="...">SUBMENU 4</a></li>
                    <li><a href="...">SUBMENU 5</a></li>
                    <li><a href="...">SUBMENU 6</a></li>
                </ul>
            </a></li>
            <li><a href="..."><span>MENU 3</span></a>
                <ul>
                    <li><a href="...">SUBMENU 7</a></li>
                    <li><a href="...">SUBMENU 8</a></li>
                    <li><a href="...">SUBMENU 9</a></li>
                </ul>
            </a></li>
            <li><a href="..."><span>MENU 4</span></a>
                <ul>
                    <li><a href="...">SUBMENU 10</a></li>
                    <li><a href="...">SUBMENU 11</a></li>
                    <li><a href="...">SUBMENU 12</a></li>
                </ul>
            </a></li>
        </ul>

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
#menu
{
  width:0;
}
#menu li
{
	position:relative;
	list-style:none;
}
#menu > li
{
  position:relative;
	margin:0 0 55px 0;
}
#menu > li > a span 
{
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	writing-mode: lr-tb;
	display:inline-block;
	background-color:blue;
  text-align:center;
	color:white;
	padding:10px 10px;
  width:70px;
}
#menu > li > ul
{
	position:absolute;
	display:none;
	top:-25px;
	left:30px;
}
 
#menu > li:hover > ul
{
	display:block;
	clear:both;
}
#menu > li > ul > li
{
}
#menu > li > ul > li > a
{
    display:inline-block;
    width:120px;
    background-color:#ccc;
    color:blue;
	padding:2px 10px;
	margin:2px 0 0;
	text-decoration:none;
}
#menu > li > ul > li:hover > a
{
    background-color:blue;
    color:white;
}

N.B. Il y a très certainement mieux...

**betroix** · 11/12/2013, 10h31

C'est génial merci beaucoup !!!

Invité · 11/12/2013, 11h03

Version améliorée (plus "compacte") : http://codepen.io/jreaux62/pen/yKvGm

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
#menu
{
	width:0;
}
#menu li
{
	position:relative;
	list-style:none;
}
#menu > li
{
	margin:0 0 25px 0;
	height:80px;
	left:-30px;
}
#menu > li > a 
{
	position:relative;
	display:inline-block;
	height:0px;
	width:0px;
	background-color:green;
	left:-35px;
	top:15px;
}
#menu > li > a span 
{
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
	writing-mode: lr-tb;
	display:inline-block;
	background-color:blue;
	text-align:center;
	color:white;
	padding:10px 10px;
	width:80px;
}
#menu > li > ul
{
	position:absolute;
	display:none;
	top:-17px;
	left:0px;
}
 
#menu > li:hover > ul
{
	display:block;
	clear:both;
}
#menu > li > ul > li
{
}
#menu > li > ul > li > a
{
	display:inline-block;
	width:120px;
	background-color:#ccc;
	color:blue;
	padding:2px 10px;
	margin:2px 0 0;
	text-decoration:none;
}
#menu > li > ul > li:hover > a
{
	background-color:blue;
	color:white;
}

Menu vertical extensible

CSS

Vue hybride

Discussions similaires

Partager

Partager