JavaScript는 드롭다운 menu_javascript 기술의 표시 및 숨기기를 구현합니다.
- WBOY원래의
- 2016-05-16 15:21:511517검색
이 기사에서는 JavaScript 스크립트를 사용하여 드롭다운 메뉴를 표시하고 숨깁니다. JavaScript 메소드를 사용하여 구현하는 데 필요한 지식은 다음과 같습니다.
1) JS 이벤트: onmouseover 마우스 통과 이벤트 및 onmouseout 마우스 떠나기 이벤트.
2) JS 기본 구문: function 키워드를 사용하여 함수를 정의합니다.
3) DOM 프로그래밍: getElementsByTagName() 메소드.
다음 단계는 생산 과정입니다.
1) 보조 메뉴 숨기기: 보조 메뉴를 숨기도록 CSS 스타일을 설정합니다.
2) 하위 메뉴를 표시하는 showsub() 함수를 작성합니다. getElementsByTagName을 사용하여 보조 메뉴 항목을 가져오고 style.display를 통해 보조 메뉴 표시를 설정합니다.
3) 숨겨진 하위 메뉴의 hidesub() 함수를 작성합니다. getElementsByTagName을 사용하여 보조 메뉴 항목을 얻습니다. style.display를 통해 보조 메뉴가 숨겨지도록 설정합니다.
4) 마우스 이벤트 추가: 2차 메뉴로 1차 메뉴에 마우스 이벤트를 추가하고, showsub()/hidesub() 함수를 호출하여 마우스 통과 시 2차 메뉴 표시 및 숨기기 구현 1층 메뉴.
5) 최소 5개의 브라우저에서 브라우저 호환성 테스트를 수행합니다. IE7,8,9, Firefox, Google, 2345 브라우저 등
렌더링:
HTML 코드:
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>下拉菜单</title> <!--引入的外部CSS样式文件--> <link rel="stylesheet" type="text/css" href="style.css" /> <!--引入的外部JS脚本文件--> <script type="text/javascript" src="script.js"></script> </head> <body> <div id="nav" class="nav"> <ul> <li><a href="#">网站首页</a></li> <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">课程大厅</a> <ul> <li><a href="#">JavaScript</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Ajax</a></li> </ul> </li> <li onmouseover="showsub(this)" onmouseout="hidesub(this)"><a href="#">学习中心</a> <ul> <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> </div> </body> </html> </span>
외부 CSS 스타일 시트 style.css 파일 코드:
<span style="font-size:18px;">/*CSS全局设置*/
*{
margin:0;
padding:0;
}
.nav{
background-color:#EEEEEE;
height:40px;
width:450px;
margin:0 auto;
}
ul{
list-style:none;
}
ul li{
float:left;
line-height:40px;
text-align:center;
}
a{
text-decoration:none;
color:#000000;
display:block;
width:90px;
height:40px;
}
a:hover{
background-color:#666666;
color:#FFFFFF;
}
ul li ul li{
float:none;
background-color:#EEEEEE;
}
ul li ul{
display:none;
}
/*为了兼容IE7设置的CSS样式，但是又必须写在a:hover前面*/
ul li ul li a:link,ul li ul li a:visited{
background-color:#EEEEEE;
}
ul li ul li a:hover{
background-color:#009933;
}
</span>
외부 JS 스크립트 script.js 파일 코드:
<span style="font-size:18px;">function showsub(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidesub(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}</span>
위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되고 드롭다운 메뉴 효과를 얻으실 수 있기를 바랍니다.