《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部分: <IDOCTYPE html> <meta charset=utf-8"> ttfe>导航菜单<,ite> <link href="Style/layout css"rel="stylesheet" type="text/css"/> <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 部分： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>导航菜单</title> <link href="Style/layout.css" rel="stylesheet" type="text/css" /> <link href="Style/menu.css" rel="stylesheet" type="text/css" /> </head> <body>
《Web前端开发》实验指导/实验八:下拉菜单 <header> ≮h2>案例8-1:导航菜单,使用CSS实现</h2> i>< a href="#">网站首页</a></> <i>< a class=" subs"hef="#>电视剧</a> <ul class="subs"> <i>< a href="#">新上映</a></i> <i><ahef="#">明星</a></i> <>< a href="#”>大陆剧</a></li> <i>< a href="#>韩剧</a></> <li>ca href=#">TvB</a></li> <>< a href="#">台剧</a></> <i>< a href="#">美剧</a><l> <i>< a href="#>英剧</a></i> <i>< a href="#>新加坡</a></li> <>< a class=" subs"href="#>电影</a> <ul class="subs"> <i>< a href="#">新上映</a></li> <|>< a href="#">新收录</a></> <|>< a href="#">预告片</a></> <i><ahef="#">明星</a></i> <i>< a href="#>华语</a></i> <i>< a href="#">好莱坞</a></i> <|>< a href="#”>韩国</a></i> <>< a href="#">院线</a></ ii>< a class=" subs"href="#">综艺</a> <ul class="subs"> <|>< a href="#”>最新更新</a><li> <i>< a href="#">最多播放</a><№i> l>< a href="#>大陆</a></i> <i>< a href="#>港台</a></> >< a href="#>韩国</a></i> <>< a href="#">美国</a><l> <i>< a href="#>专题</a></i i>< a href="#">音乐</a> <i>< a href="#">新歌首播</a><li <>< a href="#>华语</a></i> <i>< a href="#">欧美</a><l> <i>< a href="#>热播</a></i> <i>< a href="#">音乐牛人</a><№i> 河南中医学院互联网应用技术研究所 本讲共计12页|当前第2页
《Web 前端开发》实验指导 / 实验八：下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 2 页 <header> <h2>案例 8-1：导航菜单，使用 CSS 实现</h2> </header> <ul id="nav"> <li><a href="#">网站首页</a></li> <li><a class="hsubs" href="#">电视剧</a> <ul class="subs"> <li><a href="#">新上映</a></li> <li><a href="#">明星</a></li> <li><a href="#">大陆剧</a></li> <li><a href="#">韩剧</a></li> <li><a href="#">TVB</a></li> <li><a href="#">台剧</a></li> <li><a href="#">美剧</a></li> <li><a href="#">英剧</a></li> <li><a href="#">新加坡</a></li> </ul> </li> <li><a class="hsubs" href="#">电影</a> <ul class="subs"> <li><a href="#">新上映</a></li> <li><a href="#">新收录</a></li> <li><a href="#">预告片</a></li> <li><a href="#">明星</a></li> <li><a href="#">华语</a></li> <li><a href="#">好莱坞</a></li> <li><a href="#">韩国</a></li> <li><a href="#">院线</a></li> </ul> </li> <li><a class="hsubs" href="#">综艺</a> <ul class="subs"> <li><a href="#">最新更新</a></li> <li><a href="#">最多播放</a></li> <li><a href="#">大陆</a></li> <li><a href="#">港台</a></li> <li><a href="#">韩国</a></li> <li><a href="#">美国</a></li> <li><a href="#">专题</a></li> </ul> </li> <li><a href="#">音乐</a> <ul class="subs"> <li><a href="#">新歌首播</a></li> <li><a href="#">华语</a></li> <li><a href="#">欧美</a></li> <li><a href="#">日韩</a></li> <li><a href="#">热播</a></li> <li><a href="#">明星</a></li> <li><a href="#">音乐牛人</a></li>
《Web前端开发》实验指导/实验八:下拉菜单 <li><a h ">动漫</a <ul class="subs"> <i>< a href="#">热播中</a></> <i>< a href="#>新收录</a></li> <|>< a href="#”>国产精品</a><l> <|>< a href="#”>日韩动漫</a></i> <i>< a href="#">欧美动画<a></> <l>< a href="#">亲子益智</a><l> </u> <i>< a href="#>排行榜</a><li >< a href="#>会员</a></li> 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 页 </ul> </li> <li><a href="#">动漫</a> <ul class="subs"> <li><a href="#">热播中</a></li> <li><a href="#">新收录</a></li> <li><a href="#">国产精品</a></li> <li><a href="#">日韩动漫</a></li> <li><a href="#">欧美动画</a></li> <li><a href="#">亲子益智</a></li> </ul> </li> <li><a href="#">排行榜</a></li> <li><a href="#">会员</a></li> </ul> </body> </html> 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 {