Discussion :

[JuliaIta]

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


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

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

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

[JuliaIta]

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

[rodolphebrd]

Pour le triangle voici une proposition en 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
 .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