本篇文章将教大家如何编写导航栏，如果大家掌握之后，通过自定义样式，完全可以实现个性化的导航栏。
效果图
首先我们看下效果图，后面的编辑和查看导航也是相同的效果。
效果图
实现方式
接下来我们直接通过代码的方式来展示如何完成导航栏的编写
css部分代码
首先是div的通用样式
div通用样式
然后是鼠标悬浮的效果
鼠标悬浮效果
最后是菜单栏的效果
菜单栏效果
js代码控制菜单栏效果
首先是鼠标悬停和鼠标离开菜单时的效果
鼠标悬停和移除菜单栏
然后是关于高亮效果的展示和取消
高亮效果的显示和取消
最后是菜单栏被点击时的函数
点击菜单栏的函数
html部分代码
首先我们来看一下导航栏html代码
导航栏的html代码
然后是文件菜单的html代码
文件菜单的html代码
其次是编辑菜单的html代码
编辑菜单的html代码
最后是查看菜单的html代码
查看菜单的html代码
总结
至此，一个完整的自定义导航栏效果就完成了，如果觉得不好看的，完全可以自己设计样式让它更符合自己的品味，如果感兴趣的希望自己把代码试敲一遍，毕竟代码要自己实践才有效果。
本文暂时没有评论，来添加一个吧(●'◡'●)