Se Connecter
Contact

Exercices HTML CSS

Exercice 5 HTML et CSS Corrigé S4

Exercice 5 : Menu de navigation responsive avec flexbox

Objectif : Créer un menu de navigation flexible et responsive en utilisant flexbox.

Instructions :

  • Créez un en-tête avec un logo à gauche et un menu de navigation à droite.
  • Le menu de navigation doit se transformer en menu hamburger sur les petits écrans.
  • Utilisez flexbox pour positionner correctement le contenu.
  • Utilisez du JavaScript basique pour ouvrir et fermer le menu sur mobile.

Points à évaluer :

  • Utilisation de flexbox pour le positionnement.
  • Réalisation d’un menu responsive avec un hamburger.
  • Bonne utilisation de CSS media queries.

Étape 1 : Structure HTML

Nous allons d'abord créer la structure HTML pour l'en-tête avec un logo et un menu de navigation.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menu de navigation responsive</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <div class="container">
            <div class="logo">
                <a href="#">MonSite</a>
            </div>
            <nav class="nav">
                <ul>
                    <li><a href="#">Accueil</a></li>
                    <li><a href="#">À propos</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
            <div class="hamburger" onclick="toggleMenu()">
                &#9776;
            </div>
        </div>
    </header>

    <script>
        function toggleMenu() {
            const nav = document.querySelector('.nav');
            nav.classList.toggle('nav-active');
        }
    </script>

</body>
</html>

Étape 2 : Stylisation avec CSS

Nous allons maintenant utiliser Flexbox pour organiser les éléments de l'en-tête, et nous ajouterons des media queries pour rendre le menu responsive.

/* Style général */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

/* En-tête */
header {
    background-color: #333;
    padding: 10px 20px;
    color: white;
}

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.logo a {
    text-decoration: none;
    color: white;
    font-size: 24px;
    font-weight: bold;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 18px;
}

.hamburger {
    display: none;
    font-size: 30px;
    cursor: pointer;
    color: white;
}

/* Responsive Styles */
@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        background-color: #333;
        width: 100%;
        height: 100vh;
        display: none;
        justify-content: center;
        align-items: center;
    }

    .nav-active ul {
        display: flex;
    }

    .hamburger {
        display: block;
    }
}

 

Ajouter un commentaire

Veuillez vous connecter pour ajouter un commentaire.

Pas encore de commentaires.

Exercices

QCM Informatique

series HTML CSS

Exercices