Erstellen Sie eine Foodie-Hamburger-Website-js-Tutorial-php.cn

Build a Foodie Hamburger Website

Einführung

Hallo Entwickler! Ich freue mich, mein neuestes Projekt vorzustellen: eine Foodie-Hamburger-Website. Dieses Projekt ist perfekt für diejenigen, die eine visuell ansprechende und funktionale Website erstellen möchten, die verschiedene Burger-Optionen präsentiert. Dies ist eine großartige Möglichkeit, Ihre Frontend-Entwicklungsfähigkeiten mithilfe von HTML, CSS und JavaScript zu verbessern und gleichzeitig ein angenehmes Web-Erlebnis für Benutzer zu schaffen.

Projektübersicht

Die Foodie Hamburger Website ist eine Webanwendung, die zur Präsentation verschiedener Burgermenüs und Sonderangebote entwickelt wurde. Mit einem klaren und modernen Design ermöglicht es Benutzern die einfache Navigation durch verschiedene Abschnitte, wie „Top Picks“, „Whopper“, „Stunner Menu“, „New Foodie Collection“ und „Deal of the Day“. Dieses Projekt zeigt, wie man eine interaktive und ästhetisch ansprechende Website erstellt.

Merkmale

Interaktive Navigation: Ein Hamburger-Menü, das für eine bessere Benutzerfreundlichkeit auf kleineren Bildschirmen ein- und ausgeblendet werden kann.
Responsive Design: Stellt sicher, dass die Website sowohl auf Desktop- als auch auf Mobilgeräten gut aussieht.
Sauberes Layout: Bietet eine optisch ansprechende Möglichkeit, verschiedene Burger-Optionen und Sonderangebote anzuzeigen.

Verwendete Technologien

HTML: Stellt die Struktur für die Foodie Hamburger-Website bereit.
CSS: Gestaltet die Website so, dass ein modernes und ansprechendes Design entsteht.
JavaScript: Verwaltet die interaktiven Elemente, einschließlich der Hamburger-Menüfunktion.

Projektstruktur

Hier ein Überblick über die Projektstruktur:

Foodie-Hamburger/
├── index.html
├── style.css
└── script.js

Nach dem Login kopieren

index.html: Enthält die HTML-Struktur für die Foodie Hamburger-Website.
style.css: Enthält CSS-Stile, um ein ansprechendes und ansprechendes Design zu erstellen.
script.js: Verwaltet die interaktiven Elemente der Website, wie zum Beispiel das Hamburger-Menü.

Installation

Um mit dem Projekt zu beginnen, befolgen Sie diese Schritte:

Klonen Sie das Repository:

git clone https://github.com/abhishekgurjar-in/Foodie-Hamburger.git

Nach dem Login kopieren

Öffnen Sie das Projektverzeichnis:
```
cd Foodie-Hamburger
```
Nach dem Login kopieren
Führen Sie das Projekt aus:
- Öffnen Sie die Datei index.html in einem Webbrowser, um die Foodie Hamburger-Website anzuzeigen.

Verwendung

Öffnen Sie die Websitein einem Webbrowser.
Navigieren Sie durch die Abschnitte, indem Sie das obere Menü oder das Hamburger-Menü auf kleineren Bildschirmen verwenden.
Entdecken Sie verschiedene Burger-Optionen und Sonderangebote.
Klicken Sie auf das Hamburger-Menüsymbol, um die Navigation auf kleineren Bildschirmen zu öffnen oder zu schließen.

Code-Erklärung

HTML

Die Datei index.html definiert die Struktur der Foodie Hamburger-Website, einschließlich Navigation, Abschnitten für verschiedene Burger-Optionen und der Fußzeile. Hier ist ein Ausschnitt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foodie Hamburger</title>
  <link href="https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>
</head>
<body>
  <div class="main-content">
    <header>
      <div class="header-content">
        <div class="Erstellen Sie eine Foodie-Hamburger-Website">
          <img src="./images/Erstellen Sie eine Foodie-Hamburger-Website.svg" alt="Erstellen Sie eine Foodie-Hamburger-Website">
        </div>
        <div class="hamburger-menu-container">
          <div class="hamburger-menu">
            <span class="hamburger-icon">&#9776;</span>
          </div>
        </div>
        <nav>
          <span class="close-icon">&times;</span>
          <a href="#top-picks">Top Picks</a>
          <a href="#whooper">Whopper</a>
          <a href="#stunner-menu">Stunner Menu</a>
          <a href="#new-foodie-collection">New Foodie Collection</a>
          <a href="#deal-of-the-day">Deal of the Day</a>
        </nav>
      </div>
    </header>
    <main>
      <section class="hero-section">
        <div class="img-container">
          <img src="./images/hero-image.png" alt="hero-image">
        </div>
        <p>Well, You can’t resist anymore!</p>
      </section>
      <section id="top-picks" class="section">
        <h2>Top Picks</h2>
        <div class="img-container">
          <img src="./images/burger-1.png" alt="burger-1">
        </div>
      </section>
      <section id="whooper" class="section">
        <h2>Whopper</h2>
        <div class="img-container">
          <img src="./images/burger-2.png" alt="burger-2">
        </div>
      </section>
      <section id="stunner-menu" class="section">
        <h2>Stunner Menu</h2>
        <div class="img-container">
          <img src="./images/burger-3.png" alt="burger-3">
        </div>
      </section>
      <section id="new-foodie-collection" class="section">
        <h2>New Foodie Collection</h2>
        <div class="img-container">
          <img src="./images/burger-4.png" alt="burger-4">
        </div>
      </section>
      <section id="deal-of-the-day" class="section">
        <h2>Deal of the Day</h2>
        <div class="img-container">
          <img src="./images/burger-5.png" alt="burger-5">
        </div>
      </section>
      <footer>
        <h3 class="go-to-top"><a href="#">Go to Top</a></h3>
        <p class="footer-text">Made with ❤️ by Abhishek Gurjar</p>
      </footer>
    </main>
  </div>
