CSS 드롭다운 상자 효과_HTML5 중국

이런 효과를 만드는 게 꽤 번거롭지만, 코드를 이해하는 것은 어렵지 않습니다. 먼저 HTML 코드를 살펴보겠습니다.

<p class="container">
    <p class="heading">
        <h2>Custom Select</h2>
    </p>

    <p class="select">
        <p>Please select</p>
        <ul>
            <li data-value="HTML5">HTML5</li>
            <li data-value="CSS3">CSS3</li>
            <li data-value="JavaScript">JavaScript</li>
            <li data-value="JQuery">JQuery</li>
            <li data-value="Backbone">Backbone</li>
        </ul>
    </p>
</p>

기본 선택 요소를 사용하지 않고 다른 요소를 사용하여 이 효과를 시뮬레이션하는 것을 볼 수 있습니다. li 요소에 대해 data-value를 지정했는데, 그 이유는 주로 JQuery를 사용하여 선택한 값을 가져와서 p 요소 아래에 배치하기 때문입니다.

CSS 코드를 단계별로 살펴보겠습니다.

   * {
        margin: 0;
        padding: 0;
    }

    html {
        font-family: 'Terminal';
        font-size: 62.5%;
    }

    body {
        background-color: #33CC66;
    }

1. 웹 페이지의 모든 요소의 여백과 패딩을 0으로 설정합니다.

2. 웹 페이지의 기본 글꼴을 터미널로 설정하고 글꼴 크기를 62.5%(10px)로 설정합니다.

3. 배경색을 #33CC66으로 설정하세요.

 <link href=&#39;http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>

위에서는 Terminal 글꼴을 사용했고 다음에도 Lobster 글꼴을 사용할 예정이므로 이 코드 줄을 사용하여 참조를 추가하세요.

   .heading, .select {
        display: block;
        width: 22rem;
        margin: 0 auto;
        text-align: center;
    }

    .heading {
        width: 28rem;
        margin-top: 10rem;
        margin-bottom: 2rem;
    }

    .heading h2 {
        font-size: 6rem;
        font-family: 'Lobster';
        color: #ffffff;
    }

1. headng를 지정하고 너비를 선택한 다음 가로 중심을 지정합니다.

2. 주로 선택 항목보다 더 넓게 만들고 더 아름답게 보이도록 제목 너비를 수정합니다. 그런 다음 위쪽 및 아래쪽 여백을 지정합니다.

3. 제목 아래 h2 요소의 글꼴, 글꼴 크기, 색상을 설정합니다.

.select > p, .select ul {
        background-color: #ffffff;
        font-size: 2rem;
        border: 1px solid bisque;
        border-radius: 5px;
        margin-bottom: 0;
    }

.select > p {
        text-align: left;
        padding: 1rem;
        position: relative;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        cursor: pointer;
        color: rgba(102, 102, 102, .6);
    }
.select > p:after {
        display: block;
        width: 10px;
        height: 10px;
        content: '';
        position: absolute;
        top: 1.4rem;
        right: 2rem;
        border-bottom: 1px solid #33CC66;
        border-left: 1px solid #33CC66;
        transform: rotate(-45deg);
        transition: transform .3s ease-out, top .2s ease-out;
    }

1. p 및 ul 요소의 배경색과 테두리를 설정합니다.

2. p 요소에 스타일을 별도로 지정하고 위치 속성을 설정하는데 주로 오른쪽 아래에 드롭다운 버튼을 그립니다.

3. :after를 사용하여 p 요소의 오른쪽에 드롭다운 버튼을 그립니다. 왼쪽 하단 테두리를 사용하는 것을 볼 수 있습니다. 이 효과를 시뮬레이션하려면 -45도 회전하세요. 우리가해야한다는 점은 주목할 가치가 있습니다. 디스플레이를 블록으로 설정하고 너비와 높이를 설정하세요. 그렇지 않으면 이 효과가 표시되지 않습니다.

.select ul {
        margin-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        list-style-type: none;
        cursor: pointer;
        overflow-y: auto;
        max-height: 0;
        transition: max-height .3s ease-out;
    }

    .select ul li {
        padding-left: 0.5rem;
        display: block;
        line-height: 3rem;
        text-align: left;
    }

