グローバルナビゲーション
-ドロップダウンメニュー(左)-
See the Pen 5-1-2 ドロップダウンメニュー(左) by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
768px以下で動きを変更しています。PCの場合は「HTML」ボタンを押して「Result」を全画面にし、動きをご確認ください↑
動きを実現する仕組み
PC 画面(横幅768px 以上)ではCSS を使い、親要素の<li>をhoverしたら非表示にしていた子要素の<ul> を出現させる。
タブレット以下(横幅768px 以下)ではJavaScript を使い、親要素の<li> をクリックしたら非表示にしていた子要素の<ul> を出現させる。
動作の切り分けはJavaScript を利用し、画面がリサイズされたら切り分けるようにする。
[使用するライブラリ]
* jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-1-2.css"> </head>
- body内にドロップダウンメニューのHTMLを記載します。
<nav> <ul> <li><a href="#">Top</a></li> <li><a href="#">About</a></li> <li class="has-child"><a href="#">Service</a><!--子要素を持つ li にはhas-childというクラス名をつける--> <ul> <li><a href="#">Service Top</a></li> <li><a href="#">Service-1</a></li> <li class="has-child"><a href="#">Service-2</a> <ul> <li><a href="#">Service-2 Top</a></li> <li><a href="#">Service-2-1</a></li> <li><a href="#">Service-2-2</a></li> <li><a href="#">Service-2-3</a></li> <li><a href="#">Service-2-4</a></li> </ul> </li> <li><a href="#">Service-3</a></li> </ul> </li> <li class="has-child"><a href="#">Blog</a> <ul> <li><a href="#">Blog Top</a></li> <li><a href="#">Blog-1</a></li> <li><a href="#">Blog-2</a></li> <li><a href="#">Blog-3</a></li> <li><a href="#">Blog-4</a></li> </ul> </li> </ul> </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-2.js"></script> </body>
自作のCSS内の書き方
/*========= ナビゲーションドロップダウンのためのCSS ===============*/
/*==ナビゲーション全体の設定*/
nav{
width:15%;/*navの外側のheaderなどに横幅を指定する場合は削除してください*/
}
nav ul{
list-style: none;
text-align: center;
}
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
position: relative;
}
/*ナビゲーションのリンク設定*/
nav ul li a{
display: block;
text-decoration: none;
color: #000;
padding:15px;
transition:all .3s;
}
nav ul li a:hover{
color:#666;
}
/*==矢印の設定*/
/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
content:'';
position: absolute;
right:30px;
top:20px;
width:6px;
height:6px;
border-top: 2px solid #999;
border-right:2px solid #999;
transform: rotate(45deg);
}
/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before{
content:'';
position: absolute;
left:15px;
top:21px;
width:6px;
height:6px;
border-top: 2px solid #fff;
border-right:2px solid #fff;
transform: rotate(45deg);
}
/*== 2・3階層目の共通設定 */
/*下の階層を持っているulの指定*/
nav li.has-child ul{
/*絶対配置で位置を指定*/
position: absolute;
left:100%;
top:10px;
z-index: 4;
/*形状を指定*/
background:#28BFE7;
width:180px;
/*はじめは非表示*/
visibility: hidden;
opacity: 0;
/*アニメーション設定*/
transition: all .3s;
}
/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{
visibility: visible;
opacity: 1;
}
/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{
color: #fff;
border-bottom:solid 1px rgba(255,255,255,0.6);
}
nav li.has-child ul li:last-child > a{
border-bottom:none;
}
nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{
background:#3577CA;
}
/*==3階層目*/
/*3階層目の位置*/
nav li.has-child ul ul{
top:0;
left:182px;
background:#66ADF5;
}
nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
background:#448ED3;
}
/*==768px以下の形状*/
@media screen and (max-width:768px){
nav{
background:#333;
color: #fff;
}
nav li.has-child ul,
nav li.has-child ul ul{
position: relative;
left:0;
top:0;
width:100%;
visibility:visible;/*JSで制御するため一旦表示*/
opacity:1;/*JSで制御するため一旦表示*/
display: none;/*JSのslidetoggleで表示させるため非表示に*/
transition:none;/*JSで制御するためCSSのアニメーションを切る*/
}
nav ul li a{
border-bottom:1px solid #ccc;
color: #fff;
}
/*矢印の向き*/
nav ul li.has-child::before,
nav ul ul li.has-child::before{
transform: rotate(135deg);
left:20px;
}
nav ul li.has-child.active::before{
transform: rotate(-45deg);
}
}
【ドロップダウンメニューが他の要素の下に来てしまう場合】
リストの親要素にposition 指定+z-index 指定をして他の要素よりもz-indexの値を大きくすると解決します。
※例:
nav{
position:relative;
z-index:999;
}
自作のJS内の書き方
//ドロップダウンの設定を関数でまとめる
function mediaQueriesWin(){
var width = $(window).width();
if(width <= 768) {//横幅が768px以下の場合 $(".has-child>a").off('click'); //has-childクラスがついたaタグのonイベントを複数登録を避ける為offにして一旦初期状態へ
$(".has-child>a").on('click', function() {//has-childクラスがついたaタグをクリックしたら
var parentElem = $(this).parent();// aタグから見た親要素のliを取得し
$(parentElem).toggleClass('active');//矢印方向を変えるためのクラス名を付与して
$(parentElem).children('ul').stop().slideToggle(500);//liの子要素のスライドを開閉させる※数字が大きくなるほどゆっくり開く
return false;//リンクの無効化
});
}else{//横幅が768px以上の場合
$(".has-child>a").off('click');//has-childクラスがついたaタグのonイベントをoff(無効)にし
$(".has-child").removeClass('active');//activeクラスを削除
$('.has-child').children('ul').css("display","");//スライドトグルで動作したdisplayも無効化にする
}
}
// ページがリサイズされたら動かしたい場合の記述
$(window).resize(function() {
mediaQueriesWin();/* ドロップダウンの関数を呼ぶ*/
});
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load',function(){
mediaQueriesWin();/* ドロップダウンの関数を呼ぶ*/
});
バリエーション
を見る
- ドロップダウンメニュー(上)
- ドロップダウンメニュー(写真付 上ナビ)
- ドロップダウンメニュー(写真付 左ナビ)
- スクロールすると上部に固定
- スクロール途中から上部固定
- スクロールするとハンバーガーメニューに変化
- スクロール途中からヘッダーの高さが小さくなる
- スクロール途中でヘッダーが消え、上にスクロールすると復活
- スクロールすると位置が固定して追従
- クリックしたらナビが上から下に出現
- クリックしたらナビが下から上に出現
- クリックしたらナビが左から右に出現
- クリックしたらナビが右から左に出現
- クリックしたら背景が全面に広がる
- クリックしたら円形背景が拡大(上から)
- クリックしたら円形背景が拡大(下から)
- クリックしたら円形背景が拡大(右から)
- クリックしたら円形背景が拡大(左から)
- クリックしたら円形背景が拡大(右上から)
- クリックしたら円形背景が拡大(右下から)
- クリックしたら円形背景が拡大(左上から)
- クリックしたら円形背景が拡大(左下から)
- クリックしたら円形背景が拡大(中央から)
- クリックしたらナビ背景コンテンツがぼかされる
- 追従メニューの現在地ハイライト
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!