Un menu responsive

Pascal FurlanCSS, HTML

L’exercice présenté dans cet article consiste à créer un menu responsive pour un site fictif de galeries de photos, c’est-à-dire un menu dont la disposition va s’adapter en fonction de l’écran de chaque visiteur.

Il est important de renseigner une balise meta name="viewport" dans le Head ainsi qu’un label avec un élément input type="checkbox" associé pour permettre de déplier et de replier le menu. L’idée ici va être de n’afficher le menu que si la case a été cochée et de le cacher à nouveau dès que celle-ci est décochée.

Ci-dessous, les codes HTML et CSS, ainsi que des captures d’écran des trois types d’affichage.

Le squelette HTML

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
    <title>Pascal Furlan Photos | Bienvenue dans ma galerie de photos !</title>
</head>

<body>
    <div class="enveloppe">

        <header class="super-entete">
            <div class="entete">
                <div class="logo"><img
                        src="https://galerie.pascalfurlan.com/cache/249457de320d54263c24ae269c3f9072_l50h50r.jpg"></div>
                <div class="titre-logo">Pascal Furlan Photos</div>
            </div>

            <nav class="navigation-principale">

                <input id="controle-menu-principal" type="checkbox">
                <label for="controle-menu-principal" class="bouton-menu"></label>

                <ul class="menu">
                    <li><a href="avions.html">Avions</a></li>
                    <li><a href="trains.html">Trains</a></li>
                    <li><a href="voitures.html">Voitures</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </nav>
        </header>

        <main class="section-principale">
        </main>

        <footer class="pied-page">
        </footer>
    </div>
</body>

</html>

Les styles CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700|Raleway:300,400,600,700&display=swap');

*,
::after,
::before {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    color: #454545;
}

img {
    max-width: 100%;
    display: block;
}

h1,
h2,
h3,
p {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
}

.enveloppe {
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
}

.entete {
    display: flex;
    align-items: center;
    background-color: #263238;
    color: #fff;
}

.titre-logo {
    padding: 0 0 0 20px;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    display: none;
}

.menu li {
    padding: 14px 0;
    border-bottom: 1px solid #ecf0f1;
}

.menu li a {
    text-decoration: none;
    color: inherit;
}

.menu li:hover {
    background-color: #34495e;
    color: #fff;
}

#controle-menu-principal {
    display: none;
}

.bouton-menu {
    position: relative;
    display: block;
    padding: 0;
    color: #fff;
    height: 0;
}

.bouton-menu::after {
    content: "\2261";
    position: absolute;
    right: 1em;
    top: -54px;
    font-size: 2.5em;
}

#controle-menu-principal:checked~.menu {
    display: block;
}

@media screen and (min-width:992px) {
    .enveloppe {
        max-width: 1280px;
        margin: 0 auto;
        box-shadow: 1px 1px 30px 0px #ccc;
    }

    .bouton-menu {
        display: none;
    }

    .super-entete {
        display: flex;
        flex-basis: 100%;
        background-color: #263238;
        color: #fff;
        justify-content: space-between;
        align-items: center;
    }

    .menu {
        display: block;
        padding: 0 30px 0 0;
    }

    .menu li {
        display: inline-block;
        border: none;
        padding: 0 20px;
    }

    .menu li:hover {
        background: none;
        color: #ccc
    }

}

Les captures d’écran

Version mobile

Version tablette

Version PC