경량 DOM 프레임워크인 JQuery는 JQuery를 사용하여 간단한 드롭다운 메뉴를 구현하는 방법을 보여줍니다.
1 먼저 Google의 스크립트 라이브러리를 인용합니다.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
2. 그런 다음 HTML을 작성합니다.
<div class="menu"> <span><a href="#">菜单一</a> </span><span><a href="#">菜单二</a> <div> <a href="#">子项一</a> <a href="#">子项二</a> <a href="#">子项三</a> </div> </span><span><a href="#">菜单三</a> <div> <a href="#">子项一</a> <a hef="#">子项二</a> <a href="#">子项三</a> </div> </span> </div>
3. 그런 다음 CSS를 정의합니다.
<style type="text/css"> .menu span { float: left; margin-right: 10px; position: relative; z-index: 100; } .menu a { text-decoration: none; display: block; } .menu span:hover div, .menu span div:hover { display: block; } .menu span div { border: 1px solid black; padding: 5px; background-color: white; display: none; position: absolute; white-space: nowrap; } </style>
4.hover(over, out)
호버 이벤트(마우스가 개체 위 또는 개체 밖으로 이동)를 시뮬레이션하는 메서드입니다. 이는 자주 사용되는 작업에 대해 "유지" 상태를 제공하는 사용자 정의 방법입니다.
<script type="text/javascript"> $(document).ready(function() { if ($.browser.msie && $.browser.version <= 6.0) { $(".menu span").hover( function() { $(this).children("div").attr("style", "display: block"); }, function() { $(this).children("div").attr("style", ""); }) } }); </script>
그럼 간단한 드롭다운 메뉴를 구현해 보세요.
더보기 JQuery로 간단한 드롭다운 메뉴를 구현하는 방법에 대한 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!