课件-综合案例-应用项目-导航栏下拉菜单.pptxVIP

导航栏下拉菜单石家庄信息工程职业学院 某信息技术公司为客户设计制作“青年志愿者”网站，为了清晰展示网站结构，引导用户快速找到所需内容，页面中需要加入导航栏，本节课主要学习如何利用JavaScript制作带有下拉菜单的导航栏。任务导入 任务分析导航栏下拉菜单是网页中常见的页面元素，当鼠标指针移动到导航栏选项区域时，显示该选项的下拉菜单；当鼠标指针移出当前选项时，隐藏下拉菜单。 目标TARGET 掌握导航栏下拉菜单的页面结构 实现鼠标指针移入、移出时下拉菜单显示和隐藏效果 任务拓展：思考如何实现导航栏顶端固定，并尝试实现任务分析 任务分析ullialialialiaul导航栏的页面结构 任务分析ullialialialiaul鼠标指针移入、移出时下拉菜单显示和隐藏效果为导航栏中每个选项li元素添加鼠标事件当鼠标移入li元素事件发生时，下拉菜单ul元素显示当鼠标移出li元素事件发生时，下拉菜单ul元素隐藏 任务实施导航栏下拉菜单实现编写页面布局编写HTML代码搭建页面的整体布局实现下拉菜单显示/隐藏的效果首先获取元素节点，然后为获取的每个元素节点注册鼠标移入和移出事件，最后在事件处理函数中，设置下拉菜单的显示和隐藏。12 任务拓展思考当页面向上滚动时，如何实现导航栏顶端固定0 任务拓展JavaScript代码参考 任务总结学会分析页面交互效果实