前言

这几天看到安知鱼大佬的洪里洪气的导航栏甚是喜欢，特别是那个下滑显示文章/页面标题，上滑显示菜单的功能十分眼馋。就找了找教程加上扒一下站，就有了这篇文章

参考

关于Butterfly的导航栏的一些教程

https://yisous.xyz/posts/895003b5/

安知鱼

https://blog.anheyu.com/

我的魔改

我的导航栏使用了 Ariasaka 大佬的

  • 分离搜索栏与菜单栏
  • 导航栏居中
  • 导航栏居中
  • 网站标题部分的增强版
  • 顶栏常驻
  • 显示标题

至于 去掉导航栏项目底下的蓝色长条 这个魔改我没用，因为我还是很喜欢下划线的，所以就做了一点魔改：

显示标题洪哥切换动画版

  1. 修改 [blogRoot]\themes\Butterfly\layout\includes\header\nav.pug
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    nav#nav
    span#blog-info
        a(href=url_for('/') title=config.title)
        if theme.nav.logo
            img.site-icon(src=url_for(theme.nav.logo))
        if theme.nav.display_title
            span.site-name=config.title
        
    #menus
        if (theme.algolia_search.enable || theme.local_search.enable || theme.docsearch.enable)
        #search-button
            a.site-page.social-icon.search(href="javascript:void(0);")
            svg.meta_icon(style="width:20px;height:20px;position:relative;top:2px").post-ui-icon
                use(xlink:href='#icon-sousuo')
        !=partial('includes/header/menu_item', {}, {cache: true})
    +    div.titleNameBox
    +      center(id="name-container")
    +        a(id="page-name" href="javascript:scrollToTop()") PAGE_NAME
        ...
    这是节选，不能直接覆盖
  2. 在 /source/js 目录下新建 nav.js，并引入
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    document.addEventListener('pjax:complete', tonav);
    document.addEventListener('DOMContentLoaded', tonav);
    //响应pjax
    function tonav() {
        // document.getElementById("name-container").setAttribute("style", "display:none");

        var position = $(window).scrollTop();

        $(window).scroll(function () {

            var scroll = $(window).scrollTop();

            if (scroll > position) {
                document.getElementById("name-container").setAttribute("style", "top: 0 !important;");
                // document.getElementById("name-container").classList.add('titleShow');
                document.getElementsByClassName("menus_items")[1].setAttribute("style", "top: -60px !important");

            } else {
                document.getElementsByClassName("menus_items")[1].setAttribute("style", "");
                document.getElementById("name-container").setAttribute("style", "");
                // document.getElementById("name-container").classList.remove('titleShow');
            }

            position = scroll;

        });
        function scrollToTop() {
            document.getElementsByClassName("menus_items")[1].setAttribute("style", "");
            document.getElementById("name-container").setAttribute("style", "");
            btf.scrollToDest(0, 500);
        }
        //修复没有弄右键菜单的童鞋无法回顶部的问题
        document.getElementById("page-name").innerText = document.title.split(" | 鹊楠の小窝")[0];
        document.getElementById("page-name").addEventListener('click', scrollToTop);
    }
  3. 添加css样式，(由于我的样式都是野鸡写法，所以直接把整个nav的样式表贴过来了)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    /* 导航栏魔改 */

    /* 一级菜单居中 */
    #nav .menus_items {
        display: inline-block !important;
        transition: all .3s;
        position: absolute !important;
        width: fit-content !important;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }

    #nav #blog-info {
        flex: none !important;
    }

    /* 子菜单居中 */
    .menus_item_child li:not(#sidebar-menus li) {
        float: left;
        border-radius: 6px !important;
        -webkit-border-radius: 6px !important;
        -moz-border-radius: 6px !important;
        -ms-border-radius: 6px !important;
        -o-border-radius: 6px !important;
    }

    .menus_item_child:not(#sidebar-menus ul) {
        /* left:calc(-150%)!important;这是估算值，为了保持元素居中的，如果不合适可以自己调改为：*/
        left: 50%;
        translate: -50%;
    }

    /* 标题遮罩 */
    .site-name::before {
        opacity: 0;
        background-color: var(--theme-color) !important;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        position: absolute;
        top: 0 !important;
        right: 0 !important;
        width: 100%;
        height: 100%;
        content: "\f015";
        box-shadow: 0 0 5px var(--theme-color);
        font-family: "Font Awesome 6 Free";
        text-align: center;
        color: white;
        line-height: 34px;
        /*如果有溢出或者垂直不居中的现象微调一下这个参数*/
        font-size: 18px;
        /*根据个人喜好*/
    }

    .site-name:hover::before {
        opacity: 1;
        scale: 1.03;
    }

    .site-name {
        position: relative;
        font-size: 24px;
        /*一定要把字体调大点，否则效果惨不忍睹！*/
    }

    #nav.hide-menu #toggle-menu {
        display: none !important;
        padding: 0 6px;
    }

    #search-button,
    #toggle-menu {
        position: relative;
    }

    /* 标题 */
    #nav {
        justify-content: space-between !important;
    }

    .nav-fixed #nav {
        transform: translateY(60px) !important;
        -webkit-transform: translateY(60px) !important;
        -moz-transform: translateY(60px) !important;
        -ms-transform: translateY(60px) !important;
        -o-transform: translateY(60px) !important;
        transition: all .4s !important;
        -webkit-transition: all .4s !important;
        -moz-transition: all .4s !important;
        -ms-transition: all .4s !important;
        -o-transition: all .4s !important;
    }

    #page-name::before {
        font-size: 18px;
        position: absolute;
        min-width: 100px;
        width: 100%;
        height: 35px;
        border-radius: 8px;
        color: white !important;
        top: 50%;
        transform: translate(-50%, -50%);
        left: 50%;
        content: '回到顶部';
        background-color: var(--theme-color);
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        opacity: 0;
        box-shadow: 0 0 3px var(--theme-color);
        line-height: 35px;
        /*如果垂直位置不居中可以微调此值，也可以删了*/
    }

    #page-name:hover:before {
        opacity: 1;
    }

    @media screen and (max-width:768px) {

        #name-container {
            display: none !important;
        }

        .site-name::before {
            line-height: 28px !important;
            font-size: 16px !important;
        }

        #nav .menus_items {
            display: none !important;
        }

        #nav.hide-menu #toggle-menu {
            display: inline-block !important;
        }

        .menus_item_child:not(#sidebar-menus ul) {
            /* left:calc(-150%)!important;这是估算值，为了保持元素居中的，如果不合适可以自己调改为：*/
            translate: 0;
        }

        .menus_item_child li:not(#sidebar-menusli) {
            float: none;
        }

        #sidebar #sidebar-menus .menus_items .site-page:hover {
            color: #fff !important;
        }
    }

    .titleNameBox {
        z-index: -1;
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    #name-container {
        transition: all .3s;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -ms-transition: all .3s;
        -o-transition: all .3s;
        position: absolute;
        top: 60px;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
    }

    #name-container a {
        height: 100%;
        line-height: 60px;
        display: inline-block;
        padding: 0 !important;
        position: relative;
    }

    #name-container:hover {
        scale: 1.03
    }

    #page-name {
        position: relative;
        padding: 10px 30px
            /*如果文字间隔不合理可以微调修改，第二个是水平方向的padding，第一个是垂直的*/
    }

    @media screen and (max-width:1060px) {
        #nav .menus_items .menus_item {
            padding: 0 !important;
        }
    }

    /* 导航栏魔改 end */
    这样你就获得了个有切换动画的导航栏显示标题