零起点HTML5+CSS3+JavaScript+jQuery前端开发案例式教程PPT课件（共14章）11创建移动端底部菜单.pptVIP

2.“商家底部菜单”框架嵌套步骤二，加入菜单框后对应css代码 7.4.3 框架对应css样式分析 /*宽度250px 、行高为50px、左边框线*/ .bottom_nav { width:250px; line-height: 50px; border-left: 1px solid gainsboro; } 2 7.4.3 框架对应css样式分析 3.“商家底部菜单”框架嵌套步骤三，加入子菜单框和菜单项后对应css代码 /*固定定位，底部位置为50px、设置宽度、左外边距、边框线、文本对齐、背景色、隐藏不可见 */ .nav-submenu{ position: fixed; bottom: 50px; width: 250px; margin-left: -1px; border: 1px solid gainsboro; text-align: center; background-color: white; display: none; } /* 删除超链接文本下划线、设置文字颜色*/ a{ text-decoration: none; color:#333; } 3 7.4.3 框架对应css样式分析 4.“商家底部菜单”框架嵌套步骤四，加入子菜单项后,，对应的css代码 /*子菜单项设置底部边框线 */ .sub_menu{ border-bottom: 1.5px solid #F2F2F2; } /* 鼠标移到菜单框上，子菜单框显示*/ .bottom_nav:hover .nav-submenu{ display: block; } 4 7.4.4 JavaScript效果分析及编码 步骤1： 在head中引入script type=text/javascript，html文档加载完毕执行下面代码 script type=text/javascript window.onload = function() { } /script 步骤2：获取类名为sub_menu的DOM对象集合 1 2 7.4.4 JavaScript效果分析及编码 步骤3：对子菜单项sub_menu集合做循环，给每一个sub_menu菜单项创建鼠标移上去的事件，事件操作为当前操作的sub_menu菜单项背景色设置为黄色。 3 * * * * 7.4 创建移动端底部菜单 7.4.1 框架分析 某商家底部菜单，该菜单的结构从左到右包括会员、点单、信息3个菜单框，鼠标移到这3个菜单上，会显示子菜单项。鼠标移到子菜单项上会变黄色。 运行效果 7.4.1 框架分析 大框 大框 菜单框 菜单框 菜单框 1 2 3 7.4.2 框架对应html代码 “商家底部菜单”框架嵌套步骤一,大框对应html代码 大框 div class=box /div “商家底部菜单”框架嵌套步骤二,加入菜单框后对应html代码 1 2 7.4.2 框架对应html代码 3.“商家底部菜单”框架嵌套步骤三，加入子菜单框和菜单项后,，对应的html代码 3 7.4.2 框架对应html代码 4.“商家底部菜单”框架嵌套步骤四，加入子菜单项后,，对应的html代码 4 7.4.3 框架对应css样式分析 1.“商家底部菜单”框架嵌套步骤一，大框对应css代码 大框 .box { /*设置宽度、固定定位、设置 z-index: 9999，保证该框在最顶上显示*/ width: 754px; position: fixed ; z-index: 9999; /*左边距离0px，底部距离0px*/ left: 0px;bottom: 0px; /*实现flex布局，主轴对齐方式是两端对齐，项目之间的间隔都相等。*/ display:flex;justify-content: space-between; /* 顶上边框线、字颜色、文本对齐、背景颜色*/ border-top: 1px solid gainsboro; color: black; text-align: center; background-color: #f2f2f2; } 1 * * * *