> php教程 > PHP开发 > 본문

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

高洛峰
풀어 주다: 2016-12-15 15:57:54
원래의
1524명이 탐색했습니다.

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