《实践第十一章实践》由会员分享，可在线阅读，更多相关《实践第十一章实践（21页珍藏版）》请在金锄头文库上搜索。
1、实践十一 页面导航,实践目标,制作导航条的下拉级联菜单 用TreeView实现页面导航,制作美淘网页面导航条中“全部商品分类”的下拉菜单“酒店”的级联菜单。 （1）用户把光标移入到“全部商品分类”的下拉菜单“酒店”时，其级联级菜单横向滑入显示。,任务一：制作导航条的下拉级联菜单,（2）当单击“酒店”的下拉级联菜单中的“豪华酒店”链接时，跳转到美淘网的hottopic.html页面的相应位置。 （3）如果仍然是index.html页面，没有跳转到酒店主题页面，当光标从“酒店”菜单移出时，其级联菜单滑出隐藏。,任务一：制作导航条的下拉级联菜单,（1）修改首页index.html，在“酒店”的标签中
2、嵌套，添加下拉级联菜单即三级菜单。 （2）添加样式规则，如下拉级联菜单的定位方式、显示方式、文字大小和行高等。 （3）在文档加载完成事件中，给“全部商品分类”的下拉菜单的鼠标移入、移出事件绑定方法，实现下拉级联菜单的滑入、滑出动画效果。,任务一：制作导航条的下拉级联菜单,任务一：制作导航条的下拉级联菜单,修改index.html页面，需要增加的代码如下： 酒店 豪华酒店 公寓酒店 度假首选 经济有爱 客栈情怀 ,任务一：制作导航条的下拉级联菜单,增加样式规则，如下所示： /*二级菜单*/ #nav ul li ul li float: none; position:relative; /*定位
3、三级菜单位置的参考点*/ #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; ,任务一：制作导航条的下拉级联菜单,在文档加载完成事件中，给“全部商品分类”的下级菜单的鼠标移入、移出事件绑定方法，代码如下：
4、 $(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 () /鼠标
5、移出二级菜单项，对应的三级级菜单滑出 $(this).children(ul).stop().slideUp(fast); ); ); ,制作美淘网详情页面detail.html导航条中“全部商品分类”的下拉菜单“酒店”的级联菜单。 （1）用户把光标移入到“全部商品分类”的下拉菜单某一项如“酒店”上时，其级联菜单横向滑入显示。,任务一：制作导航条的下拉级联菜单,（2）当单击“酒店”的下拉级联菜单中的“豪华酒店”链接时，跳转到美淘网的hottopic.html页面的相应位置。 （3）如果仍然是detail.html页面，没有跳转到酒店主题页面，当光标从“酒店”菜单移出时，其级联菜单滑出隐藏。,任
6、务一：制作导航条的下拉级联菜单,用TreeView实现美淘网“全部商品分类”的导航。 制作树形菜单，根节点是“全部商品分类”，子节点包括“美食”、“旅游”和“酒店”等，其中“酒店”的子节点包括“豪华酒店”、“公寓酒店”等。页面加载完毕后，效果如下图：,任务二：用TreeView实现页面导航,（1）新建html页面，要求使用div-ul-li搭建树形结构。,任务二：用TreeView实现页面导航, 全部商品分类 美食 豪华酒店 . ,任务二：用TreeView实现页面导航,（2）添加样式规则，用css美化后的效果如下图：,（3）在html文件中导入jQuery框架后，添加脚本代码。创建initT
7、ree()函数，实现动态添加节点图标的功能。在函数体中，使用find()方法获取li标签；使用addClass()、removeClass()和css()方法设置新建的标签的背景样式；使用prependTo()方法将span标签前置插入到li中。,任务二：用TreeView实现页面导航,function initTree() var $menu=$(“div#menuul“).find(“li:has(ul:not(:empty)“);/获取嵌套了ul的li标签 $menu.each(function() /添加”+“图标 var $spanMenuIcon=$(“); $spanMenuIc
8、on.addClass(“bgplus“).removeClass(“bgminus“); $spanMenuIcon.prependTo($(this); /将span标签前置插入到li中 ); / alert($menu.length); var $noMenu=$(“div#menuul“).find(“li:not(li:has(ul)“); $noMenu.each(function() $spanMenuIcon=$(“); $spanMenuIcon.css(“background-image“:“url(images/page.png)“); $spanMenuIcon.pre
9、pendTo($(this); ); ,(4)在页面加载完毕事件中，调用initTree()方法。脚本代码如下：,任务二：用TreeView实现页面导航,$(function() initTree(); );,（1）用TreeView实现美淘网中“全部商品分类”的导航。TreeView的节点内容请参考任务二的指导部分。页面加载完毕后，初始效果如下图所示：TreeView处于折叠的状态；节点前的图标 ，表示有下层子节点。,任务二：用TreeView实现页面导航,（2）单击父节点左边的图标 ，以滑入的效果展开子节点 。如单击“全部商品分类”节点，效果如下图：,任务二：用TreeView实现页面导航
10、,展开TreeView中所有子节点，效果如下图：,任务二：用TreeView实现页面导航,（1）新建html页面，用的块状结构组织TreeView的内容，子节点是通过在中嵌套来实现的。html代码请参考任务二的指导部分。 （2）设置一些元素的样式，如div、a、ul和li，重点是使下层子节点隐藏。在指导部分的css参考代码的基础上添加如下样式规则：,任务二：用TreeView实现页面导航,/*隐藏子节点*/ #menu ul li ul display:none; ,（3）脚本代码的框架如下所示：,function initTree() var $menu = $(“div#menuul“).
11、find(“li:has(ul:not(:empty)“);/获取嵌套了ul的li标签 $menu.each(function () var $spanMenuIcon = $(“); $spanMenuIcon.addClass(“bgplus“).removeClass(“bgminus“); var $subMenuUl = $(this).find(“ul“).eq(0); /获取下层子节点 /绑定标签单击事件方法实现下级菜单的滑入和滑出 $spanMenuIcon.click(function () ); ); var $noMenu = $(“div#menuul“).find(“li:not(li:has(ul)“); $noMenu.each(function () $spanMenuIcon = $(“); $spanMenuIcon.css( “background-image“: “url(images/page.png)“ ); ); ,任务二：用TreeView实现页面导航,End,谢谢观看,
