河南中医药大学：《Web前端开发》课程教学实验指导（2014）实验八：下拉菜单

《Web前端开发》实验指导/实验八:下拉菜单 《Web前端开发》实验指导 实验八:下拉菜单 、实验目的 1、掌握CSS动画、JS动画和 jQuery动画的基本原理和基本方法; 2、掌握下拉菜单制作的基本原理: 3、理解技术多样性的概念。 二、实验环境 1、 Windows XP/Windows7操作系统的计算机; 2、局域网网络环境,并且使用固定IP地址 3、支持互联网访问 4、 Adobe Cs6组件支持。 、实验要求 1、通过CSS、JS、 jQuery三种技术路线实现橫向和竖形导航菜单; 2、通过CSS、JS、 jQuery的任一种技术路线实现手机下拉菜单; 3、请对CSS、JS、 jQuery实现下拉菜单的各自原理进行分析。 四、实验原理 1、使用HTML5和CSS3进行网页布局的基本方法 2、CSS动画的基本原理和实现方法 3、 JavaScript操作DOM和CSS属性的基本方法; 4、 jQuery操作DOM和CSS属性的基本方法。 五、实验步骤 1、导航菜单 (1)使用CSS、JS、 jQuery技术实现页面导航的下拉菜单。 (2)三种技术实现的效果可以略有不同,但应基本满足要求。 (3)页面导航的下拉菜单的实现效果,可以参考【02实验案例8-1导航菜单】所示 CSS实现方法,参考代码: HIML部分: ttfe>导航菜单 <link href="Style/menu css"rel="stylesheettype="text/css"A 河南中医学院互联网应用技术研究所 本讲共计12页|当前第1页

《Web 前端开发》实验指导 / 实验八：下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 1 页 《Web 前端开发》实验指导： 实验八：下拉菜单 一、实验目的 1、掌握 CSS 动画、JS 动画和 jQuery 动画的基本原理和基本方法； 2、掌握下拉菜单制作的基本原理； 3、理解技术多样性的概念。 二、实验环境 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址； 3、支持互联网访问； 4、Adobe CS 6 组件支持。 三、实验要求 1、通过 CSS、JS、jQuery 三种技术路线实现横向和竖形导航菜单； 2、通过 CSS、JS、jQuery 的任一种技术路线实现手机下拉菜单； 3、请对 CSS、JS、jQuery 实现下拉菜单的各自原理进行分析。 四、实验原理 1、使用 HTML5 和 CSS3 进行网页布局的基本方法； 2、CSS 动画的基本原理和实现方法； 3、JavaScript 操作 DOM 和 CSS 属性的基本方法； 4、jQuery 操作 DOM 和 CSS 属性的基本方法。 五、实验步骤 1、导航菜单 （1）使用 CSS、JS、jQuery 技术实现页面导航的下拉菜单。 （2）三种技术实现的效果可以略有不同，但应基本满足要求。 （3）页面导航的下拉菜单的实现效果，可以参考【02.实验案例/8-1_导航菜单】所示。 CSS 实现方法，参考代码： HTML 部分： 导航菜单

《Web前端开发》实验指导/实验八:下拉菜单 ≮h2>案例8-1:导航菜单,使用CSS实现 i>网站首页 电视剧 新上映 明星 <>大陆剧 韩剧 ca href=#">TvB <>台剧 美剧 英剧 新加坡 <>电影 新上映 新收录 预告片 明星 华语 好莱坞 韩国 <>院线综艺 最新更新 最多播放 l>大陆 港台 >韩国 <>美国 专题音乐 新歌首播华语 欧美 热播 音乐牛人 河南中医学院互联网应用技术研究所 本讲共计12页|当前第2页

《Web 前端开发》实验指导 / 实验八：下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 2 页 案例 8-1：导航菜单，使用 CSS 实现 网站首页 电视剧 新上映 明星 大陆剧 韩剧 TVB 台剧 美剧 英剧 新加坡 电影 新上映 新收录 预告片 明星 华语 好莱坞 韩国 院线 综艺 最新更新 最多播放 大陆 港台 韩国 美国 专题 音乐 新歌首播 华语 欧美 日韩 热播 明星 音乐牛人

