CSSCSS Media queries
Site responsive avec les media queries CSS
Médias queries CSS avec menu burger responsive
Le code HTML :<nav id="monnav">
<a href="#" id="burger" onclick="affichemenu()">☰</a>
<ul>
<li><a href="#" title="Destination">Destination</a></li>
<li><a href="#">Promos</a></li>
<li><a href="#">A propos</a></li>
</ul>
</nav>Le code Javascript :
function affichemenu() {
var varNav = document.getElementById("monnav");
/* Si il existe une classe ouvreMenu,
alors je lui rajoute la classe fermeMenu */
if (varNav.className === "ouvreMenu") {
varNav.className += " fermeMenu"; // Attention à l'espace
}
/* Sinon, je lui affecte la classe ouvreMenu */
else {
varNav.className = "ouvreMenu";
}
}
La feuille de style CSS:
/* Par défaut, le burger est caché */
#burger {
display:none; width:0px;
}
/* Si écran en dessous de 800px */
@media screen and (max-width:800px) {
/* Le menu classique disparaît */
nav ul li {
display:none;
width:0px;
}
/* Le burger apparaît */
nav #burger {
display:inline;
text-decoration: none; // fait disparaître le soulignement
}
/* Le menu du burger apparaît
Cette classe ouvreMenu est créée par le javascript */
nav.ouvreMenu ul li {
display:block;
width:100%;
}
/* Le menu du burger disparait
Cette classe fermeMenu est créée par le javascript */
nav.fermeMenu ul li {
display:none;
width:0px;
}
}Médias queries CSS avec contenu
Autre exemple, la page HTML contient un <div id="contenu"> avec une image dans un SPAN qui disparaît si l'on réduit l'écran au delà de 520 pixels. La page contient en plus un menu (sous forme de UL) qui change de position.Voici la page HTML :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Easy-Micro</title>
<link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<div id="principal">
<h1>Easy-Micro</h1>
<div id="menu">
<ul class="menuprincipal">
<li class="regle2"><a>Accueil</a></li>
<li class="regle2"><a>Produits</a></li>
<li class="regle2"><a>Contact</a></li>
</ul>
</div>
<div id="contenu">
Bienvenue à toutes et à tous, sur le site d'Easy-Micro<br><br>
<span class="regle1"><a href="https://www.easy-micro.org" target="_blank" title="Easy-Micro"><img src="images/1.jpg" class="monimg" alt="Easy-Micro"></a></span>visitez le site <a href="https://www.easy-micro.org" target="_blank" title="Easy-Micro">Easy-Micro</a><br>
Le Responsive Web Design regroupe une série de techniques de conception graphique et de développement <span class="regle1">permettant de créer un site qui pourra s'auto-adapter en fonction de la taille d'un écran.</span></div>
</div>
</body>
</html>
La feuille de style mystyle.css :
/* CSS classique */
img.monimg {
max-width: 80%; / responsive sur image */
border-style:none;
float:left;
margin-right:5px;
}
div#principal {
width:100%; /* responsive sur cadre principal */
margin-left:auto;
margin-right:auto;
}
div#menu {
float:none;
}
div#contenu {
width:85%;float:left;
}
li.regle2 {
display: inline; margin:10px;
}
/* Lorsque l'écran est inférieur à 520px */
@media screen and (max-width: 520px) {
/* on fait disparaître le span qui contient le texte */
#contenu span.regle1 {
display: none;
}
/* on change la position du menu */
div#menu {
float:left;
}
ul li.regle2 {
display: block;
}
}
Pour aller plus loin...