效果图

实现方法

无意见逛博客看到这样的菜单，于是突发奇想弄来用用。🥙🥙🥙🥙代码来源于下面的博主

毕竟代码是F12得来的，可能有些代码是多于的，但至少能用，以下是我爬来的(多多指正)🥳🥳🥳

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
.l_cover{min-height:56px}

.cover-wrapper{
	top:0;
	left:0;
	max-width:100%;
	display:flex;
	flex-wrap:nowrap;
	flex-direction:column;
	align-items:center;
	align-self:center;
	align-content:center;
	color:#555;
	padding:0 16px;
	-moz-user-select:none;
	-ms-user-select:none;
	-webkit-user-select:none;
	user-select:none;
	position:relative;
	overflow:hidden;
	margin-bottom:-100px
	}
.cover-wrapper .cover-backstretch,.cover-wrapper .cover-bg{
	position:absolute;
	width:100%;
	height:100%;
	background-position:center;
	background-size:cover
}
.cover-wrapper .cover-backstretch.lazyload:not(.loaded),.cover-wrapper .cover-bg.lazyload:not(.loaded){opacity:0}
.cover-wrapper .cover-backstretch.lazyload.loaded,.cover-wrapper .cover-bg.lazyload.loaded{
	animation-delay:0s;
	animation-duration:.5s;
	animation-fill-mode:forwards;
	animation-timing-function:ease-out;
	animation-name:fadeIn
}

@-moz-keyframes fadeIn{
	0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
	100%{opacity:1}
}

@-webkit-keyframes fadeIn{
	0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
	100%{opacity:1}
}

@-o-keyframes fadeIn{
	0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
	100%{opacity:1}
}

