JavaScriptでモバイルタブナビゲーションを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

<目次>

実装するもの

今回は、モバイルタブナビゲーションを作りたいと思います。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

JavaScriptでアプリ開発 ~環境構築~

必要なファイルは、以下の通りです。

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでモバイルタブナビゲーションをスタイリングしよう!

ページ(HTML)の作成

最初にページを作成しましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Mobile Tab Navigation</title>
  </head>
  <body>
    <div class="phone">
      <img src="https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1053&q=80" alt="home" class="content show">
      <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="work" class="content">
      <img src="https://images.unsplash.com/photo-1471107340929-a87cd0f5b5f3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1266&q=80" alt="blog" class="content">
      <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80" alt="about" class="content">
      <nav>
        <ul>
          <li class="active">
            <i class="fas fa-home"></i>
            <p>Home</p>
          </li>
          <li>
            <i class="fas fa-box"></i>
            <p>Work</p>
          </li>
          <li>
            <i class="fas fa-book-open"></i>
            <p>Blog</p>
          </li>
          <li>
            <i class="fas fa-users"></i>
            <p>About Us</p>
          </li>
        </ul>
      </nav>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Mobile Tab Navigation</title>

</head>

<body>

<nav>

<ul>

</li>

<li>

</li>

<li>

</li>

<li>

<p>About Us</p>

</li>

</ul>

</nav>

</div>

</body>

</html>

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: rgba(155, 89, 182, 0.7);
  font-family: 'Open Sans', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.phone {
  position: relative;
  overflow: hidden;
  border: 3px solid #eee;
  border-radius: 15px;
  height: 600px;
  width: 340px;
}

.phone .content {
  opacity: 0;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: calc(100% - 60px);
  width: 100%;
  transition: opacity 0.4s ease;
}

.phone .content.show {
  opacity: 1;
}

nav {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-top: -5px;
  width: 100%;
}

nav ul {
  background-color: #fff;
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
  height: 60px;
}

nav li {
  color: #777;
  cursor: pointer;
  flex: 1;
  padding: 10px;
  text-align: center;
}

nav ul li p {
  font-size: 12px;
  margin: 2px 0;
}

nav ul li:hover,
nav ul li.active {
  color: #8e44ad;
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: rgba(155, 89, 182, 0.7);

font-family: 'Open Sans', sans-serif;

display: flex;

align-items: center;

justify-content: center;

height: 100vh;

margin: 0;

}

.phone {

position: relative;

overflow: hidden;

border: 3px solid #eee;

border-radius: 15px;

height: 600px;

width: 340px;

}

.phone .content {

opacity: 0;

object-fit: cover;

position: absolute;

top: 0;

left: 0;

height: calc(100% - 60px);

width: 100%;

transition: opacity 0.4s ease;

}

.phone .content.show {

opacity: 1;

}

nav {

position: absolute;

bottom: 0;

left: 0;

margin-top: -5px;

width: 100%;

}

nav ul {

background-color: #fff;

display: flex;

list-style-type: none;

padding: 0;

margin: 0;

height: 60px;

}

nav li {

color: #777;

cursor: pointer;

flex: 1;

padding: 10px;

text-align: center;

}

nav ul li p {

font-size: 12px;

margin: 2px 0;

}

nav ul li:hover,

nav ul li.active {

color: #8e44ad;

}

ここまで実装すると以下のようになります。

JavaScriptの実装

画像の切り替えは、showクラスをJavaScriptで切り替えることで実現します。

<img src="XXX" alt="home" class="content show"> // showクラスを付け替える
<img src="XXX" alt="home" class="content"> 
<img src="XXX" alt="home" class="content"> 
<img src="XXX" alt="home" class="content">

<img src="XXX" alt="home" class="content show"> // showクラスを付け替える

要素を取得する

最初に画面操作に必要な要素を取得します。

// 要素取得
const contents = document.querySelectorAll('.content')
const listItems = document.querySelectorAll('nav ul li')

// 要素取得

const contents = document.querySelectorAll('.content')

const listItems = document.querySelectorAll('nav ul li')

クリックイベントの登録

続いて、定番のクリックイベントを登録します。これは、モバイルのタブを押下されたら発火するイベントです。

// クリックイベントの登録
listItems.forEach((item, idx) => {
    item.addEventListener('click', () => {
        // 初期化
        hideAllContents()
        hideAllItems()

        // 選択されたタブをアクティブにする
        item.classList.add('active')
        // 選択されたタブの画像を表示する
        contents[idx].classList.add('show')
    })
})

// クリックイベントの登録

listItems.forEach((item, idx) => {

item.addEventListener('click', () => {

// 初期化

hideAllContents()

hideAllItems()

// 選択されたタブをアクティブにする

item.classList.add('active')

// 選択されたタブの画像を表示する

contents[idx].classList.add('show')

})

前述の通り、画像を表示するにはshowクラスを付与します。また、クリックしたタブを選択状態にするため、activeクラスをつけています。

初期化

タブをクリックしたら現在の状態を一度クリアし、その後、showやactiveクラスをつけます。

// 初期化処理
function hideAllContents() {
    contents.forEach(content => content.classList.remove('show'))
}

function hideAllItems() {
    listItems.forEach(item => item.classList.remove('active'))
}

// 初期化処理

function hideAllContents() {

contents.forEach(content => content.classList.remove('show'))

}

function hideAllItems() {

listItems.forEach(item => item.classList.remove('active'))

}

classList.removeで、指定したクラスを削除できます。

これで完成です。

おわりに

今回は、デザインが可愛かったですね^^

JavaScriptよりもCSSの方が勉強になると思うので、別記事にできればなと思います。

それでは、また!

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素取得
const contents = document.querySelectorAll('.content')
const listItems = document.querySelectorAll('nav ul li')

// クリックイベントの登録
listItems.forEach((item, idx) => {
    item.addEventListener('click', () => {
        // 初期化
        hideAllContents()
        hideAllItems()

        // 選択されたタブをアクティブにする
        item.classList.add('active')
        // 選択されたタブの画像を表示する
        contents[idx].classList.add('show')
    })
})

// 初期化処理
function hideAllContents() {
    contents.forEach(content => content.classList.remove('show'))
}

function hideAllItems() {
    listItems.forEach(item => item.classList.remove('active'))
}

// 要素取得

const contents = document.querySelectorAll('.content')

const listItems = document.querySelectorAll('nav ul li')

// クリックイベントの登録

listItems.forEach((item, idx) => {

item.addEventListener('click', () => {

// 初期化

hideAllContents()

hideAllItems()

// 選択されたタブをアクティブにする

item.classList.add('active')

// 選択されたタブの画像を表示する

contents[idx].classList.add('show')

})

// 初期化処理

function hideAllContents() {

contents.forEach(content => content.classList.remove('show'))

}

function hideAllItems() {

listItems.forEach(item => item.classList.remove('active'))

}

JavaScriptでモバイルタブナビゲーションを作ろう!

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

クリックイベントの登録

初期化

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年2月
月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

クリックイベントの登録

初期化

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

Django REST frameworkでアプリケーション開発 ～カスタム…

いいね機能をJavaScriptで実装しよう!

[初学者向け]Helmを学ぼう!~Templateを深く深く知ろう2~

Go言語 ~基礎編~ エラーハンドリング

[golang]Dockerでfiber API環境を構築しよう!

Go言語 ~基礎編~ Slices

[Go言語]go mod vendorで行うデバッグ術~ログを仕込もう!~

JavaScriptでToggleボタンの開閉処理を実装しよう!

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル

Django REST frameworkでアプリケーション開発～カスタム…