【Bootstrap】スマホファーストのナビバー【スライドエフェクト付き】
Bootstrapのスマホファーストのナビバー（スライドエフェクト付き）のコードです。
基本的にはBootstrap Snippet navbar lateral slide menuのコードを使いつつ、若干カスタマイズしています。
動作確認用のgif
こんな感じ。シンプルですが、十分かなと。
コード全て（HTML/CSS/JS）
下記のとおり。コピペでそのまま動くようにしています。不要なコードはできるだけ除去しています。
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>【Bootstrap】スマホファーストのナビバー【スライドエフェクト付き】</title>
<!-- Bootstrapの読み込み -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<style type="text/css">
/* スマホとタブレットのみに適用 */
@media screen and (max-width: 768px) {
.side-collapse-container{
width:100%;
position:relative;
left:0;
transition:left .4s;
}
.side-collapse-container.out{
left:200px;
}
.side-collapse {
top:50px;
bottom:0;
left:0;
width:200px;
position:fixed;
overflow:hidden;
transition:width .4s;
}
.side-collapse.in {
width:0;
}
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-inverse">
<div class="container">
<!-- nav -->
<div class="navbar-header">
<button data-toggle="collapse-side" data-target=".side-collapse" data-target-2=".side-collapse-container" type="button" class="navbar-toggle pull-left">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Project Name
</a>
</div>
<div class="navbar-inverse side-collapse in">
<nav role="navigation" class="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#Home">Home</a></li>
<li><a href="#users">Users</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<!-- /nav -->
</div>
</nav>
</header>
<!-- メインのコンテンツエリア -->
<section>
<article></article>
</section>
<!-- /メインのコンテンツエリア -->
<footer>
</footer>
</body>
<!-- BootstrapとjQueryの読み込み -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var sideslider = $('[data-toggle=collapse-side]');
var sel = sideslider.attr('data-target');
var sel2 = sideslider.attr('data-target-2');
sideslider.click(function(event){
$(sel).toggleClass('in');
$(sel2).toggleClass('out');
});
});
</script>
</html>以上、わりと便利かなと思いました。
※P.S：無料メルマガで発信中：過去の僕は「ブログ発信で５億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら１秒で解約できます。無料登録は「こちら」です。