<!– 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="{{ site.baseurl }}/">{{ site.title }}</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 %} <li> <a href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a> </li> {% endif %}{% endfor %} </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>