From 2c6bff3937ca8c2ef579c0994a124ac0bf3f0c8c Mon Sep 17 00:00:00 2001 From: stiti Date: Fri, 12 Jan 2024 21:09:55 +0100 Subject: [PATCH] Ajout d'un menu burger --- css/styles.css | 89 +++++++++++++++++++------------------------------ html/index.html | 48 +++++++++++--------------- js/menu.js | 15 +++++++++ js/script.js | 10 +++--- 4 files changed, 74 insertions(+), 88 deletions(-) create mode 100644 js/menu.js diff --git a/css/styles.css b/css/styles.css index 9402b19..c77d4ad 100644 --- a/css/styles.css +++ b/css/styles.css @@ -4,94 +4,73 @@ body { font-family: 'Arial', sans-serif; } -header { +.navbar { background-color: #4A305A; - color: #fff; - padding: 15px 0; + padding: 10px; display: flex; justify-content: space-between; align-items: center; } -#logo { - display: flex; - align-items: center; /* Centrer verticalement le contenu du logo */ +.logo img { + width: 3cm; + height: 1.5cm; + margin-left: 2cm; } -#logo img { - max-width: 80px; /* Ajuste la taille du logo à 80 pixels (ou une valeur qui convient) */ - height: auto; - margin-top: 5px; -} - -nav { +.nav-links { display: flex; align-items: center; } -nav ul { - list-style: none; - display: flex; - margin: 0; - padding: 0; - margin-left: auto; /* Pour déplacer vers la droite */ -} - -nav ul li { - margin-left: 20px; -} - -nav a { +.nav-link { + color: white; text-decoration: none; - color: #fff; - font-weight: bold; + margin: 0 15px; } -#menu-icon { +.reserve-btn { + background-color: #FFB039; + padding: 10px 20px; + border-radius: 10px; +} + +/* ... (code précédent) */ + +.burger-menu { display: none; - font-size: 24px; cursor: pointer; } -#reserve-button { - background-color: orange; - color: #fff; - padding: 10px 20px; - border-radius: 10px; - margin-left: 20px; +.burger-menu div { + width: 25px; + height: 3px; + background-color: white; + margin: 6px 0; } @media screen and (max-width: 768px) { - nav { - flex-direction: column; - align-items: flex-start; - } - - nav ul { + .nav-links { display: none; - width: 100%; - text-align: center; + flex-direction: column; + align-items: center; position: absolute; top: 60px; left: 0; - background-color: #333; + width: 100%; + background-color: #4A305A; + z-index: 1; } - nav ul.show { + .nav-links.show { display: flex; - flex-direction: column; } - nav ul li { - margin: 0; - margin-bottom: 10px; + .nav-link { + margin: 10px 0; } - #menu-icon { + .burger-menu { display: block; } - - #reserve-button { - margin: 20px 0; - } } diff --git a/html/index.html b/html/index.html index 6543eb0..bb358e2 100644 --- a/html/index.html +++ b/html/index.html @@ -1,40 +1,32 @@ - + - Neo Eat - Acceuil + Neo Eat - -
-
- -
-
+
+
+
+
+
+ -
-
-

Bienvenue chez Neo Eat

-

Explorez l'avenir de la gastronomie avec notre restaurant 100% automatisé par des robots.

- Voir le menu -
-
- - - - + + diff --git a/js/menu.js b/js/menu.js new file mode 100644 index 0000000..5f5fc27 --- /dev/null +++ b/js/menu.js @@ -0,0 +1,15 @@ +document.addEventListener("DOMContentLoaded", function () { + const burgerMenu = document.querySelector('.burger-menu'); + const navLinks = document.querySelector('.nav-links'); + + burgerMenu.addEventListener('click', function () { + navLinks.classList.toggle('show'); + }); + + // Ajoutez le code suivant pour masquer le menu lorsque la largeur de l'écran est supérieure à 768px + window.addEventListener('resize', function () { + if (window.innerWidth > 768) { + navLinks.classList.remove('show'); + } + }); +}); diff --git a/js/script.js b/js/script.js index 76f8b78..47be69d 100644 --- a/js/script.js +++ b/js/script.js @@ -1,8 +1,8 @@ document.addEventListener('DOMContentLoaded', function () { - const menuIcon = document.getElementById('menu-icon'); - const navList = document.querySelector('nav ul'); + const burgerMenu = document.querySelector('.burger-menu'); + const navLinks = document.querySelector('.nav-links'); - menuIcon.addEventListener('click', function () { - navList.classList.toggle('show'); + burgerMenu.addEventListener('click', function () { + navLinks.classList.toggle('show'); }); -}); \ No newline at end of file +});