こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
<目次>
実装するもの
今回は、メニューバーをJavaScriptで回転させる方法について学びましょう。とは言っても半分以上はCSSの機能になってしまいますけど^^;
demoは、「こちら」で確認できます。
環境構築
最初に、簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
開発
ページの作成
最初にページの作成をしましょう。index.htmlに次のコードを記述してください。
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 32 33 34 35 36 37 38 39 40 41 42 43 |
<!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> |
このHTMLをブラウザ上で表示すると以下のようになります。

画像がオーバーレイしているので見えないのですが、ナビゲーションバーには、Font Awesomeのアイコンを利用しています。
スタイルの追加
次にスタイルをstyle.cssに記述してきましょう。
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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クラスがついている要素」に付与するとメニューバーが回転します。
1 2 3 4 |
... <body> <div class="container show-nav"> <<< ここにつける ... |

要素を取得する
JavaScriptで制御すべき要素が3つあります。最初にこれらの要素を取得しましょう。
1 2 3 4 5 6 7 |
// 要素の取得 // openボタン const open = document.getElementById('open') // closeボタン const close = document.getElementById('close') // コンテナ const container = document.querySelector('.container') |
containerだけquerySelectorを使っています。このメソッドで取得できるclassListプロパティを後々使いたいからです。
クリックイベントの登録
次にopen/closeボタンのクリックイベントの登録を行います。
1 2 3 4 5 |
// 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 ソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 要素の取得 // 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')) |
コメントを残す
コメントを投稿するにはログインしてください。