基本信息

服务器选择 Hexo+Butterfly主题 博客时间 2023.08.01
搭建结果 头部导航栏美化，修改了鼠标移入菜单效果

添加自定义css样式文件的方法，可以参考另一篇文章：自定义css样式文件

鼠标移入菜单效果

调整方案：
原移入效果为：选项底部出现蓝条提示
调整后为：鼠标移入选项后，选项放大提示，并去除底部提示蓝条
调整措施：
在自定义的css样式文件（鼠标移入菜单效果.css）中加入样式，如下：

1
2
3
4
5
6
7
8
9
10
11
/* 去除导航栏选项中底下的蓝条 */
#nav *::after{
    background-color: transparent!important;
}

/* 导航栏菜单鼠标移入字体放大 */
#nav #site-name:hover, 
#nav .menus_item:hover, 
#nav #search-button:hover{
    font-size:28px;
}

居中导航栏（未采用）

调整方案：
将除了搜索的所有菜单放在中间位置
调整措施：
自定义css样式文件加入样式
添加如下css样式即可获得居中的菜单效果

1
2
3
4
5
6
7
8
/* 导航栏做居中处理 */
#nav-right{
    flex:1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap:nowrap;
}

参考链接

Hexo：Butterfly主题魔改之头部导航栏