グルメハンバーガーのウェブサイトを構築する-jsチュートリアル-php.cn

Top Picks

Whopper

Stunner Menu

New Foodie Collection

Deal of the Day

Go to Top" >Go to Top

ホームページ

ウェブフロントエンド

jsチュートリアル

グルメハンバーガーのウェブサイトを構築する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 31, 2024 am 06:35 AM

Build a Foodie Hamburger Website

導入

開発者の皆さん、こんにちは！私の最新プロジェクト、Foodie Hamburger Website を共有できることを嬉しく思います。このプロジェクトは、さまざまなハンバーガーのオプションを紹介する、視覚的に魅力的で機能的な Web サイトを構築したい人に最適です。これは、ユーザーにとって楽しい Web エクスペリエンスを作成しながら、HTML、CSS、JavaScript を使用したフロントエンド開発スキルを向上させる優れた方法です。

プロジェクト概要

Foodie Hamburger Website は、さまざまなハンバーガーメニューや特別オファーを紹介するために設計された Web アプリケーションです。クリーンでモダンなデザインにより、ユーザーは、Top Picks、Wopper、Stunner Menu、New Foodie Collection、Deal of the Day などのさまざまなセクションを簡単に移動できます。このプロジェクトでは、インタラクティブで見た目にも美しい Web サイトを作成する方法を示します。

特徴

インタラクティブナビゲーション: 使いやすさを向上させるために、小さな画面で折りたたんだり展開したりできるハンバーガーメニュー。
レスポンシブデザイン: Web サイトがデスクトップとモバイルデバイスの両方で見栄えよく表示されるようにします。
すっきりしたレイアウト: さまざまなハンバーガーのオプションや特別セールを視覚的に魅力的に表示する方法を提供します。

使用されている技術

HTML: Foodie Hamburger Web サイトの構造を提供します。
CSS: Web サイトのスタイルを設定して、モダンでレスポンシブなデザインを作成します。
JavaScript: ハンバーガーメニュー機能を含むインタラクティブな要素を管理します。

プロジェクトの構造

プロジェクト構造の概要は次のとおりです:

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

ログイン後にコピー

index.html: Foodie Hamburger Web サイトの HTML 構造が含まれています。
style.css: 魅力的でレスポンシブなデザインを作成するための CSS スタイルが含まれています。
script.js: ハンバーガーメニューなど、Web サイトのインタラクティブな要素を管理します。

インストール

プロジェクトを開始するには、次の手順に従います:

リポジトリのクローンを作成します:
```
git clone https://github.com/abhishekgurjar-in/Foodie-Hamburger.git
```
ログイン後にコピー
プロジェクトディレクトリを開きます:
```
cd Foodie-Hamburger
```
ログイン後にコピー
プロジェクトを実行します:
- Web ブラウザでindex.html ファイルを開いて、Foodie Hamburger の Web サイトを表示します。

使用法

Web ブラウザで Web サイトを開きます。
セクション内を移動します。トップメニューまたは小さい画面のハンバーガーメニューを使用します。
さまざまなハンバーガーのオプションや特別セールをご覧ください。
ハンバーガーメニューアイコンをクリック 小さい画面でナビゲーションを開閉します。

コードの説明

HTML

index.html ファイルは、ナビゲーション、さまざまなハンバーガーオプションのセクション、フッターなど、Foodie Hamburger Web サイトの構造を定義します。スニペットは次のとおりです:

