グローバルナビゲーション
-クリックしたらナビが左から右に出現-
See the Pen 5-1-13 クリックしたらナビが左から右に出現 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内のハンバーガーメニューを押して動きを確かめてね!
※CodePenは「.openbtn」というクラス名だと動作しなかったため、.openbtn+数字にしています。解説のクラス名と異なっていますのでご注意ください。
動きを実現する仕組み
jQueryを使い、ボタンをクリックしたら、ボタンとナビゲーションにそれぞれクラスを付与。
クラスが付与されたらCSSのアニメーションを使ってボタンに開閉のアイコン変化の動きをつけ、ナビゲーションは位置をずらしてスライドさせる。
[使用するライブラリ]
* jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-1-13.css"> </head>
- body内にボタンとナビゲーションのHTMLを記載します。
<div class="openbtn"><span></span><span></span><span></span></div> <nav id="g-nav"> <div id="g-nav-list"><!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除--> <ul> <li><a href="#">Top</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav>
- body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!--自作のJS--> <script src="js/5-1-13.js"></script> </body>
自作のCSS内の書き方
/*========= ナビゲーションのためのCSS ===============*/
#g-nav{
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position:fixed;
z-index: 999;
/*ナビのスタート位置と形状*/
top:0;
left: -120%;
width:100%;
height: 100vh;/*ナビの高さ*/
background:#999;
/*動き*/
transition: all 0.6s;
}
/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
left: 0;
}
/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999;
width:100%;
height: 100vh;/*表示する高さ*/
overflow: auto;
-webkit-overflow-scrolling: touch;
}
/*ナビゲーション*/
#g-nav ul {
/*ナビゲーション天地中央揃え*/
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
/*リストのレイアウト設定*/
#g-nav li{
list-style: none;
text-align: center;
}
#g-nav li a{
color: #333;
text-decoration: none;
padding:10px;
display: block;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: bold;
}
/*========= ボタンのためのCSS ===============*/
.openbtn{
position:fixed;
z-index: 9999;/*ボタンを最前面に*/
top:10px;
left: 10px;
cursor: pointer;
width: 50px;
height:50px;
}
/*×に変化*/
.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 14px;
height: 3px;
border-radius: 2px;
background-color: #666;
width: 45%;
}
.openbtn span:nth-of-type(1) {
top:15px;
}
.openbtn span:nth-of-type(2) {
top:23px;
}
.openbtn span:nth-of-type(3) {
top:31px;
}
.openbtn.active span:nth-of-type(1) {
top: 18px;
left: 18px;
transform: translateY(6px) rotate(-45deg);
width: 30%;
}
.openbtn.active span:nth-of-type(2) {
opacity: 0;
}
.openbtn.active span:nth-of-type(3){
top: 30px;
left: 18px;
transform: translateY(-6px) rotate(45deg);
width: 30%;
}
自作のJS内の書き方
$(".openbtn").click(function () {//ボタンがクリックされたら
$(this).toggleClass('active');//ボタン自身に activeクラスを付与し
$("#g-nav").toggleClass('panelactive');//ナビゲーションにpanelactiveクラスを付与
});
$("#g-nav a").click(function () {//ナビゲーションのリンクがクリックされたら
$(".openbtn").removeClass('active');//ボタンの activeクラスを除去し
$("#g-nav").removeClass('panelactive');//ナビゲーションのpanelactiveクラスも除去
});
この技術を使ったサンプルサイト
バリエーション
を見る
- ドロップダウンメニュー(上)
- ドロップダウンメニュー(左)
- ドロップダウンメニュー(写真付 上ナビ)
- ドロップダウンメニュー(写真付 左ナビ)
- スクロールすると上部に固定
- スクロール途中から上部固定
- スクロールするとハンバーガーメニューに変化
- スクロール途中からヘッダーの高さが小さくなる
- スクロール途中でヘッダーが消え、上にスクロールすると復活
- スクロールすると位置が固定して追従
- クリックしたらナビが上から下に出現
- クリックしたらナビが下から上に出現
- クリックしたらナビが右から左に出現
- クリックしたら背景が全面に広がる
- クリックしたら円形背景が拡大(上から)
- クリックしたら円形背景が拡大(下から)
- クリックしたら円形背景が拡大(右から)
- クリックしたら円形背景が拡大(左から)
- クリックしたら円形背景が拡大(右上から)
- クリックしたら円形背景が拡大(右下から)
- クリックしたら円形背景が拡大(左上から)
- クリックしたら円形背景が拡大(左下から)
- クリックしたら円形背景が拡大(中央から)
- クリックしたらナビ背景コンテンツがぼかされる
- 追従メニューの現在地ハイライト
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!