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> 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 1 页
<header> <h2> 案例 8-1: 导航菜单, 使用 CSS 实现 </h2> </header> <ul id="nav"> <li><a href="#"> 网站首页 </a> <li><a class="hsubs" href="#"> 电视剧 </a> <ul class="subs"> <li><a href="#"> 新上映 </a> <li><a href="#"> 明星 </a> <li><a href="#"> 大陆剧 </a> <li><a href="#"> 韩剧 </a> <li><a href="#">tvb</a> <li><a href="#"> 台剧 </a> <li><a href="#"> 美剧 </a> <li><a href="#"> 英剧 </a> <li><a href="#"> 新加坡 </a> <li><a class="hsubs" href="#"> 电影 </a> <ul class="subs"> <li><a href="#"> 新上映 </a> <li><a href="#"> 新收录 </a> <li><a href="#"> 预告片 </a> <li><a href="#"> 明星 </a> <li><a href="#"> 华语 </a> <li><a href="#"> 好莱坞 </a> <li><a href="#"> 韩国 </a> <li><a href="#"> 院线 </a> <li><a class="hsubs" href="#"> 综艺 </a> <ul class="subs"> <li><a href="#"> 最新更新 </a> <li><a href="#"> 最多播放 </a> <li><a href="#"> 大陆 </a> <li><a href="#"> 港台 </a> <li><a href="#"> 韩国 </a> <li><a href="#"> 美国 </a> <li><a href="#"> 专题 </a> <li><a href="#"> 音乐 </a> <ul class="subs"> <li><a href="#"> 新歌首播 </a> <li><a href="#"> 华语 </a> <li><a href="#"> 欧美 </a> <li><a href="#"> 日韩 </a> <li><a href="#"> 热播 </a> <li><a href="#"> 明星 </a> <li><a href="#"> 音乐牛人 </a> 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 2 页
<li><a href="#"> 动漫 </a> <ul class="subs"> <li><a href="#"> 热播中 </a> <li><a href="#"> 新收录 </a> <li><a href="#"> 国产精品 </a> <li><a href="#"> 日韩动漫 </a> <li><a href="#"> 欧美动画 </a> <li><a href="#"> 亲子益智 </a> <li><a href="#"> 排行榜 </a> <li><a href="#"> 会员 </a> </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%); 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 3 页
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% { 30% { 100% { -webkit-transform: scale(1); -webkit-transform: scale(1.3); -webkit-transform: scale(1); 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 4 页
@-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 { 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 5 页
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; 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 6 页
-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 代码部分 : <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(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) { 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 7 页
$(this).find(".subs").css("display","none"); return false; ); ) </script> 使用 CSS JS jquery 实现的具体案例, 可参考实验素材的具体内容 2 竖导航菜单 (1) 使用 JS jquery 技术实现页面功能导航的下拉菜单 (2) 两种技术实现的效果可以略有不同, 但应基本满足要求 (3) 页面导航的下拉菜单的实现效果, 可以参考 02. 实验案例 /8-2_ 竖导航菜单 所示 jquery 实现方法, 参考代码 : HTML 部分 : <!doctype html> <html> <head> <meta charset="utf-8"> <title> 竖导航菜单 </title> <link rel="stylesheet" type="text/css" href="style/8-2-jquery.css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/8-2-jquery.js"></script> </head> <body> <header> <h2> 案例 8-2: 竖导航菜单, 使用 jquery 实现 </h2> </header> <div id="main"> <ul class="container"> <li class="menu"> <li class="button"><a href="#" class="green"> 电视剧 </a> <li class="dropdown"> <li><a href="#"> 新上映 </a> <li><a href="#"> 明星 </a> <li><a href="#"> 大陆剧 </a> <li><a href="#"> 韩剧 </a> <li><a href="#">tvb</a> <li><a href="#"> 台剧 </a> <li><a href="#"> 美剧 </a> <li><a href="#"> 英剧 </a> <li><a href="#"> 新加坡 </a> 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 8 页
<li class="menu"> <li class="button"><a href="#" class="orange"> 电影 </a> <li class="dropdown"> <li><a href="#"> 新上映 </a> <li><a href="#"> 新收录 </a> <li><a href="#"> 预告片 </a> <li><a href="#"> 明星 </a> <li><a href="#"> 华语 </a> <li><a href="#"> 好莱坞 </a> <li><a href="#"> 韩国 </a> <li><a href="#"> 院线 </a> <li class="menu"> <li class="button"><a href="#" class="blue"> 综艺娱乐 </a> <li class="dropdown"> <li><a href="#"> 最新更新 </a> <li><a href="#"> 最多播放 </a> <li><a href="#"> 大陆 </a> <li><a href="#"> 港台 </a> <li><a href="#"> 韩国 </a> <li><a href="#"> 美国 </a> <li><a href="#"> 专题 </a> <li class="menu"> <li class="button"><a href="#" class="red"> 音乐 </a> <li class="dropdown"> <li><a href="#"> 新歌首播 </a> <li><a href="#"> 华语 </a> <li><a href="#"> 欧美 </a> <li><a href="#"> 日韩 </a> <li><a href="#"> 热播 </a> 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 9 页
<li><a href="#"> 明星 </a> <li><a href="#"> 音乐牛人 </a> </div> </body> </html> 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 技术实现面向移动终端的页面的下拉菜单 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 10 页
(2) 具体的实现效果, 可以参考 02. 实验案例 /8-3_ 手机导航 的效果所示 具体如下图 8-1 所示 图 8-1 智能手机访问页面的下拉菜单效果 要求 : 请通过 CSS 或 jquery Mobile 实现上述效果, 并将结果填写到实验报告册中 2 通过下来菜单进行产品类别导航 (1) 请参考 02. 实验案例 /8-4_ 产品与服务导航 的效果开发页面, 效果如图 8-2 所示 (2) 在实现方法上可以使用 CSS JS jquery 的任一种 图 8-2 鼠标指向 个人及家庭用户 的效果 要求 : 请实现上述效果, 并将结果填写到实验报告册中 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 11 页
七 思考及问答 1 关于页面导航 (1) 页面导航的主要功能是什么? (2) 常见的页面导航的表现形式有哪些? (3) 如何设计一个好的页面导航? 2 JS 和 jquery 的对比 (1) 使用 JS 和借助 jquery 均可实现某一功能时, 其实现的方法和原理是否相同? (2)JS 和 jquery 在现实同一效果时, 其效率是否相同? 那种方式的效率更高? 河南中医学院互联网应用技术研究所本讲共计 12 页 当前第 12 页