<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="js/5-1-2.js">
</script>
<style>@charset "utf-8";
/*========= ナビゲーションドロップダウンのためのCSS ===============*/
/*==ナビゲーション全体の設定*/
nav ul {
list-style: none;
text-align: center;
background-color: #ee2;
}
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li {
position: relative;
}
/*ナビゲーションのリンク設定*/
nav ul li a {
display: block;
text-decoration: none;
color: #000;
padding: 15px;
transition: all 0.3s;
}
nav ul li a:hover {
color: #666;
}
/*==矢印の設定*/
/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before {
content: "";
position: absolute;
right: 5px;
top: 30px;
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 0.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: #333;
}
/*矢印の向き*/
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);
}
}
/*========= レイアウトのためのCSS ===============*/
#container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#header {
width: 20%;
background: #333;
background-color: #ee2;
}
#main-area {
width: 80%;
}
@media screen and (max-width: 768px) {
#header,
#main-area {
width: 100%;
}
}
h1 {
font-size: 2rem;
text-align: center;
text-transform: uppercase;
padding: 20px;
}
h2 {
font-size: 1.2rem;
text-align: center;
margin: 0 0 30px 0;
}
p {
margin-top: 20px;
}
small {
background: #333;
color: #fff;
display: block;
text-align: center;
padding: 20px;
}
section {
padding: 30px;
}</style>
</head>
<body>
<div id="container">
<header id="header">
<h1>Logo</h1>
<nav>
<ul>
<li>
<a href="#">Top</a>
</li>
<li>
<a href="#">About</a>
</li>
<li class="has-child">
<a href="#">Service</a>
<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>
</header>
<main id="main-area">
<section id="area-1">
<h2>Area 1</h2>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<p>テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</p>
<!--/area1-->
</section>
<!--/main-->
</main>
<!--/container-->
</div>
<footer id="footer">
<small>© copyright.</small>
</footer>
<script>//ドロップダウンの設定を関数でまとめる
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>a").removeClass("active"); //activeクラスを削除
$(".has-child").children("ul").css("display", ""); //スライドトグルで動作したdisplayも無効化にする
}
}
// ページがリサイズされたら動かしたい場合の記述
$(window).resize(function () {
mediaQueriesWin(); /* ドロップダウンの関数を呼ぶ*/
});
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on("load", function () {
mediaQueriesWin(); /* ドロップダウンの関数を呼ぶ*/
});
//# sourceURL=pen.js</script>
</body>
</html>