《Web前端开发》实验指导/实验八:下拉菜单 动漫 热播中 新收录 国产精品 日韩动漫 欧美动画 亲子益智 排行榜会员 CSS核心代码: av ul I list-style: none outside none font-family:"微软雅黑""黑体 font-size: 13px list-style: none outside none margin: 40px auto: text-shadow: 0-1px 3px #202020 I border radius * -moz-border-radius 4px webkit-border-radius 4px I box shadow * -moz-box-shadow: Opx 3px 3px #cecece background-image: -webkit-gradient(linear, left bottom, left top, color-stop(o, #787878), color-stop(0. 5, #5E5E5E), color-stop(051, #707070), color-stop ( background-image:-moz-linear-gradient(center bottom, #7878780%, #5E5E5E 50%,#70707051%,#838383100%) 河南中医学院互联网应用技术研究所 本讲共计12页|当前第3页

《Web 前端开发》实验指导 / 实验八：下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 3 页 动漫 热播中 新收录 国产精品 日韩动漫 欧美动画 亲子益智 排行榜 会员 CSS 核心代码： #nav,#nav ul { list-style: none outside none; margin: 0; padding: 0; } #nav { font-family:"微软雅黑","黑体"; font-size: 13px; height: 36px; list-style: none outside none; margin: 40px auto; text-shadow: 0 -1px 3px #202020; width: 980px; /* border radius */ -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; /* box shadow */ -moz-box-shadow: 0px 3px 3px #cecece; -webkit-box-shadow: 0px 3px 3px #cecece; box-shadow: 0 3px 4px #8b8b8b; /* gradient */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);

《Web前端开发》实验指导/实验八:下拉菜单 4 #nav ul position: absolute border-bottom: 1px solid #575757 border-left: 1px solid #929292 border-right: 1px solid #5d5d5d; display: block; eight: 34p position: relative width: 105px #nav li first-child I border-left: 0 none #nav lia color: #FFFFFF display: block line-height: 34px outline: medium none: text-align center text-decoration none #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1 #838383) background-image:-moz-linear-gradient(center bottom, #7878780%,#5E5E5E 50%,#70707051%,#838383100%) @-webkit-keyframes animation1 -webkit-transform: scale (1) 0%{ 100%{ -webkit-transform: scale (1) 河南中医学院互联网应用技术研究所 本讲共计12页|当前第4页

《Web 前端开发》实验指导 / 实验八：下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 4 页 background-color:#5f5f5f; } #nav ul { left: -9999px; position: absolute; top: -9999px; z-index: 2; } #nav li { border-bottom: 1px solid #575757; border-left: 1px solid #929292; border-right: 1px solid #5d5d5d; border-top: 1px solid #797979; display: block; float: left; height: 34px; position: relative; width: 105px; } #nav li:first-child { border-left: 0 none; margin-left: 5px; } #nav li a { color: #FFFFFF; display: block; line-height: 34px; outline: medium none; text-align: center; text-decoration: none; /* gradient */ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383)); background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%); background-color:#5f5f5f; } /* keyframes #animation1 */ @-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1);

b前端开发》实验指导/实验八:下拉菜单5 @-moz-keyframes animation1 I -moz-transform: scale(1) 30%{ -moz-transform: scale(1.3): 100%{ #nav li>a: hover /css3 animation * -moz-animation -name: animation 1 -moz-animation -duration: 0.7s moz-animation- timing function linear -moz-animation-iteration -count: infinite -moz-animation -direction normal -moz-animation-delay: 0: -moz-animation-play-state: running -moz-animation -fill-mode: forwards. -webkit-animation -name: animation 1 webkit -animation -duration: 0.7s webkit-animation-timing-function: linear; webkit-animation-iteration -count: infinite webkit-animation-direction: normal -webkit-animation-delay: 0 -webkit-animation-play -state: running #nav li: hover >at z-index: 4. #nav li: hover ul. subs eft: 0. top: 34px width: 150px #nav ul li( background: none repeat scroll 00 #838383 box-shadow: 5px5px 5px rgba(0, 0, 0, 0.5) opacity: 0 width: 100% I keyframes #animation @-webkit-keyframes animation 河南中医学院互联网应用技术研究所 本讲共计12页|当前第5页

《Web 前端开发》实验指导 / 实验八：下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 5 页 } } @-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } } #nav li > a:hover { /* css3 animation */ -moz-animation-name: animation1; -moz-animation-duration: 0.7s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.7s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #nav li:hover > a { z-index: 4; } #nav li:hover ul.subs { left: 0; top: 34px; width: 150px; } #nav ul li { background: none repeat scroll 0 0 #838383; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); opacity: 0; width: 100%; } /* keyframes #animation2 */ @-webkit-keyframes animation2 {

