前置き
使用言語
HTML5,CSS,Vue.js(Javascriptのフレームワーク)
HTMLとCSSだけでも書けますが、同じ仕様のハンバーガーメニューのコードを全ファイルに書くのは容量の無駄なので、コードを清潔にするためにVue.jsを採用しています。
簡易的なVue.jsの使用なので初心者にもカスタマイズしやすい汎用性のあるハンバーガーメニューとなっています。
ベタばりでもCSSありのサンプルが作れるようになっています。
実行結果のサンプルはこちら
実装
まずはHTMLを作成しましょう。
ここでコメントアウトしたリストの部分の文字を自分が使いたいものに変えておきましょう。
hamberger.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="hamberger.css">
</head>
<body>
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input">
<span></span>
</label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">
<div class=”contents”>
<div class="menu1">
<p>MainMenu</p><!--ここに見出しを記入-->
<ul>
<li class = "categori">A<!--リスト-->
<ul class = "categori1">
<!--リストをホバーした時に出てくるリスト-->
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</li>
<li class = "categori" ontouchstart = "">B<!--上に同じ-->
<ul class = "categori1">
<!--上に同じ-->
<li><a href="">1</a></li>
</ul>
</li>
</ul>
<hr>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="vue.js"></script>
</body>
</html>
次にCSSを作成します。
hamberger.css
/*ここからリストの装飾*/
.menu1{
margin: 50px 0 0 0px;
}
.menu1 p{
font-size: 30px;
text-align: center;
color: brown;
}
.menu1 a{
color: black;
}
.categori{
margin-bottom: 40px;
font-size: 20px;
list-style: none;
}
.categori a{
list-style: none;
background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, brown 50%);
background-position: 0 0;
background-size: 200% auto;
transition: .3s;
text-decoration: none;
}
.categori a:hover{
background-position: -100% 0;
padding: 5px;
color: #fff;
border-radius: 5px;
}
/*ここまで*/
.categori1 a:before {
content: '';
border-bottom: solid 1px teal;
position: absolute;
bottom: 0; left: 0;
width: 100%;
opacity: 0;
}
.categori1 a:hover:before {
opacity: 1.0;
}
.categori1 a, .categori1 a:before {
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
}
.menu1 li li {
height: 0;
overflow: hidden;
transition: .5s;
}
.menu1 li:hover > ul > li {
height: 2rem;
overflow: visible;
margin-bottom: 30px;
font-size: 20px;
}
#nav-drawer {
display: inline;
margin-left: 5em;
}
/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}
/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 50px;
height: 40px;
vertical-align: middle;
}
/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 10px;/*線の太さ*/
width: 50px;/*長さ*/
border-radius: 3px;
background: red;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -20px;
}
#nav-open span:after {
bottom: -40px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
display: none;/*はじめは隠しておく*/
position: fixed;
z-index: 99;
top: 0;/*全体に広がるように*/
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .5s ease-in-out;
}
/*中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 9999;/*最前面に*/
width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
max-width: 250px;/*最大幅（調整してください）*/
height: 100%;
background: #fff;/*背景色*/
transition: .6s ease-in-out;/*滑らかに表示*/
-webkit-transform: translateX(-105%);
transform: translateX(-105%);/*左に隠しておく*/
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
display: block;/*カバーを表示*/
opacity: .5;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);/*中身を表示（右へスライド）*/
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
一度ここまで完成したらブラウザで仕様を試してみましょう。うまくいっていればVue.jsの実装に移りましょう。
まずVue.jsを作成します。
vue.js
var app = new Vue({
el: '#vue',
data: {
hamberger: ''
}
})
その後hamberger.htmlのこの部分のコードをコピーした後に削除します。
hamberger.html
<div id="nav-drawer">
<input id="nav-input" type="checkbox" class="nav-unshown">
<label id="nav-open" for="nav-input">
<span></span>
</label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<div id="nav-content">
<div class=”contents”>
<div class="menu1">
<p>MainMenu</p>
<ul>
<li class = "categori">A
<ul class = "categori1">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
</ul>
</li>
<li class = "categori" ontouchstart = "">B
<ul class = "categori1">
<li><a href="">1</a></li>
</ul>
</li>
</ul>
<hr>
</div>
</div>
</div>
</div>
そして、このコピーしたコードを先程のvue.jsの''の中にペーストします！！
vue.js
var app = new Vue({
el: '#vue',
data: {
hamberger: '<div id="nav-drawer"><input id="nav-input" type="checkbox" class="nav-unshown"><label id="nav-open" for="nav-input"><span></span></label><label class="nav-unshown" id="nav-close" for="nav-input"></label><div id="nav-content"><div class=”contents”><div class="menu1"><p>MainMenu</p><ul><li class = "categori">A<ul class = "categori1"><li><a href="">1</a></li><li><a href="">2</a></li><li><a href="">3</a></li><li><a href="">4</a></li></ul></li><li class = "categori" ontouchstart = "">B<ul class = "categori1"><li><a href="">1</a></li></ul></li></ul><hr></div></div></div></div>'
}
})
最後に、先ほどhamberger.htmlの中の削除したコードの部分にこのコードを追加します。
このコードはvue.jsをhtmlに呼び出すためのコードです。
hamberger.html
<div id = "vue">
<div v-html = "hamberger"></div>
</div>
これでハンバーガーメニューの実装は完成です！！
他のファイルに同じハンバーガーメニューを実装するには？
すでにハンバーガーメニューのコード自体はvue.jsに入っているのでこれからはそれを呼び出してあげるだけで同じものがどのファイルでも使えるようになります！
他のファイルでの使用時
使用したいHTMLファイルのbodyタグの終わりに必ずこのコードを書いてください。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="vue.js"></script>
その後呼び出し用のHTMLコードを書けば他のファイルにも実装が可能になります！！
終わりに
多分、今回紹介した方法は一番効率がいいかというとそうではないかもしれませんが、難しいコードもなく初心者でも簡単に自分好みにカスタマイズできるという点にも重きを置きたかったので簡易的なVue.jsを使用した汎用性のあるハンバーガーメニューの実装の紹介をしました。
↧