Bina Laman Web Foodie Hamburger-tutorial js-php.cn

Build a Foodie Hamburger Website

pengenalan

Helo, pembangun! Saya teruja untuk berkongsi projek terbaharu saya:Tapak Web Foodie Hamburger. Projek ini sesuai untuk mereka yang ingin membina laman web yang menarik dan berfungsi secara visual yang mempamerkan pelbagai pilihan burger. Ini cara yang bagus untuk meningkatkan kemahiran pembangunan bahagian hadapan anda menggunakan HTML, CSS dan JavaScript sambil mencipta pengalaman web yang menarik untuk pengguna.

Gambaran Keseluruhan Projek

Tapak Web Foodie Hamburgerialah aplikasi web yang direka untuk mempamerkan menu burger yang berbeza dan tawaran istimewa. Dengan reka bentuk yang bersih dan moden, ia membolehkan pengguna menavigasi dengan mudah melalui pelbagai bahagian, seperti Pilihan Teratas, Whopper, Stunner Menu, New Foodie Collection dan Deal of the Day. Projek ini menunjukkan cara membuat tapak web yang interaktif dan menyenangkan dari segi estetika.

Ciri-ciri

Navigasi Interaktif: Menu hamburger yang runtuh dan berkembang pada skrin yang lebih kecil untuk kebolehgunaan yang lebih baik.
Reka Bentuk Responsif: Memastikan tapak web kelihatan hebat pada kedua-dua desktop dan peranti mudah alih.
Reka Letak Bersih: Menyediakan cara yang menarik secara visual untuk memaparkan pilihan burger yang berbeza dan tawaran istimewa.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk Laman Web Foodie Hamburger.
CSS: Menggayakan tapak web untuk mencipta reka bentuk yang moden dan responsif.
JavaScript: Mengurus elemen interaktif, termasuk fungsi menu hamburger.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

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

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Laman Web Foodie Hamburger.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk yang menarik dan responsif.
script.js: Mengurus elemen interaktif tapak web, seperti menu hamburger.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Foodie-Hamburger
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam pelayar web untuk melihat Laman Web Foodie Hamburger.

Penggunaan

Buka tapak webdalam penyemak imbas web.
Navigasi melalui bahagianmenggunakan menu atas atau menu hamburger pada skrin yang lebih kecil.
Terokai pilihan burger yang berbezadan tawaran istimewa.
Klik ikon menu hamburgeruntuk membuka atau menutup navigasi pada skrin yang lebih kecil.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Laman Web Foodie Hamburger, termasuk navigasi, bahagian untuk pilihan burger yang berbeza dan pengaki. Berikut adalah coretan:

     Foodie Hamburger    
       
   ☰ 
 
  × Top Picks Whopper Stunner Menu New Foodie Collection Deal of the Day 
 
 
     
 Well, You can’t resist anymore!
 
  Top Picks
   
 
  Whopper
   
 
  Stunner Menu
   
 
  New Foodie Collection
   
 
  Deal of the Day
   
 
  Go to Top
 Made with ❤️ by Abhishek Gurjar

Salin selepas log masuk

CSS

Fail style.css menggayakan Laman Web Foodie Hamburger, memastikan ia menarik secara visual dan responsif. Di bawah ialah beberapa gaya utama:

* { 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; } .Bina Laman Web Foodie Hamburger { 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; } .Bina Laman Web Foodie Hamburger { width: 30px; } }

Salin selepas log masuk

JavaScript

Fail script.js mengandungi logik untuk pop timbul bar menu berdasarkan penukaran tab input pengguna . Berikut adalah coretan:

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

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek Laman Web Foodie Hamburger di sini.

Kesimpulan

Membina Laman Web Foodie Hamburger ialah peluang yang hebat untuk mencipta pengalaman web yang menarik secara visual dan interaktif. Projek ini mempamerkan pelbagai pilihan burger dan tawaran istimewa, memberikan pengalaman menyemak imbas yang menarik untuk pengguna. Dengan menggunakan HTML, CSS dan JavaScript, kami mencipta tapak web yang responsif dan mesra pengguna yang menyerlahkan kemahiran pembangunan bahagian hadapan yang penting. Saya harap projek ini memberi inspirasi kepada anda untuk meneroka cara kreatif untuk membina pengalaman web yang menarik. Selamat mengekod!