b前端开发》实验指导/实验A:下拉菜单6 margin-left: 185px 100%{ margin-left: Opx; @-moz-keyframes animation margin-left: 185px 100%{ #nav li: hover ul li -moz-animation -duration: 0.3 -moz-animation-timing- function: linear -moz-animation-iteration -count: 1 -moz-animation -direction normal -animation-delay: 0 -moz-animation-play-state: running -moz-animation -fill-mode: forwards -webkit-animation-name. animation -webkit-animation -duration:0.3s. -webkit-animation-timing- function linear webkit-animation-iteration-count: 1 -webkit-animation -direction: norma -webkit-animation-delay: 0 -webkit-animation-play-state: running webkit-animation -fill-mode: forwards /*-webkit-transition all 0. 3s ease-in-out; -moz-transition all 0.3s ease-in-out: -o-transition: all 0.3s ease-in-out -ms-transition all 0.3s ease-in-out. transition all 0. 3s ease-in-out * #nav li: hover ul li: nth-child(1)( - moz-animation-delay: 0 ebkit-animation-delay: 0 #nav li: hover ul li: nth-child(2)( -moz-animation-delay: 0.05s 河南中医学院互联网应用技术研究所 本讲共计12页|当前第6页

《Web 前端开发》实验指导 / 实验八：下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 6 页 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } } @-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } } #nav li:hover ul li { /* css3 animation */ -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; /*-webkit-transition:all 0.3s ease-in-out; -moz-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;*/ } /* animation delays */ #nav li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; } #nav li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s;

《Web前端开发》实验指导/实验八:下拉菜单 webkit-animation-delay: 0.05s; #nav li: hover ul li nth-child( 3)( kit-animation-delay: 0. 1s #nav li: hover ul li nth-child(4)( -moz-animation-delay: 0. 15s webkit-animation-delay: 0. 15s; #nav Ii: hover ul li nth- child(5)( -moz-animation-delay: 0.2s #nav li: hover ul li nth-child (6)( -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s #nav li hover ul li: nth-child(7)( -animation-delay: 0.3s webkit-animation-delay: 0.3 #nav li: hover ul li nth-child(8)( -moz-animation-delay: 0. 35s webkit-animation-delay: 0.35s: #nav li: hover ul li nth-child(9)( 04s; rebkit-animation-delay: 0. 4s jQuery实现方法,参考代码: JS代码部分: S(#nav>li").mouseenter(function t S(this).siblings(li"). find( subs").css(display","none") /S(ul. subs").find(""). mouseover(function(e) left: Opx") S(#nav>li"). mouseleave(function(e)i 河南中医学院互联网应用技术研究所 本讲共计12页|当前第7页

《Web 前端开发》实验指导 / 实验八：下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 7 页 -webkit-animation-delay: 0.05s; } #nav li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } #nav li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; } #nav li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } #nav li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; } #nav li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } #nav li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; } #nav li:hover ul li:nth-child(9) { -moz-animation-delay: 0.4s; -webkit-animation-delay: 0.4s; } jQuery 实现方法，参考代码： JS 代码部分： $(function(){ $("#nav>li").mouseenter(function() { $(this).siblings("li").find(".subs").css("display","none"); $(this).find(".subs").slideDown("fast").css("display","block"); /*$("ul.subs").find("li").mouseover(function(e){ $(this).animate({left:"10px"},300); return false; }); $("ul.subs").find("li").mouseout(function(e){ $(this).animate({left:"0px"}); return false; })*/ }); $("#nav>li").mouseleave(function(e) {

