72 lines
2.6 KiB
Plaintext
72 lines
2.6 KiB
Plaintext
|
<!-- Navigation -->
|
||
|
|
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
|
||
|
|
<div class="container-fluid">
|
||
|
|
<!-- Brand and toggle get grouped for better mobile display -->
|
||
|
|
<div class="navbar-header page-scroll">
|
||
|
|
<button type="button" class="navbar-toggle">
|
||
|
|
<span class="sr-only">Toggle navigation</span>
|
||
|
|
<span class="icon-bar"></span>
|
||
|
|
<span class="icon-bar"></span>
|
||
|
|
<span class="icon-bar"></span>
|
||
|
|
</button>
|
||
|
|
<a class="navbar-brand" href="<%= config.root %>"><%= config.title %></a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
||
|
|
<!-- Known Issue, found by Hux:
|
||
|
|
<nav>'s height woule be hold on by its content.
|
||
|
|
so, when navbar scale out, the <nav> will cover tags.
|
||
|
|
also mask any touch event of tags, unfortunately.
|
||
|
|
-->
|
||
|
|
<div id="huxblog_navbar">
|
||
|
|
<div class="navbar-collapse">
|
||
|
|
<ul class="nav navbar-nav navbar-right">
|
||
|
|
<li>
|
||
|
|
<a href="<%= config.root %>">Home</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<% site.pages.forEach(function(page){ %>
|
||
|
|
|
||
|
|
<% if(page.title){ %>
|
||
|
|
<li>
|
||
|
|
<a href="<%= config.root %><%= page.path.replace('index.html', '') %>"><%= page.title %></a>
|
||
|
|
</li>
|
||
|
|
<% } %>
|
||
|
|
<% }); %>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- /.navbar-collapse -->
|
||
|
|
</div>
|
||
|
|
<!-- /.container -->
|
||
|
|
</nav>
|
||
|
|
<script>
|
||
|
|
// Drop Bootstarp low-performance Navbar
|
||
|
|
// Use customize navbar with high-quality material design animation
|
||
|
|
// in high-perf jank-free CSS3 implementation
|
||
|
|
var $body = document.body;
|
||
|
|
var $toggle = document.querySelector('.navbar-toggle');
|
||
|
|
var $navbar = document.querySelector('#huxblog_navbar');
|
||
|
|
var $collapse = document.querySelector('.navbar-collapse');
|
||
|
|
|
||
|
|
$toggle.addEventListener('click', handleMagic)
|
||
|
|
function handleMagic(e){
|
||
|
|
if ($navbar.className.indexOf('in') > 0) {
|
||
|
|
// CLOSE
|
||
|
|
$navbar.className = " ";
|
||
|
|
// wait until animation end.
|
||
|
|
setTimeout(function(){
|
||
|
|
// prevent frequently toggle
|
||
|
|
if($navbar.className.indexOf('in') < 0) {
|
||
|
|
$collapse.style.height = "0px"
|
||
|
|
}
|
||
|
|
},400)
|
||
|
|
}else{
|
||
|
|
// OPEN
|
||
|
|
$collapse.style.height = "auto"
|
||
|
|
$navbar.className += " in";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|