</body>
</html>

Nach dem Login kopieren

CSS

Die style.css-Datei gestaltet die Foodie Hamburger-Website und stellt sicher, dass sie optisch ansprechend und reaktionsfähig ist. Nachfolgend sind einige wichtige Stile aufgeführt:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #f6f0eb;
  font-family: 'Poppins', sans-serif;
}

.main-content {
  overflow-x: hidden;
  height: 100vh;
  scroll-behavior: smooth;
}

a {
  text-decoration-line: none;
  color: inherit;
}

header {
  background-color: #fff;
  padding: 24px;
}

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

nav {
  display: flex;
  /* gap: 60px; */
}

nav a {
  font-weight: 700;
  font-size: 20px;
  color: #492118;
}

nav a + a {
  margin-left: 60px;
}

.Erstellen Sie eine Foodie-Hamburger-Website {
  width: 50px;
}

img {
  width: 100%;
}

main {
  padding: 0 24px;
}

.hero-section {
  margin-top: 100px;
}

.img-container {
  max-width: 1290px;
  margin: 0 auto;
}

.hero-section p {
  color: #492118;
  text-align: center;
  font-size: 24px;
}

.section {
  margin-top: 120px;
}

.section .img-container {
  max-width: 960px;
}

.section h2 {
  font-weight: 700;
  font-size: 48px;
  color: #492118;
  text-align: center;
}

.go-to-top {
  text-align: right;
  max-width: 960px;
  margin: 0 auto;
  font-size: 32px;
  margin-top: 80px;
}

.go-to-top a {
  text-decoration-line: underline;
}

.footer-text {
  text-align: center;
  color: #858585;
  font-size: 24px;
  margin-top: 64px;
}

.close-icon {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  display: none;
}

.hamburger-menu-container {
  overflow: hidden;
  position: relative;
  width: 40px;
  height: 40px;
  display: none;
}

.hamburger-menu {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -64px;
  right: -58px;
  background-color: white;
  cursor: pointer;
}

.hamburger-icon {
  font-size: 16px;
  position: absolute;
  bottom: 10px;
  left: 20px;
}

@media (max-width: 1200px) {
  nav a {
    font-size: 16px;
  }

  nav a + a {
    margin-left: 48px;
  }

  header {
    padding: 16px 24px;
  }
}

@media (max-width: 960px) {
  nav a {
    font-size: 12px;
  }

  nav a + a {
    margin-left: 32px;
  }

  .hero-section {
    margin-top: 32px;
  }

  .section {
    margin-top: 42px;
  }

  .hero-section p {
    font-size: 10px;
  }

  .section h2 {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  header {
    background-color: #f6f0ebb7;
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    padding: 8px 24px;
  }

  .header-content {
    min-height: 40px;
  }

  nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    flex-direction: column;
    padding: 24px;
    right: -200px;
    top: 16px;
    transition: right 0.25s ease-in-out;
    /* display: none; */
  }

  nav a + a {
    margin: 0;
    margin-top: 16px;
  }

  .close-icon,
  .hamburger-menu-container {
    display: block;
  }

  .menu-open nav {
    /* display: flex; */
    right: 24px;
  }

  .menu-open .hamburger-menu-container {
    display: none;
  }

  .go-to-top {
    font-size: 12px;
    margin-top: 40px;
  }

  .footer-text {
    font-size: 10px;
    margin-top: 32px;
  }

  .Erstellen Sie eine Foodie-Hamburger-Website {
    width: 30px;
  }
}

Nach dem Login kopieren

JavaScript

Die Datei „script.js“ enthält die Logik für das Menüleisten-Popup basierend auf dem Tab-Wechsel der Benutzereingabe. Hier ist ein Ausschnitt:

const hamburgerIcon = document.querySelector('.hamburger-menu-container');
const headerContent = document.querySelector('.header-content');
const closeIcon = document.querySelector('.close-icon');
const nav = document.querySelector('nav');

hamburgerIcon.addEventListener('click', (e) => {
  e.stopPropagation();
  headerContent.classList.add('menu-open');
});

nav.addEventListener('click', (e) => {
  e.stopPropagation();
});

closeIcon.addEventListener('click', () => {
  headerContent.classList.remove('menu-open');
});

window.addEventListener('click', () => {
  headerContent.classList.remove('menu-open');
});

Nach dem Login kopieren

Live-Demo

Hier können Sie sich die Live-Demo des Foodie Hamburger Website-Projekts ansehen.

Abschluss

Der Aufbau der Foodie Hamburger-Website war eine fantastische Gelegenheit, ein visuell ansprechendes und interaktives Web-Erlebnis zu schaffen. Dieses Projekt präsentiert verschiedene Burger-Optionen und Sonderangebote und bietet den Benutzern ein angenehmes Surferlebnis. Durch die Anwendung von HTML, CSS und JavaScript haben wir eine reaktionsfähige und benutzerfreundliche Website erstellt, die wesentliche Fähigkeiten in der Frontend-Entwicklung hervorhebt. Ich hoffe, dieses Projekt inspiriert Sie dazu, kreative Wege zu erkunden, um ansprechende Web-Erlebnisse zu schaffen. Viel Spaß beim Codieren!

Credits

Dieses Projekt wurde als Teil meiner kontinuierlichen Lernreise in der Webentwicklung entwickelt.

Autor

Abhishek Gurjar
- GitHub-Profil

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Foodie-Hamburger-Website. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!