如何让一个下拉菜单使用吗<详细>标签
下拉菜单设计是一个很好的选择,因为它可以节省很多空间在一个网页上。时显示大型子菜单,菜单下拉被证明是一个不错的选择,尤其是对于移动屏幕。
下拉菜单与HTML和CSS但是没有Javascript
Javascript是一个很好的工具来添加交互性的用户界面。但许多web开发人员可能希望避免javascript。还可以使用CSS添加交互性用户体验元素。
使用细节标签下拉菜单
的细节标签提供了大量的交互性不使用javascript。这个标签主要用于显示一些隐藏内容的点击一个按钮就像显示在标签的细节。所以,细节标签类似于下拉在外观和功能方面。让我们做一个下拉菜单使用细节和总结在html标签。
下拉菜单的骨架
以下是html下拉菜单。
步骤
- 添加一个
细节标记并添加总结在这个标签。 - 添加
ul标记并添加尽可能多的李标记在这个如你需要。 - 复制这段代码多次所需数量的菜单项。
当前页面是没有风格。当你将把它在浏览器,它会像这张照片。
添加CSS
现在的骨架是准备好了,你需要让它看起来漂亮。让我们添加一些CSS创建一个漂亮的外观。
步骤
- 编写规则的字体和字体大小。
- 编写CSS代码显示不同颜色的字体标记。
- 编写CSS添加样式下拉按钮。在这里,我使用了
总结标签的按钮。 - 编写CSS下拉按钮上悬停效果。
- 编写CSS进行足够的空间在列表项,让它变得easiery用户点击它们在小屏幕上。
- 编写CSS徘徊影响列表项。
现在,随着风格部分已经结束,您可以刷新页面看到它的新面貌。它会看起来像下面的图片。
你可以把这个演示Codepen