stiti/SAE_S1.05_S1.06
1
6
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Ajout d'un menu burger

Browse Source
This commit is contained in:
Moncef STITI
2024-01-12 21:09:55 +01:00
parent 829795f10a
commit 2c6bff3937
4 changed files with 74 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
css/styles.css
View File

@@ -4,94 +4,73 @@ body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
} }
header { .navbar {
background-color: #4A305A; background-color: #4A305A;
color: #fff; padding: 10px;
padding: 15px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
#logo { .logo img {
display: flex; width: 3cm;
align-items: center; /* Centrer verticalement le contenu du logo */ height: 1.5cm;
margin-left: 2cm;
} }
#logo img { .nav-links {
max-width: 80px; /* Ajuste la taille du logo à 80 pixels (ou une valeur qui convient) */
height: auto;
margin-top: 5px;
}
nav {
display: flex; display: flex;
align-items: center; align-items: center;
} }
nav ul { .nav-link {
list-style: none; color: white;
display: flex;
margin: 0;
padding: 0;
margin-left: auto; /* Pour déplacer vers la droite */
}
nav ul li {
margin-left: 20px;
}
nav a {
text-decoration: none; text-decoration: none;
color: #fff; margin: 0 15px;
font-weight: bold;
} }
#menu-icon { .reserve-btn {
background-color: #FFB039;
padding: 10px 20px;
border-radius: 10px;
}
/* ... (code précédent) */
.burger-menu {
display: none; display: none;
font-size: 24px;
cursor: pointer; cursor: pointer;
} }
#reserve-button { .burger-menu div {
background-color: orange; width: 25px;
color: #fff; height: 3px;
padding: 10px 20px; background-color: white;
border-radius: 10px; margin: 6px 0;
margin-left: 20px;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
nav { .nav-links {
flex-direction: column;
align-items: flex-start;
}
nav ul {
display: none; display: none;
width: 100%; flex-direction: column;
text-align: center; align-items: center;
position: absolute; position: absolute;
top: 60px; top: 60px;
left: 0; left: 0;
background-color: #333; width: 100%;
background-color: #4A305A;
z-index: 1;
} }
nav ul.show { .nav-links.show {
display: flex; display: flex;
flex-direction: column;
} }
nav ul li { .nav-link {
margin: 0; margin: 10px 0;
margin-bottom: 10px;
} }
#menu-icon { .burger-menu {
display: block; display: block;
} }
#reserve-button {
margin: 20px 0;
}
} }

48
html/index.html
View File

@@ -1,40 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/styles.css"> <link rel="stylesheet" href="../css/styles.css">
<title>Neo Eat - Acceuil</title> <title>Neo Eat</title>
</head> </head>
<body> <body>
<header class="navbar">
<header> <div class="logo">
<div class="container"> <img src="../img/LogoNeoEat.png" alt="Neo Eat Logo">
<div id="logo"><img src="../img/LogoNeoEat.png" alt="LogoNeoEat"></div> </div>
<nav> <nav class="nav-links">
<ul> <a href="#" class="nav-link">Accueil</a>
<li><a href="#">Accueil</a></li> <a href="#" class="nav-link">Menu</a>
<li><a href="#">Menu</a></li> <a href="#" class="nav-link">À propos</a>
<li><a href="#">À propos</a></li> <a href="#" class="nav-link">Contact</a>
<li><a href="#">Contact</a></li> <a href="#" class="nav-link reserve-btn">Réserver une table</a>
</ul>
<div id="menu-icon">&#9776;</div>
<a id="reserve-button" href="#">Réserver une table</a>
</nav> </nav>
</div> <div class="burger-menu">
</header> <div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</header>
<section id="hero"> <!-- Reste du contenu de votre site va ici -->
<div class="container">
<h1>Bienvenue chez Neo Eat</h1>
<p>Explorez l'avenir de la gastronomie avec notre restaurant 100% automatisé par des robots.</p>
<a href="#menu">Voir le menu</a>
</div>
</section>
<!-- Ajoutez d'autres sections pour présenter votre menu, l'équipe, etc. -->
<script src="../js/script.js"></script>
<script src="../js/script.js"></script>
</body> </body>
</html> </html>

15
js/menu.js Normal file
View File

@@ -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');
}
});
});

10
js/script.js
View File

@@ -1,8 +1,8 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const menuIcon = document.getElementById('menu-icon'); const burgerMenu = document.querySelector('.burger-menu');
const navList = document.querySelector('nav ul'); const navLinks = document.querySelector('.nav-links');
menuIcon.addEventListener('click', function () { burgerMenu.addEventListener('click', function () {
navList.classList.toggle('show'); navLinks.classList.toggle('show');
}); });
}); });