<!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="グルメハンバーガーのウェブサイトを構築する">
          <img src="/static/imghw/default1.png"  data-src="./images/グルメハンバーガーのウェブサイトを構築する.svg"  class="lazy" alt="グルメハンバーガーのウェブサイトを構築する">
        </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="/static/imghw/default1.png"  data-src="./images/hero-image.png"  class="lazy" alt="hero-image">
        </div>
        <p>Well, You can’t resist anymore!</p>
      </section>
      <section id="top-picks" class="section">
        <h2 id="Top-Picks">Top Picks</h2>
        <div class="img-container">
          <img src="/static/imghw/default1.png"  data-src="./images/burger-1.png"  class="lazy" alt="burger-1">
        </div>
      </section>
      <section id="whooper" class="section">
        <h2 id="Whopper">Whopper</h2>
        <div class="img-container">
          <img src="/static/imghw/default1.png"  data-src="./images/burger-2.png"  class="lazy" alt="burger-2">
        </div>
      </section>
      <section id="stunner-menu" class="section">
        <h2 id="Stunner-Menu">Stunner Menu</h2>
        <div class="img-container">
          <img src="/static/imghw/default1.png"  data-src="./images/burger-3.png"  class="lazy" alt="burger-3">
        </div>
      </section>
      <section id="new-foodie-collection" class="section">
        <h2 id="New-Foodie-Collection">New Foodie Collection</h2>
        <div class="img-container">
          <img src="/static/imghw/default1.png"  data-src="./images/burger-4.png"  class="lazy" alt="burger-4">
        </div>
      </section>
      <section id="deal-of-the-day" class="section">
        <h2 id="Deal-of-the-Day">Deal of the Day</h2>
        <div class="img-container">
          <img src="/static/imghw/default1.png"  data-src="./images/burger-5.png"  class="lazy" alt="burger-5">
        </div>
      </section>
      <footer>
        <h3 id="a-href-Go-to-Top-a"><a href="#">Go to Top</a></h3>
        <p class="footer-text">Made with ❤️ by Abhishek Gurjar</p>
      </footer>
    </main>
  </div>
</body>
</html>

ログイン後にコピー

CSS

style.css ファイルは Foodie Hamburger Web サイトのスタイルを設定し、視覚的に魅力的で応答性が高いことを保証します。以下にいくつかの主要なスタイルを示します:

* {
  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;
}

.グルメハンバーガーのウェブサイトを構築する {
  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;
  }

  .グルメハンバーガーのウェブサイトを構築する {
    width: 30px;
  }
}

ログイン後にコピー

JavaScript

script.js ファイルには、ユーザー入力のタブ切り替えに基づくメニューバーポップアップのロジックが含まれています。スニペットは次のとおりです:

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

ログイン後にコピー

ライブデモ

ここで Foodie Hamburger Website プロジェクトのライブデモをチェックできます。

結論

Foodie Hamburger Web サイトの構築は、視覚的に魅力的でインタラクティブな Web エクスペリエンスを作成する素晴らしい機会でした。このプロジェクトでは、さまざまなハンバーガーのオプションや特別セールを紹介し、ユーザーに楽しい閲覧体験を提供します。 HTML、CSS、JavaScript を適用することで、重要なフロントエンド開発スキルを強調した、応答性の高いユーザーフレンドリーな Web サイトを作成しました。このプロジェクトが、魅力的な Web エクスペリエンスを構築する創造的な方法を探求するきっかけとなることを願っています。コーディングを楽しんでください!

クレジット

このプロジェクトは、Web 開発における私の継続的な学習の一環として開発されました。

著者

アビシェク・グルジャル
- GitHub プロフィール

以上がグルメハンバーガーのウェブサイトを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Java チュートリアル

1677

CakePHP チュートリアル

1431

Laravel チュートリアル

1334

PHP チュートリアル

1280

C# チュートリアル

1257

Related knowledge

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

JavaScriptとWeb：コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action：実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解：実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScript通訳者とコンパイラにおけるC/Cの役割 Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

Python vs. JavaScript：ユースケースとアプリケーションと比較されます Apr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

Webサイトからアプリまで：JavaScriptの多様なアプリケーション Apr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

See all articles

グルメハンバーガーのウェブサイトを構築する

導入

プロジェクト概要

特徴

使用されている技術

プロジェクトの構造

インストール

使用法

コードの説明

HTML

CSS

JavaScript

ライブデモ

結論

クレジット

著者

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック