Menu latéral

Version imprimable

1 pièce(s) jointe(s)

Menu latéral

Bonjour à tous,

Je suis de retour vue que la première on m'a très bien aidé donc j'aimerais avoir un menu latéral de ce genre*:
Pièce jointe 144929

Le fond de mon titre (Menu secondaire) est composé d'un fond en rectangle qui déborde sur les côtés. Il y a aussi un petit triangle sur la gauche dans le coin pour donné un effet de relief. De plus, j'aimerais avoir une ombre sous ce rectangle comme le montre la photo. Ensuite, les liens de ma liste à puce ont un trait sous chacun d'eux mais le dernier ne doit pas en avoir.
Comment réaliser ce genre de menu*? Pour l'instant, j'ai réalisé seulement la mise en forme de ce menu. Pour les éléments un peu plus compliqué à appliquer je ne sais pas trop comment m'y prendre. Il faut savoir que ce menu sera amené à modification avec plus ou moins de liens.

HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="css.css" rel="stylesheet" type="text/css" />
 
<div class="contenu-menu">
    <div class="menu-secondaire">
        <div class="zone-menu">
            <aside class="menu-sec"><h3 class="menu-titre">Menu secondaire</h3>
                <ul class="menu">
                    <li class="menu-item1"><a href="#">Item 1</a></li>
                    <li class="menu-item2"><a href="#">Item 2</a></li>
                    <li class="menu-item3"><a href="#">Item 3</a></li>
                    <li class="menu-item4"><a href="#">Item 4</a></li>
                    <li class="menu-item5"><a href="#">Item 5</a></li>
                </ul>
            </aside>
        </div>
    </div>
</div>

CSS

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
.contenu-menu {
    height: 0;
    position: absolute;
    top: 40px;
    width: 100%;
    z-index: 1;
}
 
.menu-secondaire {
    margin: 0 auto;
    max-width: 1140px;
}
 
.zone-menu {
    float: right;
    width: 200px;
    padding: 0 0 0 10px;
}
 
.menu-sec {
    font-size: 14px;
    -webkit-hyphens: auto;
    -moz-hyphens:    auto;
    -ms-hyphens:     auto;
    hyphens:         auto;
    margin: 0 0 24px;
    padding: 20px;
    word-wrap: break-word;
    background-color: #e3e3e3;
 
}
 
.menu-sec .menu-titre {
    font: 300 italic 20px , Arial;
    margin: 0 0 10px;
    background-color: #868686;
    text-align: center;
}
 
.menu-sec ul,
.menu-sec ol {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
.menu-sec li {
    padding: 5px 0;
}
 
.menu-sec .children li:last-child {
    padding-bottom: 0;
}
 
.menu-sec li > ul,
.menu-sec li > ol {
    margin-left: 20px;
}
 
.menu-sec a {
    color: #000;
}
 
.menu-sec a:hover {
    color: #fff;
}

05/05/2014, 19h30
rodolphebrd

Bonjour,

Pour le triangle il faut utiliser les pseudo-éléments before et after;
Pour l'ombre, box-shadow;
pour les lignes séparatrices, border;

Concernant l'utilisation de l'élément aside j'opterai plutôt pour un nav.

Alors pour l'ombre c'est bon. J'ai réussi à placé les séparations sous chaque lien sauf pour le dernier, ce que je voulais donc obtenir. Déjà merci.
Par contre, j'ai quelques difficultés avec les pseudos-éléments. Dans un premier temps, j'appelle mon triangle en png donc là pas de soucis mais par je n'arrive pas à le placé correctement. Je veux le placer à l’extrémité extérieur de la balise "zone-menu".
De plus, je ne suis toujours pas parvenu à faire dépassé la background de ma balise "menu-title". Je voudrais que le background s'étire afin de le faire sortir de ma balise "zone-menu" comme dans l'exemple que j'avais posté.

Voilà mon code.

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
71
72
73
74
75
76
77
78
79
.contenu-menu {
	height: 0;
	position: absolute;
	top: 40px;
	width: 100%;
	z-index: 1;
}
 
.menu-secondaire {
	margin: 0 auto;
	max-width: 1140px;
}
 
.zone-menu {
	float: right;
	width: 200px;
	padding: 0 0 0 10px;
}
 
.menu-sec {
	font-size: 14px;
	-webkit-hyphens: auto;
	-moz-hyphens:    auto;
	-ms-hyphens:     auto;
	hyphens:         auto;
	margin: 0 0 24px;
	padding: 20px;
	word-wrap: break-word;
	background-color: #e3e3e3;
	-moz-box-shadow: 2px 2px 2px 0px #656565;
    -webkit-box-shadow: 2px 2px 2px 0px #656565;
    -o-box-shadow: 2px 2px 2px 0px #656565;
    box-shadow: 2px 2px 2px 0px #656565;   
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#656565, Direction=134, Strength=2);
 
}
 
.zone-menu .menu-titre {
	font: 300 italic 20px , Arial;
	margin: 0 0 10px;
	background-color: #868686;
	text-align: center;
}
 
.menu-sec ul,
.menu-sec ol {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
 
.menu-sec li {
	padding: 5px 0;
	border-bottom: 1px solid red;
}
.menu-sec li:last-child { border-bottom: none ;}
 
.menu-sec .children li:last-child {
	padding-bottom: 0;
}
 
.menu-sec li > ul,
.menu-sec li > ol {
	margin-left: 20px;
}
 
.menu-sec a {
	color: #000;
	text-decoration: none;
}
 
.menu-sec a:hover {
	color: #fff;
}
 
.zone-menu:before {
   content: url(images/triangle.png);
   float: left;
}

Pour le triangle voici une proposition en CSS:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 .menu-titre{   padding-top: 5px;
   padding-bottom: 5px;
   width: 220px;
   left: -10px;
   box-shadow: 0px 2px 4px #666;
   position: relative;
 }
.menu-titre:before{
  position: absolute;
  bottom: -10px;
  content:"";
  display: block;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-top: 10px solid #666;
}

http://codepen.io/rodolpheb/pen/FsmaL