layui树形菜单 如何使用HTML、css、js制作树状图(下拉框)?
如何使用HTML、css、js制作树状图(下拉框)?
首先,您需要打开计算机上的DW软件,创建一个新的HTML页面,然后将其保存在桌面上。
接下来,我们需要在正文中添加div标签,并使用UL unordered list和Li标签创建一级菜单栏。代码和浏览器效果如下图所示。
由于菜单栏通常是链接的,因此我们需要为每个Li标签添加一个标签,并添加适当的样式。使鼠标移动到有明显颜色变化的链接上。
到最后一步,我们的第一级菜单栏已经制作完成。接下来,我们需要制作第二级菜单栏。我们在第一级菜单栏的Li标签下加上UL和第二级菜单栏的Li标签,然后再加上Li标签制作第二级菜单。
二级菜单的代码和CSS样式以及浏览器中的显示效果如下图所示。
如您所见,这是一个静态辅助菜单。辅助菜单将始终显示在网页上。如何先隐藏它,然后在显示它之前将鼠标滑过主菜单?
实际上,我们只需要为二级菜单的UL标签设置显示的none和block属性。默认情况下,secondary UL的display属性设置为none,当鼠标悬停时display属性设置为block。
这样,二级菜单就完成了。如果我们想在其他主菜单下有一个辅助菜单,我们只需要复制相应的代码。
河南新华计算机学院网络运行协会为您解答
layui树形菜单 什么是js javascript下拉菜单
版权声明:本文内容由互联网用户自发贡献,本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。