드롭다운 메뉴 구현은 매우 간단하고 순수 CSS로도 구현할 수 있지만 jquery를 사용하려면 두 줄의 코드만 필요하므로 jquery CSS를 사용합니다. 간단한 보조 드롭다운 메뉴 탐색을 구현합니다. 구체적인 내용은 다음과 같습니다.
작업 렌더링:
구체 코드:
1단계: 탐색의 HTML 형식 결정
<ul id="nav"> <li><a href="#">首页</a> <ul> <li><a href="#">PHP编程</a></li> <li><a href="#">JAVA编程</a></li> <li><a href="#">RGB对照表</a></li> <li><a href="#">颜色搭配技巧</a></li> </ul> </li> <li><a href="#">栏目一</a> <ul> <li><a href="#">PHP编程</a></li> <li><a href="#">JAVA编程</a></li> <li><a href="#">RGB对照表</a></li> <li><a href="#">颜色搭配技巧</a></li> </ul> </li> <ul>
2단계: 탐색 효과를 구현하는 CSS
#nav { line-height: 24px; list-style-type: none; background:#666; } #nav a { display: block; width: 100px; text-align:center; } #nav a:link { color:#666; text-decoration:none; } #nav a:visited { color:#666;text-decoration:none; } #nav a:hover { color:#FFF;text-decoration:none;font-weight:bold; } #nav li { float: left; width: 100px; background:#CCC; } #nav li a:hover{ background:#999; } #nav li ul { line-height: 27px; list-style-type: none;text-align:left; width: 180px; position: absolute;display: none; } #nav li ul li{ float: left; width: 180px; background: #F6F6F6; } #nav li ul a{ display: block; width: 156px;text-align:left;padding-left:24px; } #nav li ul a:link { color:#666; text-decoration:none; } #nav li ul a:visited { color:#666;text-decoration:none; } #nav li ul a:hover { color:#F3F3F3;text-decoration:none;font-weight:normal; }
3단계: JQuery에서 드롭다운 숨김 효과 구현
$(function() { $("#nav li").hover( function() { $(this).find("ul").show(100); }, function() { $(this).find("ul").hide(300); } ); });
이 기사가 JavaScript 프로그래밍을 배우고 jquery를 통해 보조 탐색 드롭다운 메뉴 효과를 얻는 방법을 가르치는 데 도움이 되기를 바랍니다.