こんにちは。今回はナビゲーションの作り方２ということで、スマホやパソコンなど、各サイズによるデザインをしていこうと思います。ちなみにこれをレスポンシブデザインといいます。
まだ前回の記事を見ていない方はこちらをご覧ください。
【HTML、CSS、Jquery】ナビゲーションメニューの作り方HTML、CSS】ナビゲーションメニューの作り方2
それではやっていきます。
もっとも簡単な方法はindex.htmlをそっくり次のように入れ替えること。
ドロワーメニュー
<!DOCTYPE html>
<html>
<head>
<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/css/drawer.min.css">
<link rel="stylesheet" href="style.css">
<!-- jquery & iScroll -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.1/js/drawer.min.js"></script>
</head>
<body class="drawer drawer--right">
<header role="banner">
<!-- ハンバーガーボタン -->
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
<!-- ナビゲーションの中身 -->
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu">
<li><a class="drawer-brand" href="#">Brand</a></li>
<li><a class="drawer-menu-item" href="#">ナビ１</a></li>
<li><a class="drawer-menu-item" href="#">ナビ２</a></li>
<li><a class="drawer-menu-item" href="#">ナビ３</a></li>
<li><a class="drawer-menu-item" href="#">ナビ４</a></li>
</ul>
</nav>
</header>
<main role="main">
<!-- Page content -->
</main>
<!-- ドロワーメニューの利用宣言 -->
<script>
$(document).ready(function() {
$('.drawer').drawer();
});
</script>
</body>
</html>この方法はかなり多く使われています。
あとは、「Brand」と「ナビ」というところを自分の好きなメニューに変えてくれればOKです。
ぶっちゃけ最初はよくわからないという人も多いと思いますので、これを入れとけばOKです！
少しだけ解説すると、Jqueryというプログラミング言語を使ってまとめちゃうことができます。
詳しく知りたい方は「Drawer.js」で調べてみてください。
とまあ、これだけだと寂しいので、違う方法も載せておきます。
純粋にコードを書いて作ったものです。
HTML＆Jquery
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<title>ナビゲーションメニューの作り方</title>
</head>
<body>
<div class="nav-toggle"><span></span></div>
<nav class="menu-container">
<ul class="menu">
<li class="menu-item"><a href="#">ホーム</a></li>
<li class="menu-item"><a href="#">ページ A</a></li>
<li class="menu-item"><a href="#">ページ B</a></li>
<li class="menu-item"><a href="#">ページ C</a></li>
<li class="menu-item"><a href="#">ページ D</a></li>
<li class="menu-item"><a href="#">ページ E</a></li>
</ul>
</nav>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
jQuery('.nav-toggle').on('click', function() {
if(jQuery('.menu-container .menu').css('display') === 'block') {
jQuery('.menu-container .menu').slideUp('1500');
}else {
jQuery('.menu-container .menu').slideDown('1500');
}
});
</script>
</body>
</html>CSS
.menu-container {
margin: 0;
position: relative;
}
.menu-container .menu {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
}
.menu-container .menu .menu-item {
flex: 1;
}
.menu-container .menu .menu-item a {
background: #fff;
color: #333;
display: block;
padding: 0.6em 0.4em;
text-align: center;
text-decoration: none;
}
.menu-container .menu .menu-item a:hover {
background: #4ab866;
color: #ffffff;
}
.menu-container .menu .menu-item:last-child a {
border-right: none;
}
@media screen and (max-width: 768px) {
.menu-container .menu {
display: none;
position: absolute;
width: 100%;
}
.menu-container .menu .menu-item a {
border-bottom: 1px solid #ccc;
border-right: none;
}
.menu-container .menu .menu-item:last-child a {
border-bottom: none;
}
.nav-toggle {
display: inline-block;
width: 50px;
height: 50px;
position: relative;
box-shadow: 0 0 0 1px rgba(0,0,0,.1);
cursor: pointer;
}
.nav-toggle span {
position: absolute;
display: block;
top: 50%;
left: 50%;
width: 84%;
height: 16%;
margin: -8% 0 0 -42%;
background: #4ab866;
}
.nav-toggle span::before,
.nav-toggle span::after {
display: block;
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
margin: -8% 0 0 -50%;
background: #4ab866;
}
.nav-toggle span::before {
margin-top: -38%;
}
.nav-toggle span::after {
margin-top: 19%;
}
}コピペして使ってください。
本日はこれで終わり。