1. 이때 ul의 일부 기본 속성을 설정하고, 최대 너비를 0으로 설정하고, Overflow-y를 auto로 지정합니다. ul은 숨겨집니다.

2. 여기서 설정할 때 문제가 발생했습니다. 즉, li 태그가 항상 ul로 가득 차 있지 않은 줄을 차지하기 때문입니다. 기본적으로 여백과 패딩. 이므로 웹 페이지의 모든 요소의 여백과 패딩은 처음에 0으로 설정됩니다.

    .select.open ul {
        max-height: 20rem;
        transform-origin: 50% 0;
        -webkit-animation: slide-down .5s ease-in;
    }

    .select.open > p:after {
        position: absolute;
        top: 1.6rem;
        transform: rotate(-225deg);
        transition: transform .3s ease-in, top .2s ease-in;
    }

1. 최대 열기 높이를 설정하고 애니메이션 효과를 할당하세요.

2. 드롭다운 버튼을 -225도 회전하여 애니메이션을 적용합니다.

다음으로 이 드롭다운 효과의 핵심이기도 한 ul 요소에 지정된 슬라이드다운 애니메이션 효과를 살펴보겠습니다.

   @-webkit-keyframes slide-down {
        0% {
            transform: scale(1, 0);
        }
        25% {
            transform: scale(1, 1.25);
        }
        50% {
            transform: scale(1, 0.75);
        }
        75% {
            transform: scale(1, 1.1);
        }
        100% {
            transform: scale(1, 1);
        }
    }

위의 코드를 보면 ul의 크기를 지속적으로 변경하고 0.75~1.25 사이에서 크기를 조정하는 것이므로 점프 효과가 있다는 것을 이해할 수 있습니다. .

아래 간단한 CSS 코드가 있으니 더 이상 설명하지 않겠습니다.

   .select ul li:hover {
        background-color: rgba(102, 153, 102, 0.4);
    }

    .select .selected {
        background-color: rgba(102, 153, 102, 0.8);
    }

이제 CSS에 대한 이야기를 마쳤으니 JQuery를 사용하여 이 효과를 제어하는 ​​방법을 살펴보겠습니다.

제가 사용하는 BootCDN과 같은 많은 웹사이트가 이미 CDN 서비스를 제공하고 있기 때문에 JQuery를 다운로드하여 사용할 필요가 없습니다.

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

　이제 JQuery를 사용할 수 있습니다.

<script>
    $(document).ready(function () {
        $(&#39;.select ul li&#39;).on("click", function (e) {
            var _this = $(this);
            $(&#39;.select >p&#39;).text(_this.attr(&#39;data-value&#39;));
            $(_this).addClass(&#39;selected&#39;).siblings().removeClass(&#39;selected&#39;);
            $(&#39;.select&#39;).toggleClass(&#39;open&#39;);
            cancelBubble(e);
        });

        $(&#39;.select>p&#39;).on("click", function (e) {
            $(&#39;.select&#39;).toggleClass(&#39;open&#39;);
            cancelBubble(e);
        });

        $(document).on(&#39;click&#39;, function () {
            $(&#39;.select&#39;).removeClass(&#39;open&#39;);
        })
    })

    function cancelBubble(event) {
        if (event.stopPropagation) {
            event.preventDefault();
            event.stopPropagation();
        } else {
            event.returnValue = false;
            event.cancelBubble();
        }
    }
</script>

• 먼저 클릭 이벤트를 p 태그에 바인딩합니다. 트리거되면 선택을 위한 공개 클래스, 즉 표시 ul을 추가하거나 제거합니다.

• li에 대한 클릭 이벤트를 바인딩합니다. li 요소가 선택되면 먼저 데이터 값을 가져온 다음 이를 p 태그에 할당하고 추가합니다. 선택한 리에 선택된 클래스와 동시에 siblings() 메소드를 사용하여 형제 노드의 선택된 클래스를 제거합니다.

• 웹 페이지의 아무 곳이나 클릭하면 ul이 열려 있으면 문서가 닫힙니다. 따라서 이벤트가 버블링되는 것을 방지하고 우리가 직접 작성한 cancelBubble() 메서드를 호출해야 합니다.

위 내용은 CSS 드롭다운 상자 효과_HTML5 중국의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!