モンスターアカデミア 広告

HTML/CSS3/jQueryを使ったフルスクリーンナビゲーションメニューの作成方法

フルスクリーンナビゲーションメニュー
ENGINEER

フルスクリーンナビゲーションメニュー

トピック:HTML / CSS3 / jQuery
難易度:中級
予想所要時間:30分

このチュートリアルではHTML / CSS3 / jQueryを使って、フルスクリーンナビゲーションメニューを作成します。

Google Fontsの『Montserrat』を使用するので、事前に準備をしてください。

HTML

まずはHTMLを構築しましょう。つくるものは以下のとおりです。

  • ナビゲーションバー:
    左側にロゴを、右側にボタンを2つ(「サインインボタン」と「フルスクリーンナビゲーションメニューを表示するボタン」)配置する
  • フルスクリーンオーバーレイのメニュー:
    「ナビゲーションメニュー」と「閉じるボタン」を配置する

これらを踏まえて、HTMLを以下のように書きましょう。

<!-- Navbar -->
<div class="navbar">
<img class="logo" src="images/logo.png" alt="Foss Logo"/>

<div class="navbar-buttons">
<button class="button" type="button" name="button">SIGN IN</button>
<span><img class="open-menu" src="images/menu.svg" alt=""/></span>
</div>
</div>

<!-- Overlay Navigation Menu -->
<div class="overlay">
<h2 class="nav-title">Navigation</h2>
<nav class="overlay-menu">
<ul>
<li><a href="#">Our Store</a></li>
<li><a href="#">Catalog</a></li>
<li><a href="#">Delivery</a></li>
<li><a href="#">Contact</a></li>
<li><img class="close-menu" src="images/close.svg" alt=""/></li>
</ul>
</nav>
</div>

これでHTMLが構築できました。次は見た目を美しく整えていきましょう!

 

こちらもおすすめ!▼

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

高単価なお仕事でキャリアを広げませんか?

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)が、そんな悩みを解決します!

  • 28,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