JavaScriptの回転するメニューバーを作ろう！

こんにちは。KOUKIです。

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

<目次>

実装するもの

今回は、メニューバーをJavaScriptで回転させる方法について学びましょう。とは言っても半分以上はCSSの機能になってしまいますけど^^;

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

環境構築

最初に、簡単な環境構築をお願いします。

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

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

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

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSで回転するメニューバーをスタイリングしよう!

開発

ページの作成

最初にページの作成をしましょう。index.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>Rotating Navigation</title>
  </head>
  <body>
    <div class="container">
      <div class="circle-container">
        <div class="circle">
          <button id="close">
            <i class="fas fa-times"></i>
          </button>
          <button id="open">
            <i class="fas fa-bars"></i>
          </button>
        </div>
      </div>

      <div class="content">
        <h1>Amazing Article</h1>
        <small>Florin Pop</small>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.</p>

        <h3>My Dog</h3>
        <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="doggy" />
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</p>
      </div>
    </div>

    <nav>
      <ul>
        <li><i class="fas fa-home"></i> Home</li>
        <li><i class="fas fa-user-alt"></i> About</li>
        <li><i class="fas fa-envelope"></i> Contact</li>
      </ul>
    </nav>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Rotating Navigation</title>

</head>

<body>

</button>

</button>

</div>

<h1>Amazing Article</h1>

<small>Florin Pop</small>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quia in ratione dolores cupiditate, maxime aliquid impedit dolorem nam dolor omnis atque fuga labore modi veritatis porro laborum minus, illo, maiores recusandae cumque ipsa quos. Tenetur, consequuntur mollitia labore pariatur sunt quia harum aut. Eum maxime dolorem provident natus veritatis molestiae cumque quod voluptates ab non, tempore cupiditate? Voluptatem, molestias culpa. Corrupti, laudantium iure aliquam rerum sint nam quas dolor dignissimos in error placeat quae temporibus minus optio eum soluta cupiditate! Cupiditate saepe voluptates laudantium. Ducimus consequuntur perferendis consequatur nobis exercitationem molestias fugiat commodi omnis. Asperiores quia tenetur nemo ipsa.</p>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sit libero deleniti rerum quo, incidunt vel consequatur culpa ullam. Magnam facere earum unde harum. Ea culpa veritatis magnam at aliquid. Perferendis totam placeat molestias illo laudantium? Minus id minima doloribus dolorum fugit deserunt qui vero voluptas, ut quia cum amet temporibus veniam ad ea ab perspiciatis, enim accusamus asperiores explicabo provident. Voluptates sint, neque fuga cum illum, tempore autem maxime similique laborum odio, magnam esse. Aperiam?</p>

</div>

<nav>

<ul>

<li><i class="fas fa-user-alt"></i> About</li>

<li><i class="fas fa-envelope"></i> Contact</li>

</ul>

</nav>

</body>

</html>

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

画像がオーバーレイしているので見えないのですが、ナビゲーションバーには、Font Awesomeのアイコンを利用しています。

スタイルの追加

次にスタイルをstyle.cssに記述してきましょう。

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

* {
  box-sizing: border-box;
}

body {
  font-family: 'Lato', sans-serif;
  background-color: #333;
  color: #222;
  overflow-x: hidden;
  margin: 0;
}

.container {
  background-color: #fafafa;
  transform-origin: top left;
  transition: transform 0.5s linear;
  width: 100vw;
  min-height: 100vh;
  padding: 50px;
}

.container.show-nav {
  transform: rotate(-20deg);
}

.circle-container {
  position: fixed;
  top: -100px;
  left: -100px;
}

.circle {
  background-color: #ff7979;
  height: 200px;
  width: 200px;
  border-radius: 50%;
  position: relative;
  transition: transform 0.5s linear;
}

.container.show-nav .circle {
  transform: rotate(-70deg);
}

.circle button {
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100px;
  background: transparent;
  border: 0;
  font-size: 26px;
  color: #fff;
}

.circle button:focus {
  outline: none;
}

.circle button#open {
  left: 60%;
}

.circle button#close {
  top: 60%;
  transform: rotate(90deg);
  transform-origin: top left;
}

.container.show-nav + nav li {
  transform: translateX(0);
  transition-delay: 0.3s;
}

nav {
  position: fixed;
  bottom: 40px;
  left: 0;
  z-index: 100;
}

nav ul {
  list-style-type: none;
  padding-left: 30px;
}

nav ul li {
  text-transform: uppercase;
  color: #fff;
  margin: 40px 0;
  transform: translateX(-100%);
  transition: transform 0.4s ease-in;
}

nav ul li i {
  font-size: 20px;
  margin-right: 10px;
}

nav ul li + li {
  margin-left: 15px;
  transform: translateX(-150%);
}

nav ul li + li + li {
  margin-left: 30px;
  transform: translateX(-200%);
}

.content img {
  max-width: 100%;
}

.content {
  max-width: 1000px;
  margin: 50px auto;
}

.content h1 {
  margin: 0;
}

.content small {
  color: #555;
  font-style: italic;
}

