使用JavaScriptjQuery实现页面特效第十一章-实践.pptVIP

* 实践十一 页面导航 实践目标 制作导航条的下拉级联菜单 用TreeView实现页面导航 制作美淘网页面导航条中“全部商品分类”的下拉菜单“酒店”的级联菜单。 （1）用户把光标移入到“全部商品分类”的下拉菜单“酒店”时，其级联级菜单横向滑入显示。 任务一：制作导航条的下拉级联菜单 （2）当单击“酒店”的下拉级联菜单中的“豪华酒店”链接时，跳转到美淘网的hottopic.html页面的相应位置。 （3）如果仍然是index.html页面，没有跳转到酒店主题页面，当光标从“酒店”菜单移出时，其级联菜单滑出隐藏。 任务一：制作导航条的下拉级联菜单 （1）修改首页index.html，在“酒店”的li标签中嵌套ulli，添加下拉级联菜单即三级菜单。 （2）添加样式规则，如下拉级联菜单的定位方式、显示方式、文字大小和行高等。 （3）在文档加载完成事件中，给“全部商品分类”的下拉菜单的鼠标移入、移出事件绑定方法，实现下拉级联菜单的滑入、滑出动画效果。 任务一：制作导航条的下拉级联菜单 任务一：制作导航条的下拉级联菜单 修改index.html页面，需要增加的代码如下： … lia href=#酒店/a !—下拉级联菜单即三级菜单-- ul lia href=hottopic.html#best豪华酒店/a/li lia href=hottopic.html#flat公寓酒店/a/li lia href=hottopic.html#holiday度假首选/a/li lia href=hottopic.html#love经济有爱/a/li lia href=hottopic.html#inn客栈情怀/a/li /ul /li … 任务一：制作导航条的下拉级联菜单 增加样式规则，如下所示： /*二级菜单*/ #nav ul li ul li { float: none; position:relative; /*定位三级菜单位置的参考点*/ } #nav ul li ul li a { float: none } /*三级菜单*/ #nav ul li.menuList ul li ul{ display:none; position:absolute; /*脱离文档流*/ } /*三级菜单的文本样式*/ #nav ul li.menuList ul li ul li a{ line-height:20px; height:20px; font-size:12px; text-align:left; } 任务一：制作导航条的下拉级联菜单 在文档加载完成事件中，给“全部商品分类”的下级菜单的鼠标移入、移出事件绑定方法，代码如下： script src=js/jquery-1.11.0.min.js/script script type=text/javascript $(function(){ //下拉级联菜单即三级菜单的滑入滑出 $(div#nav li.menuListulli).hover(function () { // 鼠标移入到第二级菜单，对应的三级菜单滑入 var subMenuWidth = $(this).width(); //二级菜单的宽度，即是三级菜单水平偏移的距离 $(this).children(ul).css({ width: 100px, top: 0px, left: subMenuWidth }).stop().slideDown(fast); //设置三级菜单的css属性和滑入效果 }, function () { //鼠标移出二级菜单项，对应的三级级菜单滑出 $(this).children(ul).stop().slideUp(fast); }); }); /script 制作美淘网详情页面detail.html导航条中“全部商品分类”的下拉菜单“酒店”的级联菜单。 （1）用户把光标移入到“全部商品分类”的下拉菜单某一项如“酒店”上时，其级联菜单横向滑入显示。 任务一：制作导航条的下拉级联菜单 （2）当单击“酒店”的下拉级联菜单中的“豪华酒店”链接时，跳转到美淘网的hottopic.html页面的相应位置。 （3）如果仍然是detail.html页面，没有跳转到酒店主题页面，当光标从“酒店”菜单移出时，其级联菜单滑出隐藏。 任务一：制作导航条的下拉级联菜单 用TreeView实现美淘网“全部商品分类”的导航。 制作树形菜单，根节点是“全部商品分类”，子节点包括