768px以下で動きを変更しています。PCの場合はこのページで動きをご確認ください
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-1-1.css">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-1.js"></script>
CSSの書き方
/*========= ナビゲーションドロップダウンのためのCSS ===============*/
/*==ナビゲーション全体の設定*/
nav{
background:#333;
color:#fff;
text-align: center;
}
/*ナビゲーションを横並びに*/
nav ul{
list-style: none;
display: flex;
justify-content: center;
}
/*2階層目以降は横並びにしない*/
nav ul ul{
display: block;
}
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{
position: relative;
}
/*ナビゲーションのリンク設定*/
nav ul li a{
display: block;
text-decoration: none;
color: #999;
padding:20px 35px;
transition:all .3s;
}
nav ul li li a{
padding:10px 35px;
}
nav ul li a:hover{
color:#fff;
}
/*==矢印の設定*/
/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before{
content:'';
position: absolute;
left:15px;
top:25px;
width:6px;
height:6px;
border-top: 2px solid #999;
border-right:2px solid #999;
transform: rotate(135deg);
}
/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before{
content:'';
position: absolute;
left:6px;
top:17px;
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:0;
top:62px;
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{
padding: 0;
}
nav ul{
display: block;
}
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;
}
/*矢印の位置と向き*/
nav ul li.has-child::before{
left:20px;
}
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();/* ドロップダウンの関数を呼ぶ*/
});HTML
<div class="wrapper">
<ul class="tab">
<li><a href="#lunch">ランチ</a></li>
<li><a href="#drink">ドリンク</a></li>
<li><a href="#dinner">ディナー</a></li>
</ul>
<div id="lunch" class="area">
<h2>ランチ</h2>
<ul>
<li>ガパオライス</li>
<li>ミートソーススパゲティ―</li>
<li>ハンバーグ定食</li>
</ul>
</div><!--/area-->
<div id="drink" class="area">
<h2>ドリンク</h2>
<ul>
<li>ウーロン茶</li>
<li>オレンジジュース</li>
<li>ジンジャーエール</li>
</ul>
</div><!--/area-->
<div id="dinner" class="area">
<h2>ディナー</h2>
<ul>
<li>カレーライス</li>
<li>ドリア</li>
<li>グラタン</li>
</ul>
</div><!--/area-->
</div><!--wrapper-->
CSS
/* エリアの表示非表示と形状 */
.area {
display: none; /* はじめは非表示 */
opacity: 0; /* 透過0 */
background: #fff;
padding: 50px 20px;
}
/* areaにis-activeというクラスがついた時の形状 */
.area.is-active {
display: block; /* 表示 */
animation-name: displayAnime; /* ふわっと表示させるためのアニメーション */
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes displayAnime {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/*========= レイアウトのためのCSS ===============*/
body {
background: #eee;
}
ul {
list-style: none;
}
a {
color: #333;
text-decoration: none;
}
.wrapper {
width: 100%;
max-width: 960px;
margin: 30px auto;
background: #fefefe;
}
.area h2 {
font-size: 1.3rem;
margin: 0 0 20px 10px;
}
.area li {
padding: 10px;
border-bottom: 1px solid #ddd;
}
JS
//任意のタブにURLからリンクするための設定
function GethashID (hashIDName) {
if(hashIDName){
//タブ設定
$'.tab li').find('a').each(function() { //タブ内のaタグ全てを取得
var idName = $(this).attr('href'); //タブ内のaタグのリンク名（例）#lunchの値を取得
if(idName == hashIDName) { //リンク元の指定されたURLのハッシュタグ（例）https://example.com/#lunch←この#の値とタブ内のリンク名（例）#lunchが同じかをチェック
var parentElm = $(this).parent(); //タブ内のaタグの親要素（li）を取得
$'.tab li').removeClass("active"); //タブ内のliについているactiveクラスを取り除き
$(parentElm).addClass("active"); //リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであれば、liにactiveクラスを追加
//表示させるエリア設定
$(".area").removeClass("is-active"); //もともとついているis-activeクラスを取り除き
$(hashIDName).addClass("is-active"); //表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加
}
});
}
}
//タブをクリックしたら
$('.tab a').on('click', function() {
var idName = $(this).attr('href'); //タブ内のリンク名を取得
GethashID (idName); //設定したタブの読み込みと
return false; //aタグを無効にする
});
// 上記の動きをページが読み込まれたらすぐに動かす
$(window).on('load', function() {
$('.tab li:first-of-type').addClass("active"); //最初のliにactiveクラスを追加
$('.area:first-of-type').addClass("is-active"); //最初の.areaにis-activeクラスを追加
var hashName = location.hash;//リンク元の指定されたURLのハッシュタグを取得
GethashID (hashName);//設定したタブの読み込み
});
html
<ul id="page-link">
<li><a href="#area-1">Area1</a></li>
<li><a href="#area-2">Area2</a></li>
<li><a href="#area-3">Area3</a></li>
</ul>
<h1 class="area" id="area-1">テキスト</h1>
<h1 class="area" id="area-2">テキスト</h1>
<h1 class="area" id="area-3">テキスト</h1>
JS
$('#page-link a[href*="#"]').click(function () {
var elmHash = $(this).attr('href');
// ページ内リンクのHTMLタグhrefから、リンクされているエリアidの値を取得.
var pos = $(elmHash).offset().top;
// idの上部の距離を取得.
$('body,html').animate({scrollTop: pos}, 500);
//取得した位置にスクロール。500の数値が大きくなるほどゆっくりスクロール.
return false;
});