Menu vertical extensible

Version imprimable

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)

http://sdz-upload.s3.amazonaws.com/p...ub-hoover2.png

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

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.

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

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

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

11/12/2013, 10h31
betroix

C'est génial merci beaucoup !!!

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

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
#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;
}