Skip to content

PHP

dropdown menu 간단 버전

Author
siwon
Date
2024-04-30 17:58
Views
273

<div class="dropdown">

  <button onclick="toggleDropdown()">Dropdown</button>

  <div id="dropdownContent" class="dropdown-content">

    <a href="#">Option 1</a>

    <a href="#">Option 2</a>

    <a href="#">Option 3</a>

  </div>

</div>



/* Style the dropdown button */

.dropdown button {

  background-color: #4CAF50;

  color: white;

  padding: 10px;

  font-size: 16px;

  border: none;

}


/* Style the dropdown content (hidden by default) */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}


/* Style links inside the dropdown */

.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {

  background-color: #f1f1f1;

}


/* Show the dropdown menu when the button is clicked */

.show {

  display: block;

}

/* Style the dropdown button */

.dropdown button {

  background-color: #4CAF50;

  color: white;

  padding: 10px;

  font-size: 16px;

  border: none;

}


/* Style the dropdown content (hidden by default) */

.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  min-width: 160px;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}


/* Style links inside the dropdown */

.dropdown-content a {

  color: black;

  padding: 12px 16px;

  text-decoration: none;

  display: block;

}


/* Change color of dropdown links on hover */

.dropdown-content a:hover {

  background-color: #f1f1f1;

}


/* Show the dropdown menu when the button is clicked */

.show {

  display: block;

}

 function toggleDropdown() {

  var dropdownContent = document.getElementById("dropdownContent");

  dropdownContent.classList.toggle("show");

}


// Close the dropdown menu if the user clicks outside of it

window.onclick = function(event) {

  if (!event.target.matches('.dropdown button')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");

    for (var i = 0; i < dropdowns.length; i++) {

      var openDropdown = dropdowns[i];

      if (openDropdown.classList.contains('show')) {

        openDropdown.classList.remove('show');

      }

    }

  }

}




------------------------------------------------------------------------------------------------------------------------

 

<script src="https://cdn.tailwindcss.com"></script>

 


<style>

.arrow {

  border: solid white;

  border-width: 0 3px 3px 0;

  display: inline-block;

  padding: 2px;

}


.right {

  transform: rotate(-45deg);

  -webkit-transform: rotate(-45deg);

}


.left {

  transform: rotate(135deg);

  -webkit-transform: rotate(135deg);

}


.up {

  transform: rotate(-135deg);

  -webkit-transform: rotate(-135deg);

}


.down {

  transform: rotate(45deg);

  -webkit-transform: rotate(45deg);

}

</style>


 

 

 




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

  <button type="" onclick="toggleDropdown(1)" class="btn btn-primary btn-xl page-scroll inline-flex justify-center w-full rounded-full  border border-gray-300 shadow-sm

      hover:bg-gray-50 hover:text-gray-900 focus:outline-none  ">

    MD STAFF

   <i class="arrow down ml-3 mt-1"></i>

  </button>


  <div id="dropdownContent1" 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" 

  style="display: none;">

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

    <a href="https://md.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">MD APL Management</a>

      <a href="https://collect.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">MD UPC Collect</a>

      <a href="https://upc.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">MD APL Checker</a>

    </div>

  </div>

</div>

 


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

  <button type="" onclick="toggleDropdown(2)" class="btn btn-primary btn-xl page-scroll inline-flex justify-center w-full rounded-full  border border-gray-300 shadow-sm

      hover:bg-gray-50 hover:text-gray-900 focus:outline-none   ">

    VI STAFF

    <i class="arrow down ml-3 mt-1"></i>

  </button>


  <div id="dropdownContent2" 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" 

  style="display: none;">

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

      <a href="https://vi.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">VI APL Management</a>

      <a href="https://vicollect.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">VI UPC Collect</a>

      <!-- <a href="https://upc.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">APL Checker</a> -->

    </div>

  </div>

</div>

                 

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

  <button type="" onclick="toggleDropdown(3)" class="btn btn-primary btn-xl page-scroll inline-flex justify-center w-full rounded-full  border border-gray-300 shadow-sm

      hover:bg-gray-50 hover:text-gray-900 focus:outline-none  ">

    VENDORS 

    

    <i class="arrow down ml-3 mt-1"></i>

  </button>

  <div id="dropdownContent3" 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" 

  style="display: none;">

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

    <a href="https://up.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">MD UPC Upload</a>

       <a href="https://upc.wicapl.org" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900" role="menuitem">MD APL Checker</a>

    </div>

  </div>

</div>

 

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

                  <a href="tutorial/index.php">

  <button type=""   class="btn btn-success btn-xl page-scroll inline-flex justify-center w-full rounded-full  border border-gray-300 shadow-sm

      hover:bg-gray-50 hover:text-gray-900 focus:outline-none  ">

    TUTORIALS

 

  </button>

</a>

 

</div> 

 






        <script>


function toggleDropdown(a) {

  var dropdownContent = document.getElementById("dropdownContent"+a);

 // console.log(a);

 // console.log(dropdownContent);


  if (dropdownContent.style.display === "none") {

    dropdownContent.style.display = "block";

  } else {

    dropdownContent.style.display = "none";

  }

}


// Close the dropdown menu if the user clicks outside of it

window.onclick = function(event) {

  if (!event.target.matches('.inline-flex')) {

    var dropdowns = document.getElementsByClassName("origin-top-right");

    for (var i = 0; i < dropdowns.length; i++) {

      var openDropdown = dropdowns[i];

      if (openDropdown.style.display === "block") {

        openDropdown.style.display = "none";

      }

    }

  }

}



</script>



 

 

Total 0

Total 43
Number Title Author Date Votes Views
38
dropdown menu alpinejs 사용 버전
siwon | 2024.04.30 | Votes 0 | Views 295
siwon 2024.04.30 0 295
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 363
siwon 2023.10.24 0 363
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