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が構築できました。次は見た目を美しく整えていきましょう!

 

こちらもおすすめ!▼

SHARE

RELATED

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