Materializeにナビバーに挑む
Materializeにナビバーに挑む。
サイドナビの項目をコピペするだけ、Footerもつけるとだいたいこんな感じになる。
<!DOCTYPE html>
<html lang="ja">
<head>
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
header, main, footer {
padding-left: 240px;
}
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul id="slide-out" class="side-nav fixed">
<li><a href="#!">First Sidebar Link</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<a class="collapsible-header">Dropdown_unko<i class="mdi-navigation-arrow-drop-down"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#!">First</a></li>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li><a href="#!">Second Sidebar Link</a></li>
</ul>
<ul class="right hide-on-med-and-down">
<li><a href="#!">First Sidebar Link</a></li>
<li><a href="#!">Second Sidebar Link</a></li>
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">First</a></li>
<li><a href="#!">Second</a></li>
<li><a href="#!">Third</a></li>
<li><a href="#!">Fourth</a></li>
</ul>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>
</header>
<main>
</main>
<footer class="page-footer">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">Footer Content</h5>
<p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
<li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
c 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
// Initialize collapse button
$(".button-collapse").sideNav();
// Initialize collapsible (uncomment the line below if you use the dropdown variation)
//$('.collapsible').collapsible();
</script>
</body>
</html>
side-nav fixed の fixed がみんな求める何かじゃないかと思う。
ただしその場合は、css に追記が必要で、header に直書きした部分がそれになる。
cssの追記がない場合は、左のメニューがオーバーラップしたままになり、左部分のコンテンツが見えない状態になってしまう。
一番下の a タグから slide-out が呼び出されて、２つあるうちの上の方の ul が呼ばれるのかな。
下の ul タグは hide-on-med-and-down って書いてあるがこれは
Helpers - Materialize ここに書いてあって
Hidden for Tablet and Below、タブレット以下なら隠れる、ってことかな？
逆に .hide-on-med-and-up なんてのもあるので、後で試してみたい。
footer は header, main, footer の構成ちゃんとしろよ、と書いてある感じなのでとりあえず全体構成をそんな感じにしてみた。
次は、inboxの丸ボタンを追加してみたい。
