Media query et menu hamburger
Bonjour à tous,
J'ai mis en place un site sur lequel se trouve un menu standard et un menu hamburger pour la navigation sur smartphone. Sur mes navigateurs(Chrome,Firefox) tout se passe à merveille. Le menu principal est affiché puis disparait lorsque je réduis ma fenêtre pour laisser place au menu hamburger. Cependant sur mobile, le menu hamburger n'apparait pas et le menu standard est toujours visible ! Je ne vois pas comment faire puisque tout fonctionne bien lorsque je suis sur ordinateur.
voici le code html et 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
| <!--Menu standard-->
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="pages/competences.html">Compétences</a></li>
<li><a href="pages/projets.html">Projets</a></li>
<li><a href="pages/veilleTechno.html">Veille Technologique</a></li>
<li><a href="pages/contact.php">Contact</a></li>
</ul>
</nav>
<!--Menu smartphone-->
<div class="toggle_btn">
<span></span>
</div>
<div class="menu nav">
<a class="logo">Portfolio</a>
<a href="index.html">Accueil</a>
<a href="pages/competences.html">Compétences</a>
<a href="pages/projets.html">Projets</a>
<a href="pages/veilleTechno.html">Veille Technologique</a>
<a href="pages/contact.php">Contact</a>
</div>
<!--Appel du fichier javascript pour le menu smartphone-->
<script type = "text/javascript" src="js/app.js"></script> |
et le 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
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
|
*{
font-family: 'helvetica';/*police par défaut du site */
box-sizing: border-box; /*simplifie la mise en place des elements*/
margin: 0; /*initikalise les marges exterieures du navigateur*/
padding: 0; /*initialise les marges interieure du navigateur*/
text-decoration: none; /*supprime le soulignement et le chgt de couleur des liens*/
}
body{
background-image: url(../css/images/ia.jpg);/*image de fond*/
background-repeat: no-repeat;/*L'image de fond ne se repete pas*/
background-attachment: fixed; /*L'image de fond est fixe*/
background-size: 100%;/*le fond prend 100% de la page */
background-position: center;/* l'image de fond est centrée*/
background-size:cover;/*l'image de fond s'adapte à la taille de la fenetre*/
}
nav{
margin-top: 30px;/*Se situe à 30px de la marge superieure*/
display: flex;/* ce cinteneur est flexible*/
justify-content: center;/*La barre de lenu est centrée*/
}
nav ul {
display:flex;/*Conteneur flexible*/
flex-direction: row;/*les elements sont à l'hirizontal*/
list-style:none;/* liste à puce sans points*/
}
nav ul li {
width:180px;/*Largeur*/
height:40px;/*heuteur*/
background-color:black;/*couleur de fond*/
opacity:0.8;/*transparence */
line-height:40px;/*Le texte est centré à l'horizontal*/
text-align: center;/*Le texte est centré*/
font-size:15px;/*Taille de la police*/
font-weight: bold;/*police en gras*/
margin-right: 5px;/*marge à droite pour séparer les elements*/
}
nav ul li a {
text-decoration: none;/*les liens ne sont pas soulignés*/
color:white;/*couleur du texte*/
}
nav ul li:hover {
background-color:#ccccff; /* Couleur du fond au passage de la souris */
box-shadow: 64px 64px 5px 40px rgba(0,0,0,0.4),
12px 0px 5px 24px rgba(0,0,0,0.4) inset;/*effets d'ombre sur le menu*/
transition-duration: 0.4s;
}
.logo{
display:none;/*le logo du menu smartphone disparait*/
}
div a{
display:none;/*menu smartphone disparait*/
}
/*********************************************************************/
/* Smartphone taille max 570px*/
/***********************************************************************/
@media screen and (max-width:570px) {
html,body{
padding:0;/*initialisatoin des marges*/
margin:0;/*initialisaton des marges*/
}
nav{
display:none;/*LE menu standard disparait*/
}
div a:hover{
background-color:grey; /* Couleur du fond au passage de la souris */
}
.toggle_btn{
height:30px;
width:30px;
position:relative;
float:right;
margin-right: 10px;
margin-top: 0px;
cursor: pointer;
z-index: 1;
}
.toggle_btn span{
height: 3px;
background-color: white;
width:100%;
position:absolute;
top:20px;
left:0;
}
.toggle_btn span:before{
content:'';
height: 3px;
background-color: white;
width:100%;
position:absolute;
top:-10px;
left:0;
}
.toggle_btn span:after{
content:'';
height: 3px;
background-color: white;
width:100%;
position:absolute;
top:10px;
left:0;
}
.nav{
height:500px;
background-color: black;
width:200px;
z-index: 1;
position:absolute;
}
.menu a{
color: white;
font-family: 'helvetica';
text-align: center;
display:block;
padding:30px;
text-decoration: none;
}
.logo{
text-transform: uppercase;
font-weight: bold;
font-size:24px;
}
.nav{
margin-left: -200px;
transition: 0.2s;
}
.nav_open{
margin-left: 0;
transition-duration: 0.2s;
}
} |
Merci d'avance pour votre aide !!!