.content p {
  color: #333;
  line-height: 1.5;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

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

* {

box-sizing: border-box;

}

body {

font-family: 'Lato', sans-serif;

background-color: #333;

color: #222;

overflow-x: hidden;

margin: 0;

}

.container {

background-color: #fafafa;

transform-origin: top left;

transition: transform 0.5s linear;

width: 100vw;

min-height: 100vh;

padding: 50px;

}

.container.show-nav {

transform: rotate(-20deg);

}

.circle-container {

position: fixed;

top: -100px;

left: -100px;

}

.circle {

background-color: #ff7979;

height: 200px;

width: 200px;

border-radius: 50%;

position: relative;

transition: transform 0.5s linear;

}

.container.show-nav .circle {

transform: rotate(-70deg);

}

.circle button {

cursor: pointer;

position: absolute;

top: 50%;

left: 50%;

height: 100px;

background: transparent;

border: 0;

font-size: 26px;

color: #fff;

}

.circle button:focus {

outline: none;

}

.circle button#open {

left: 60%;

}

.circle button#close {

top: 60%;

transform: rotate(90deg);

transform-origin: top left;

}

.container.show-nav + nav li {

transform: translateX(0);

transition-delay: 0.3s;

}

nav {

position: fixed;

bottom: 40px;

left: 0;

z-index: 100;

}

nav ul {

list-style-type: none;

padding-left: 30px;

}

nav ul li {

text-transform: uppercase;

color: #fff;

margin: 40px 0;

transform: translateX(-100%);

transition: transform 0.4s ease-in;

}

nav ul li i {

font-size: 20px;

margin-right: 10px;

}

nav ul li + li {

margin-left: 15px;

transform: translateX(-150%);

}

nav ul li + li + li {

margin-left: 30px;

transform: translateX(-200%);

}

.content img {

max-width: 100%;

}

.content {

max-width: 1000px;

margin: 50px auto;

}

.content h1 {

margin: 0;

}

.content small {

color: #555;

font-style: italic;

}

.content p {

color: #333;

line-height: 1.5;

}

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

CSSは難しいですね^^;筆者は苦手です。

JavaScriptの実装

さて、いよいよJavaScriptを実装しましょう。

styleに設定した「.show-nav」クラスを「containerクラスがついている要素」に付与するとメニューバーが回転します。

...
  <body>
    <div class="container show-nav"> <<< ここにつける
...

...

<body>

<div class="container show-nav"> <<< ここにつける

...

要素を取得する

JavaScriptで制御すべき要素が3つあります。最初にこれらの要素を取得しましょう。

// 要素の取得
// openボタン
const open = document.getElementById('open')
// closeボタン
const close = document.getElementById('close')
// コンテナ
const container = document.querySelector('.container')

// 要素の取得

// openボタン

const open = document.getElementById('open')

// closeボタン

const close = document.getElementById('close')

// コンテナ

const container = document.querySelector('.container')

containerだけquerySelectorを使っています。このメソッドで取得できるclassListプロパティを後々使いたいからです。

クリックイベントの登録

次にopen/closeボタンのクリックイベントの登録を行います。

// openのクリックイベント登録
open.addEventListener('click', () => container.classList.add('show-nav'))

// closeのクリックイベント登録
close.addEventListener('click', () => container.classList.remove('show-nav'))

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

open.addEventListener('click', () => container.classList.add('show-nav'))

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

close.addEventListener('click', () => container.classList.remove('show-nav'))

これでOKです。簡単ですね。

前述の通り、show-navクラスをcontainerクラスがついている要素に付与することで、メニューバーを回転させることができます。

addEventListenerにて、「ユーザーのクリックイベント」が登録できるので、この機能を利用してオープン/クローズ処理を実装しました。

そして、querySelectorで取得した要素にはclassListプロパティが存在し、それが持っているadd/removeメソッドにてshow-navクラスの付け替えを行なっています。

おわりに

今回は、JavaScriptは全然難しくありませんでしたね。CSSはめっちゃ難しいですが。。

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素の取得
// openボタン
const open = document.getElementById('open')
// closeボタン
const close = document.getElementById('close')
// コンテナ
const container = document.querySelector('.container')

// openのクリックイベント登録
open.addEventListener('click', () => container.classList.add('show-nav'))

// closeのクリックイベント登録
close.addEventListener('click', () => container.classList.remove('show-nav'))

// 要素の取得

// openボタン

const open = document.getElementById('open')

// closeボタン

const close = document.getElementById('close')

// コンテナ

const container = document.querySelector('.container')

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

open.addEventListener('click', () => container.classList.add('show-nav'))

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

close.addEventListener('click', () => container.classList.remove('show-nav'))

JavaScriptのアプリ実装パターン~回転するメニューバー~

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

要素を取得する

クリックイベントの登録

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

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

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

2021年1月
月	火	水	木	金	土	日
				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	29	30	31

実装するもの

環境構築

CSS版

開発

ページの作成

スタイルの追加

JavaScriptの実装

要素を取得する

クリックイベントの登録

おわりに

JavaScriptまとめ

JavaScript ソースコード

シェア！

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

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

Go言語 ~基礎編~ 関数

[Go言語]Go Modulesのimportで手こずった話をしたいと思いま…

WebpackでTypeScript開発管理をしよう！

[入門]GitHub Actions ~全てのエンジニアのための備忘録~

Djangoでテスト駆動開発を学ぼう！2~初めてのテスト編~

Go言語とファイル操作

TypeScriptでジェネリクス(Generics)を学ぼう!

[NextJS]~Checkout画面:ソースコードをまとめます!~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

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