webサイト制作の勉強|2018年9月クラス用ブログ

webサイト制作の勉強に関する解説ブログです。

ドロワーメニュー

f:id:yachin29:20170417125330p:plain


スマホサイトでは3本線のハンバーガーメニューを押したら、横からメニューが出て来る。という動きをよく見かけます。
そういうメニューを「ドロワーメニュー」と言ったりします。

jonsuh.com



もちろん便利なプラグインはありますが、このようなシンプルな動きはプラグインを使わず、極力自身で作るようにしましょう。
ただ、動きのバリエーションなどをプラグインを参考にしてみるのは良いと思います。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>drawerメニュー</title>
<style>
html,body,h1,p,ul,li {
  margin:0;
  padding:0;
  line-height:1.0;
}
ul {
  list-style:none;
}
a {
  text-decoration:none;
}
.container {
  width:376px;
  height:2000px;
  margin:0 auto;
  background:#CCC;
  overflow:hidden;
}
header {
  width:100%;
  height:60px;
  background:#0099FF;
  position:relative;
}
h1 {
  text-align:center;
  line-height:60px;
}
#btn {
  width:40px;
  height:40px;
  background:#FFF;
  position:absolute;
  top:10px;
  right:10px;
  background:url(img/line.png) no-repeat; 
}
#btn.line {
  background:url(img/batu.png) no-repeat;
}
#g-nav {
  width:100%;
  height:calc(100vh - 60px);/*可能であればnav要素で画面を覆うように*/
  background:rgba(0,0,0,0.4);
  transform:translate(100%,0);
  transition:0.2s;
}
#g-nav.click {
  transform:translate(0,0);
}
#g-nav ul {
  height:50vh;
  background:#FF9999;
}
.main p {
  line-height:2;
  padding:10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function(){
$('#btn').on('click',function(){
  $('#g-nav').toggleClass('click');
  $(this).toggleClass('line');
	});
});
</script>
</head>

<body>
<div class="container">
<header>
<h1>タイトル</h1>
<p id="btn"><span></span></p>
<nav id="g-nav" >
<ul>
<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>
</nav>
</header>

<div class="main">
<p>
親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。弱虫やーい。と囃したからである。小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。(青空文庫より)親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事</p>
</div>
</div>
</body>
</html>


f:id:yachin29:20181114175457p:plain

f:id:yachin29:20181114175508p:plain