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

摘要

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

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

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

5.0版本已加入!

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

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

二、下面代码放到主题根目录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');
SmallTown
  • 本文由 发表于 2017年6月13日16:13:58
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:2   其中:访客  1   博主  1
    • coc1992 coc1992

      http://a1.qpic.cn/psb?/V136Z6TX0i9lUV/WRSXl5IYzAuEwkR5UJ3Lz.kzXkSMWOrIQv7cHbmQCDE!/c/dPQAAAAAAAAA&ek=1&kp=1&pt=0&bo=JQWCAyUFggMBACc!&tl=1&tm=1541577600&sce=0-12-12&rf=0-18
      站长,怎么把我画×的分目录隐藏

        • SmallTown SmallTown

          @ coc1992 最简单的方法,右键需要隐藏的区域,审查元素,找到ID或者class,设置CSS属性为display:none;