Begin主题，导航栏自动出现、隐藏

摘要

Begin主题，导航栏自动出现隐藏

鸟哥的网站目前有这个功能，估计以后会加进来吧。

一、修改主题目录/template/menu.php，在header标签中添加div，如图所示

二、下面代码放到主题根目录functions.php末尾

//伸缩导航CSS
function dhsscss() {
        echo '<style type="text/css">.slideroll{-webkit-animation-duration:.8s;-moz-animation-duration:.8s;-o-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}@-webkit-keyframes slideDown{0%{-webkit-transform:translateY(-9em)}100%{-webkit-transform:translateY(0)}}@-moz-keyframes slideDown{0%{-moz-transform:translateY(-9em)}100%{-moz-transform:translateY(0)}}@-o-keyframes slideDown{0%{-o-transform:translateY(-9em)}100%{-o-transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(-9em)}100%{transform:translateY(0)}}.slideroll.slideDown{-webkit-animation-name:slideDown;-moz-animation-name:slideDown;-o-animation-name:slideDown;animation-name:slideDown}@-webkit-keyframes slideUp{0%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(-9em)}}@-moz-keyframes slideUp{0%{-moz-transform:translateY(0)}100%{-moz-transform:translateY(-9em)}}@-o-keyframes slideUp{0%{-o-transform:translateY(0)}100%{-o-transform:translateY(-9em)}}@keyframes slideUp{0%{transform:translateY(0)}100%{transform:translateY(-9em)}}.slideroll.slideUp{top:-65px;-webkit-animation-name:slideUp;-moz-animation-name:slideUp;-o-animation-name:slideUp;animation-name:slideUp}#menu-box.shadow{position:static}#header-main.slideDown{top:0;width:100%;z-index:999;position:fixed;}@media screen and (min-width:900px){#search-main.shadow{margin:0 auto;}}</style>';}
add_action('wp_head', 'dhsscss');

//伸缩导航JS
function dhss() {
?>
    <script type="text/javascript" src="//img.thsang.com/theme/1/js/headroom.min.js"></script>
    <script>
        (function() {
     new Headroom(document.querySelector("#header-main"), { 
      tolerance:5,
      offset: 205,
      classes: {
      initial: "slideroll",
      pinned: "slideDown",
      unpinned: "slideUp"
         }
     }).init(); 
        }());
    </script>
<?php
}
add_action('get_footer', 'dhss');