Javascript每日一学-原生JavaScript自制个性化导航栏

本篇文章将教大家如何编写导航栏，如果大家掌握之后，通过自定义样式，完全可以实现个性化的导航栏。

效果图

首先我们看下效果图，后面的编辑和查看导航也是相同的效果。

效果图

实现方式

接下来我们直接通过代码的方式来展示如何完成导航栏的编写

css部分代码

首先是div的通用样式

div通用样式

然后是鼠标悬浮的效果

鼠标悬浮效果

最后是菜单栏的效果

菜单栏效果

js代码控制菜单栏效果

首先是鼠标悬停和鼠标离开菜单时的效果

鼠标悬停和移除菜单栏

然后是关于高亮效果的展示和取消

高亮效果的显示和取消

最后是菜单栏被点击时的函数

html部分代码

首先我们来看一下导航栏html代码

导航栏的html代码

然后是文件菜单的html代码

文件菜单的html代码

其次是编辑菜单的html代码

编辑菜单的html代码

最后是查看菜单的html代码

查看菜单的html代码

总结

至此，一个完整的自定义导航栏效果就完成了，如果觉得不好看的，完全可以自己设计样式让它更符合自己的品味，如果感兴趣的希望自己把代码试敲一遍，毕竟代码要自己实践才有效果。