前言

博客导航栏的美化我做了很多次,像居中,使用阿里图标等,直到现在用的这个,现在用的这个是模仿Guo Le大佬的博客写的,第一次看到他的导航栏就喜欢上了,有一种简约大气的感觉,所以我就模仿Guo Le大佬的改了一下。
js和css文件创建和引入问题看这篇文章:Hexo博客添加自定义css和js文件

导航栏居中

思路:其实如果单纯的使导航栏居中,是很简单的事情,我们只需要让他绝对定位,然后让他距离左边50%,然后再往左移动自身的50%即可实现。

1
2
3
4
5
6
7
#nav .menus_items {
/* display: inline; 这个带不带都可以,本来就是inline */
position: absolute;
width: fit-content;
left: 50%;
transform: translateX(-50%);
}

注意,这里我们使用fit-content使menus_items的宽度为内容宽度,这样可以避免一些奇奇怪怪的BUG,如下图。
不加fit-content

加fit-content

子菜单横向居中

子菜单居中其实也非常的简单,我们只需要使其所有子菜单先变成横向,即:

1
2
3
#nav .menus_items .menus_item:hover .menus_item_child{
display: flex;
}

至于居中,我看其他博客教程是自动计算,不仅需要修改源码,还得保持每一个子菜单名字同等长度,而且最后还不一定真正居中,歪歪扭扭的很难受,麻烦且效果不够好。

其实我们可以单独给每一个ul元素添加样式。
缺点就是如果你新增菜单,需要修改一下css,不过一般来说菜单我们很少修改。
优点是可以把每一个子菜单调到我们满意的位置,且不需要修改源码。

我们在调子菜单的时候,有个小功能对我们很有用,如下:
打开hover

打开这个可以让子菜单显示出来,方便我们修改样式。这里要注意,我们hover是在div上的,在其他地方hover是没效果的。

然后我们给每一个子菜单设置样式,这里拿一个做演示,如果你有多个折叠子菜单,多复制几个就可以:

1
2
3
4
/* 这里的2是代表导航栏的第二个元素,即有子菜单的元素,可以按自己需求修改 */
.menus_items .menus_item:nth-child(2) .menus_item_child {
left: -65px;
}

待更新

时间原因先写这么多,一般来说就够用了,更主要的是给你一个实现的思路,好的效果需要自己一点点去写,复杂一点的可能就需要修改源码了。