@keyframes fadeIn{
	0%{opacity:0;filter:blur(12px);transform:scale(1.02)}
	100%{opacity:1}
}
.cover-wrapper .cover-body{
	z-index:1;position:relative;
	height:30%;
}
.cover-wrapper#half{
	max-height:640px;
	min-height:400px;
	height:calc(36vh - 56px + 200px)
}
.cover-wrapper .cover-body{margin-top:56px;margin-bottom:100px;}
.cover-wrapper .cover-body,.cover-wrapper .cover-body .bottom,.cover-wrapper .cover-body .top{display:flex;flex-direction:column;align-items:center;max-width:100%;}
.cover-wrapper .cover-body .bottom{margin-top:32px}
.cover-wrapper .list-h{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:stretch;
	border-radius:4px;
	-moz-user-select:none;
	-ms-user-select:none;
	-webkit-user-select:none;
	user-select:none
}
.cover-wrapper .list-h a{
	flex:1;
	display:flex;
	font-weight:600
}
.cover-wrapper .list-h a img{
	display:block;
	border-radius:2px;
	margin:4px;
	min-width:40px;
	max-width:44px
}
@media screen and (max-width:768px){
	.cover-wrapper .list-h a img{
		min-width:36px;
		max-width:40px
	}
}
@media screen and (max-width:500px){
	.cover-wrapper .list-h a img{
		margin:2px 4px;
		min-width:32px;
		max-width:36px
	}
}
@media screen and (max-width:375px){
	.cover-wrapper .list-h a img{min-width:28px;max-width:32px}}
	.cover-wrapper{max-width:100%}
	.cover-wrapper.search .bottom .menu{margin-top:16px}
	.cover-wrapper.search .bottom .menu .list-h a{
		white-space:nowrap;
		flex-direction:row;
		align-items:baseline;
		font-size:1rem;
		padding:2px;
		margin:4px;
		color:rgba(85,85,85,.75);
		text-shadow:0 1px 2px rgba(0,0,0,.05);
		border-bottom:2px solid transparent
}
@media screen and (max-width:500px){.cover-wrapper.search .bottom .menu .list-h a{margin:4px 12px}}
.cover-wrapper.search .bottom .menu .list-h a i{margin-right:4px}
.cover-wrapper.search .bottom .menu .list-h a p{font-size:1rem}
.cover-wrapper.search .bottom .menu .list-h a.active,.cover-wrapper.search .bottom .menu .list-h a:active,.cover-wrapper.search .bottom .menu .list-h a:hover{color:#555;border-bottom:2px solid #555}
.cover-wrapper.dock .menu,.cover-wrapper.featured .menu,.cover-wrapper.focus .menu{border-radius:6px}
.cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{flex-direction:column;align-items:center;padding:12px;line-height:1px;border-radius:4px;border-bottom:none;text-align:center;align-content:flex-end;color:rgba(68,68,68,.7);font-size:1.5rem}
@media screen and (max-width:500px){.cover-wrapper.dock .menu .list-h a,.cover-wrapper.featured .menu .list-h a,.cover-wrapper.focus .menu .list-h a{padding:12px 8px}}
.cover-wrapper.dock .menu .list-h a i,.cover-wrapper.featured .menu .list-h a i,.cover-wrapper.focus .menu .list-h a i{margin:8px}
.cover-wrapper.dock .menu .list-h a p,.cover-wrapper.featured .menu .list-h a p,.cover-wrapper.focus .menu .list-h a p{font-size:.875rem}
.cover-wrapper.dock .menu .list-h a.active,.cover-wrapper.featured .menu .list-h a.active,.cover-wrapper.focus .menu .list-h a.active{backdrop-filter:none}
.cover-wrapper.dock .menu .list-h a.active i,.cover-wrapper.dock .menu .list-h a.active i+p,.cover-wrapper.featured .menu .list-h a.active i,.cover-wrapper.featured .menu .list-h a.active i+p,.cover-wrapper.focus .menu .list-h a.active i,.cover-wrapper.focus .menu .list-h a.active i+p{color:#7c5246}
.cover-wrapper.dock .menu .list-h a.active img+p,.cover-wrapper.featured .menu .list-h a.active img+p,.cover-wrapper.focus .menu .list-h a.active img+p{color:#444}.cover-wrapper.dock .menu .list-h a:hover,.cover-wrapper.featured .menu .list-h a:hover,.cover-wrapper.focus .menu .list-h a:hover{background:#fff}
.cover-wrapper.dock .top{margin-bottom:48px}
.cover-wrapper.dock .menu{background:rgba(255,255,255,.5);position:absolute;bottom:0;max-width:100%}
.cover-wrapper.dock .menu .list-h{flex-wrap:nowrap;margin:4px}
.cover-wrapper.dock .menu .list-h a+a{margin-left:4px}
@media screen and (max-width:500px){
	.cover-wrapper.dock .menu .list-h{overflow-x:scroll}
	.cover-wrapper.dock .menu .list-h::-webkit-scrollbar{height:0;width:0}
	.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-track-piece{background:0 0}
	.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb{background:#7c5246;cursor:pointer;border-radius:0}
	.cover-wrapper.dock .menu .list-h::-webkit-scrollbar-thumb:hover{background:#ff5722}}
@supports (backdrop-filter:blur(20px)){
	.cover-wrapper.dock .menu{background:rgba(255,255,255,.5);backdrop-filter:saturate(200%) blur(20px)}}
	.cover-wrapper.featured .menu .list-h{margin:-2px}
	.cover-wrapper.featured .menu .list-h a{margin:2px;background:rgba(255,255,255,.5)}
@supports (backdrop-filter:blur(20px)){
	.cover-wrapper.featured .menu .list-h a{background:rgba(255,255,255,.5);backdrop-filter:saturate(200%) blur(20px)}}
    .cover-wrapper.focus .menu{transition:all .28s ease;-moz-transition:all .28s ease;-webkit-transition:all .28s ease;-o-transition:all .28s ease}
    .cover-wrapper.focus .menu .list-h{margin:2px}
    .cover-wrapper.focus .menu:hover{background:rgba(255,255,255,.5)}
@supports (backdrop-filter:blur(20px)){
	.cover-wrapper.focus .menu:hover{background:rgba(255,255,255,.5);backdrop-filter:saturate(200%) blur(20px)}}
	.cover-wrapper.focus .menu .list-h a{margin:2px}
	.cover-wrapper.focus .menu .list-h a:hover{opacity:1;background:#fff}
  1. 在butterfly\source\css下建立文件cover.css，代码如上
  2. 在主题文件_config.yml中引用该文件
    1
    - <link rel="stylesheet" href="css/cover.css">
  3. 找到butterfly\layout\includes\header中的index.pug文件，添加代码后如下：

  • 添加前

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    header#page-header(class=isHomeClass style=bg_img)
      !=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
      if is_home()
        #site-info
          h1#site_title=site_title
          #site_subtitle
            span#subtitle
          if(theme.social)
            #site_social_icons
              !=fragment_cache('social', function(){return partial('includes/header/social')})
        #scroll_down
          i.fas.fa-angle-down.scroll-down-effects
      else if is_post()
        include ./post-info.pug 
      else
        #page_site-info
          h1#site_title=site_title

  • 添加后

    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
    header#page-header(class=isHomeClass style=bg_img)
      !=partial('includes/header/nav', {}, {cache:theme.fragment_cache})
      if is_home()
        #site-info
          h1#site_title=site_title
          #site_subtitle
            span#subtitle
            #full.cover-wrapper.featured(style='')
              .cover-backstretch
              .cover-body
                .bottom
                  .menu.navigation
                    .list-h
                      a#home.active(href='/', data-pjax-state='')
                        img.lazyload.placeholder.loaded(src='https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/menu/home.png', srcset='https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/menu/home.png', data-ll-status='loaded')
                        p 主页
                      a#archives(href='/archives/', data-pjax-state='load')
                        img.lazyload.placeholder.loaded(src='https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/menu/archive.png', srcset='https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/menu/archive.png', data-ll-status='loaded')
                        p 归档
                      a#links(href='/link/', data-pjax-state='load')
                        img.lazyload.placeholder.loaded(src='https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/menu/link.png', srcset='https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/menu/link.png', data-ll-status='loaded')
                        p 朋友
                      a#comments(href='/Message/', data-pjax-state='')
                        img.lazyload.placeholder.loaded(src='https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/menu/comments.png', srcset='https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/menu/comments.png', data-ll-status='loaded')
                        p 留言
                      a#about(href='/about/', data-pjax-state='load')
                        img.lazyload.placeholder.loaded(src='https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/menu/about.png', srcset='https://cdn.jsdelivr.net/gh/XuxuGood/cdn@master/blogImages/menu/about.png', data-ll-status='loaded')
                        p 关于

          if(theme.social)
            #site_social_icons
              !=fragment_cache('social', function(){return partial('includes/header/social')})
        #scroll_down
          i.fas.fa-angle-down.scroll-down-effects
      else if is_post()
        include ./post-info.pug 
      else
        #page_site-info
          h1#site_title=site_title

    最后三连就可以看到结果了