グローバルナビゲーション
-クリックしたら円形背景が拡大(左から)-
See the Pen 5-1-19 クリックしたら円形背景が拡大(左から) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内のハンバーガーメニューを押して動きを確かめてね!
※CodePenは「.openbtn」というクラス名だと動作しなかったため、.openbtn+数字にしています。解説のクラス名と異なっていますのでご注意ください。
動きを実現する仕組み
jQueryを使い、ボタンをクリックしたら、ボタン、ナビゲーション、円形背景用の<div>にそれぞれクラスを付与する。
クラスが付与されたらCSS のアニメーションを使い、ボタンには開閉のアイコン変化の動きを、円形背景用の<div>には円形の背景が拡大する動きをつけ、ナビゲーションのリストは背景が広がった後、少し遅らせて出現させる。
[使用するライブラリ]
* jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-1-19.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> <div class="circle-bg"></div>
- 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-19.js"></script> </body>
自作のCSS内の書き方
/*========= ナビゲーションのためのCSS ===============*/
/*アクティブになったエリア*/
#g-nav.panelactive{
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position:fixed;
z-index: 999;
top: 0;
width:100%;
height: 100vh;
}
/*丸の拡大*/
.circle-bg{
position: fixed;
z-index:3;
/*丸の形*/
width: 100px;
height: 100px;
border-radius: 50%;
background: #999;
/*丸のスタート位置と形状*/
transform: scale(0);/*scaleをはじめは0に*/
left:-50px;
top:calc(50% - 50px);/*50%から円の半径を引いた値*/
transition: all .6s;/*0.6秒かけてアニメーション*/
}
.circle-bg.circleactive{
transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}
/*ナビゲーションの縦スクロール*/
#g-nav-list{
display: none;/*はじめは表示なし*/
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 999;
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
#g-nav.panelactive #g-nav-list{
display: block; /*クラスが付与されたら出現*/
}
/*ナビゲーション*/
#g-nav ul {
opacity: 0;/*はじめは透過0*/
/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
position: absolute;
z-index: 999;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
opacity:1;
}
/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*リストのレイアウト設定*/
#g-nav li{
text-align: center;
list-style: none;
}
#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;
top:10px;
left: 10px;
z-index: 9999;/*ボタンを最前面に*/
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クラスを付与
$(".circle-bg").toggleClass('circleactive');//丸背景にcircleactiveクラスを付与
});
$("#g-nav a").click(function () {//ナビゲーションのリンクがクリックされたら
$(".openbtn").removeClass('active');//ボタンの activeクラスを除去し
$("#g-nav").removeClass('panelactive');//ナビゲーションのpanelactiveクラスを除去
$(".circle-bg").removeClass('circleactive');//丸背景のcircleactiveクラスを除去
});
バリエーション
を見る
- ドロップダウンメニュー(上)
- ドロップダウンメニュー(左)
- ドロップダウンメニュー(写真付 上ナビ)
- ドロップダウンメニュー(写真付 左ナビ)
- スクロールすると上部に固定
- スクロール途中から上部固定
- スクロールするとハンバーガーメニューに変化
- スクロール途中からヘッダーの高さが小さくなる
- スクロール途中でヘッダーが消え、上にスクロールすると復活
- スクロールすると位置が固定して追従
- クリックしたらナビが上から下に出現
- クリックしたらナビが下から上に出現
- クリックしたらナビが左から右に出現
- クリックしたらナビが右から左に出現
- クリックしたら背景が全面に広がる
- クリックしたら円形背景が拡大(上から)
- クリックしたら円形背景が拡大(下から)
- クリックしたら円形背景が拡大(右から)
- クリックしたら円形背景が拡大(右上から)
- クリックしたら円形背景が拡大(右下から)
- クリックしたら円形背景が拡大(左上から)
- クリックしたら円形背景が拡大(左下から)
- クリックしたら円形背景が拡大(中央から)
- クリックしたらナビ背景コンテンツがぼかされる
- 追従メニューの現在地ハイライト
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!