Sublime编纂器
HTML+CSS方式/
1编写菜单所需要的HTML布局， 代码及预览结果如下图所示：
文章插图
文章插图
2【使用CSS模仿一个京东菜单效果】为菜单设置CSS全局样式， 对菜单的整体进行节制， 代码及预览结果如下图所示：
文章插图
文章插图
3设置菜单的局部样式， 别离对容器container、 LOGO、菜单地点的块进行节制， 代码和预览结果如下图所示：
文章插图
文章插图
4设置每一个菜单项， 并对包含在
内的子菜单进行节制， 默认子菜单不显示， 代码和结果如下图所示：
文章插图
文章插图
5这是最关头的一步， 利用动态伪类中的“:hover”当鼠标悬停到导航链接上时， 响应的元素发生转变， 代码及结果如下图所示：
文章插图
文章插图
6至此， 所有的工作就全数完当作了， 打开浏览器， 将鼠标悬停到左侧的导航上， 右则将显示出对应的内容 。 结果不错吧？脱手尝尝吧！！
文章插图
以上内容就是使用CSS模仿一个京东菜单效果的内容啦， 希望对你有所帮助哦！
推荐阅读
- 如何使用JS获得textarea中选中的文字
- 如何使用jquery插件jqprint打印指定内容
- 我们应当如何使用茶油？茶油有什么样的作用？
- 使用高压锅要注意哪些方面？
- 营养液的使用方法
- 足浴盆在使用时有哪些注意要点？
- 支付宝蚂蚁庄园怎么使用新蛋卡
- PPT触发器的设置和使用方法
- proteus7.8的基本使用教程
- 电脑硬盘如何使用分区助手分区