b前端开发》实验指导/实验八:下拉菜单8 S(this).find("subs").css(display","none") return false: ) 使用CSS、JS、 jQuery实现的具体案例,可参考实验素材的具体内容 2、坚导航菜单 (1)使用JS、 jQuery技术实现页面功能导航的下拉菜单, (2)两种技术实现的效果可以略有不同,但应基本满足要求 (3)页面导航的下拉菜单的实现效果,可以参考【02实验案例/8-2竖导航菜单】所示。 jQuery实现方法,参考代码 HIML部分 script type="text/javascript"src="js/jquery easing. 1.3. js"> Φh2>案例8-2:竖导航菜单,使用 jQuery实现 cli class="buon"> 电视剧 新上映明星大陆剧 韩剧 sa href=#">TVB 台剧 美剧 英剧 新加坡 河南中医学院互联网应用技术研究所 本讲共计12页|当前第8页

《Web 前端开发》实验指导 / 实验八：下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 8 页 $(this).find(".subs").css("display","none"); return false; }); }) 使用 CSS、JS、jQuery 实现的具体案例，可参考实验素材的具体内容。 2、竖导航菜单 （1）使用 JS、jQuery 技术实现页面功能导航的下拉菜单。 （2）两种技术实现的效果可以略有不同，但应基本满足要求。 （3）页面导航的下拉菜单的实现效果，可以参考【02.实验案例/8-2_竖导航菜单】所示。 jQuery 实现方法，参考代码： HTML 部分： 竖导航菜单 案例 8-2：竖导航菜单，使用 jQuery 实现 电视剧 新上映 明星 大陆剧 韩剧 TVB 台剧 美剧 英剧 新加坡

《Web前端开发》实验指导/实验八:下拉菜单 9 FE R <>新上映 <>新收录 预告片 明星 华语 好莱坞 韩国 >院线 综艺娛乐 最新更新 最多播放 <>大陆 i>港台 >韩国 |>美国 H 新歌首播华语 欧美 日韩 热播 河南中医学院互联网应用技术研究所 本讲共计12页|当前第9页

《Web 前端开发》实验指导 / 实验八：下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 9 页 电 影 新上映 新收录 预告片 明星 华语 好莱坞 韩国 院线 综艺娱乐 最新更新 最多播放 大陆 港台 韩国 美国 专题 音乐 新歌首播 华语 欧美 日韩 热播

b前端开发》实验指导/实验八:下拉菜单10 明星 音乐牛人 JS代码部分: S(document). ready(function( I This code is executed after the doM has been completely loaded " Changing thedefault easing effect-will affect the slideUp/slide Down methods: * /* Binding a click event handler to the links: * S(li button a',). click(function(e) Finding the drop down list that corresponds to the current section: * var dropDown S(this). parent(). next(; Closing all other drop down sections, except the current one * S dropdown,) not(dropDown).slideUp (slow) drop Down slide Toggle(slow) Preventing the default event(which would be to navigate the browser to the link,'s address)* e. preventDefaultO ) 要求 请通过CSS、Js、 jQuery三种技术方式实现上述两个代码 请分析CSS、Js、 jQuery在上述案例的实现上,各自的优势和不足。 请介绍使用 CSS, JS、 jQuery在实现上述案例上的各自原理和方法 并请将分析结果填写到实验报告册中。 六、自主实验步骤 1、移动开发中的下拉菜单 (1)通过CSS或 jQuery技术实现面向移动终端的页面的下拉菜单。 河南中医学院互联网应用技术研究所 本讲共计12页|当前第10页

《Web 前端开发》实验指导 / 实验八：下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 10 页 明星 音乐牛人 JS 代码部分： $(document).ready(function(){ /* This code is executed after the DOM has been completely loaded */ /* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */ $.easing.def = "easeOutBounce"; /* Binding a click event handler to the links: */ $('li.button a').click(function(e){ /* Finding the drop down list that corresponds to the current section: */ var dropDown = $(this).parent().next(); /* Closing all other drop down sections, except the current one */ $('.dropdown').not(dropDown).slideUp('slow'); dropDown.slideToggle('slow'); /* Preventing the default event (which would be to navigate the browser to the link's address) */ e.preventDefault(); }) }); 要求： 请通过 CSS、JS、jQuery 三种技术方式实现上述两个代码。 请分析 CSS、JS、jQuery 在上述案例的实现上，各自的优势和不足。 请介绍使用 CSS、JS、jQuery 在实现上述案例上的各自原理和方法。 并请将分析结果填写到实验报告册中。 六、自主实验步骤 1、移动开发中的下拉菜单 （1）通过 CSS 或 jQuery 技术实现面向移动终端的页面的下拉菜单