JQuery는 간단한 드롭다운 메뉴를 구현합니다.

경량 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 중국어 웹사이트를 주목하세요!