此教程和本站现在所使用的效果有区别。

前置条件

js和css文件创建和引入问题看这篇文章:Hexo博客添加自定义css和js文件

导航栏居中

思路:我们只需要让他绝对定位,然后让他距离左边50%,然后再往左移动自身的50%即可实现。

1
2
3
4
5
6
#nav .menus_items {
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;
}