Easy-Micro

TECHNIQUE CSS
CSS 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()">&#9776;</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";
}
        
}
Ce code Javascript créé deux classes qui n'existe pas dans le fichier HTML : ouvreMenu et fermeMenu

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

/* Losque l'écran est inférieur à 480px */
@media screen and (max-width: 480px) {

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

}

Responsive web design Pour aller plus loin...


Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]