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部分 <doctype html> <meta charset="utf-8"> <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 <header> Φh2>案例8-2:竖导航菜单,使用 jQuery实现</h2> <div id="main"> <ul class="container"> cli class="buon"> <a href="#" class=" green">电视剧<a></> <ul> <i>< a href="#">新上映<a></i |>< a href="#">明星</a></i <>< a href="#">大陆剧<a></> <i><ahef="#>韩剧</a></i> <li>sa href=#">TVB</a></li> <i>< a href="#">台剧</a></> <|>< a href="#">美剧</a></li> <i><ahef="#>英剧</a></i> <i><ahef="#>新加坡</a></li> 河南中医学院互联网应用技术研究所 本讲共计12页|当前第8页《Web 前端开发》实验指导 / 实验八:下拉菜单 河南中医学院互联网应用技术研究所 本讲共计 12 页 | 当前第 8 页 $(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"> <ul> <li class="button"><a href="#" class="green">电视剧</a></li> <li class="dropdown"> <ul> <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>