98 lines
3.9 KiB
HTML
98 lines
3.9 KiB
HTML
<!-- Navigation -->
|
|
{% if page.nav-style == "invert" or page.header-style == "text" %}
|
|
<nav class="navbar navbar-default navbar-custom navbar-fixed-top invert">
|
|
{% else %}
|
|
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
|
|
{% endif %}
|
|
<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="{{ site.baseurl }}/">{{ site.SEOTitle }}</a>
|
|
</div>
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
<div id="huxblog_navbar">
|
|
<div class="navbar-collapse">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li>
|
|
<a href="{{ site.baseurl }}/">Home</a>
|
|
</li>
|
|
{% for page in site.pages %}
|
|
{% if page.title and page.hide-in-nav != true %}
|
|
<li>
|
|
<a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
|
|
</li>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<li class="search-icon">
|
|
<a href="javascript:void(0)">
|
|
<i class="fa fa-search"></i>
|
|
</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');
|
|
|
|
var __HuxNav__ = {
|
|
close: function () {
|
|
$navbar.className = " ";
|
|
// wait until animation end.
|
|
setTimeout(function () {
|
|
// prevent frequently toggle
|
|
if ($navbar.className.indexOf('in') < 0) {
|
|
$collapse.style.height = "0px"
|
|
}
|
|
}, 400)
|
|
},
|
|
open: function () {
|
|
$collapse.style.height = "auto"
|
|
$navbar.className += " in";
|
|
}
|
|
}
|
|
|
|
// Bind Event
|
|
$toggle.addEventListener('click', function (e) {
|
|
if ($navbar.className.indexOf('in') > 0) {
|
|
__HuxNav__.close()
|
|
} else {
|
|
__HuxNav__.open()
|
|
}
|
|
})
|
|
|
|
/**
|
|
* Since Fastclick is used to delegate 'touchstart' globally
|
|
* to hack 300ms delay in iOS by performing a fake 'click',
|
|
* Using 'e.stopPropagation' to stop 'touchstart' event from
|
|
* $toggle/$collapse will break global delegation.
|
|
*
|
|
* Instead, we use a 'e.target' filter to prevent handler
|
|
* added to document close HuxNav.
|
|
*
|
|
* Also, we use 'click' instead of 'touchstart' as compromise
|
|
*/
|
|
document.addEventListener('click', function (e) {
|
|
if (e.target == $toggle) return;
|
|
if (e.target.className == 'icon-bar') return;
|
|
__HuxNav__.close();
|
|
})
|
|
</script>
|