Skip to content

PHP

dropdown menu alpinejs 사용 버전

Author
siwon
Date
2024-04-30 18:15
Views
296

<div x-data="{ open1: false, open2: false, open3: false }" @click.away="open1 = false; open2 = false; open3 = false;" class="relative">

  <!-- Button 1 -->

  <div class="relative inline-block text-left">

    <button @click="open1 = !open1" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">

      Dropdown 1

      <!-- Heroicon name: chevron-down -->

      <svg x-bind:class="{ 'transform rotate-180': open1 }" class="-mr-1 ml-2 h-5 w-5 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">

        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />

      </svg>

    </button>


    <div x-show="open1" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">

      <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">

        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 1-1</a>

        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 1-2</a>

        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 1-3</a>

      </div>

    </div>

  </div>


  <!-- Button 2 -->

  <div class="relative inline-block text-left">

    <button @click="open2 = !open2" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">

      Dropdown 2

      <!-- Heroicon name: chevron-down -->

      <svg x-bind:class="{ 'transform rotate-180': open2 }" class="-mr-1 ml-2 h-5 w-5 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">

        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />

      </svg>

    </button>


    <div x-show="open2" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">

      <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">

        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 2-1</a>

        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 2-2</a>

        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 2-3</a>

      </div>

    </div>

  </div>


  <!-- Button 3 -->

  <div class="relative inline-block text-left">

    <button @click="open3 = !open3" type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100">

      Dropdown 3

      <!-- Heroicon name: chevron-down -->

      <svg x-bind:class="{ 'transform rotate-180': open3 }" class="-mr-1 ml-2 h-5 w-5 transition-transform duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">

        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />

      </svg>

    </button>


    <div x-show="open3" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none">

      <div class="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">

        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 3-1</a>

        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 3-2</a>

        <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">Option 3-3</a>

      </div>

    </div>

  </div>

</div>

Total 0

Total 43
Number Title Author Date Votes Views
38
dropdown menu alpinejs 사용 버전
siwon | 2024.04.30 | Votes 0 | Views 296
siwon 2024.04.30 0 296
37
dropdown menu 간단 버전
siwon | 2024.04.30 | Votes 0 | Views 273
siwon 2024.04.30 0 273
36
The Standard PHP Library (SPL) is a collection of classes and interfaces that provide core functionality to PHP developers.
siwon | 2023.10.24 | Votes 0 | Views 364
siwon 2023.10.24 0 364
35
session 과 쿠키
siwon | 2023.10.24 | Votes 0 | Views 396
siwon 2023.10.24 0 396
34
Late Static Binding (LSB):메서드 내부에서 현재 클래스의 정적 메서드 또는 프로퍼티를 호출할 때 사용
siwon | 2023.10.24 | Votes 0 | Views 414
siwon 2023.10.24 0 414
33
PHP 예외 처리(Exception Handling)
siwon | 2023.10.10 | Votes 0 | Views 433
siwon 2023.10.10 0 433
32
php exception
siwon | 2023.10.10 | Votes 0 | Views 408
siwon 2023.10.10 0 408
31
예외(Exception)를 처리하기 위해 try...catch 블록을 사용하는 방법
siwon | 2023.10.10 | Votes 0 | Views 473
siwon 2023.10.10 0 473
30
Preserving Parent Class Functionality in overriding
siwon | 2023.09.26 | Votes 0 | Views 380
siwon 2023.09.26 0 380
29
oop 세부항목
siwon | 2023.09.26 | Votes 0 | Views 386
siwon 2023.09.26 0 386
28
method chaining
siwon | 2023.09.25 | Votes 0 | Views 420
siwon 2023.09.25 0 420
27
interface implements
siwon | 2023.09.19 | Votes 0 | Views 379
siwon 2023.09.19 0 379
Re:interface implements
siwon | 2023.10.24 | Votes 0 | Views 303
siwon 2023.10.24 0 303
26
abstract class : 부모 class로 사용되며 자식(extends 한)에게 abstract method를 강제함(그들만의 방식으로)
siwon | 2023.09.19 | Votes 0 | Views 393
siwon 2023.09.19 0 393
25
isset() / unset()
siwon | 2023.09.18 | Votes 0 | Views 392
siwon 2023.09.18 0 392
24
magic methods-어떤 상황이 되면 call 하지 않아도 자동으로 실행되는 메소드
siwon | 2023.09.18 | Votes 0 | Views 381
siwon 2023.09.18 0 381
23
MD(markdown) file
siwon | 2023.09.12 | Votes 0 | Views 417
siwon 2023.09.12 0 417
22
usort
siwon | 2023.08.30 | Votes 0 | Views 353
siwon 2023.08.30 0 353
21
closure=unanimous function
siwon | 2023.08.30 | Votes 0 | Views 406
siwon 2023.08.30 0 406
php 7.4에서 추가 화살표 함수 fn()=>
siwon | 2023.10.24 | Votes 0 | Views 541
siwon 2023.10.24 0 541
20
reference variable &
siwon | 2023.08.29 | Votes 0 | Views 393
siwon 2023.08.29 0 393
참조(reference)한 original variable의 값을 바꿔버리기 때문에 조심해서 써야함
siwon | 2023.08.30 | Votes 0 | Views 430
siwon 2023.08.30 0 430
19
PHP 변수 : 스칼라(Scalar), 복합(Composite), 그리고 리소스(Resource)
siwon | 2023.08.22 | Votes 0 | Views 451
siwon 2023.08.22 0 451
18
if : vs {}
siwon | 2023.08.22 | Votes 0 | Views 354
siwon 2023.08.22 0 354
17
null coalescing operator
siwon | 2023.08.18 | Votes 0 | Views 430
siwon 2023.08.18 0 430
16
arrary functions
siwon | 2023.08.18 | Votes 0 | Views 355
siwon 2023.08.18 0 355
15
http request form method GET POST
siwon | 2023.08.17 | Votes 0 | Views 395
siwon 2023.08.17 0 395
14
printf()
siwon | 2023.08.17 | Votes 0 | Views 373
siwon 2023.08.17 0 373