Advertisement
programusy

Untitled

Feb 23rd, 2024
12
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.51 KB | None | 0 0
  1. <!-- Załaduj jQuery i CSS w sekcji head -->
  2. <head>
  3. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  4. <style>
  5. /* Stylizuj przycisk i menu rozwijane */
  6. .dropbtn {
  7. background-color: #3498DB;
  8. color: white;
  9. padding: 16px;
  10. font-size: 16px;
  11. border: none;
  12. cursor: pointer;
  13. }
  14.  
  15. .dropdown {
  16. position: relative;
  17. display: inline-block;
  18. }
  19.  
  20. .dropdown-content {
  21. display: none;
  22. position: absolute;
  23. background-color: #f1f1f1;
  24. min-width: 160px;
  25. box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  26. z-index: 1;
  27. }
  28.  
  29. .dropdown-content a {
  30. color: black;
  31. padding: 12px 16px;
  32. text-decoration: none;
  33. display: block;
  34. }
  35.  
  36. .dropdown-content a:hover {
  37. background-color: #ddd;
  38. }
  39. </style>
  40. </head>
  41.  
  42. <!-- Utwórz element nav z listą linków rozwijanych -->
  43. <body>
  44. <nav>
  45. <div class="dropdown">
  46. <button class="dropbtn">Menu</button>
  47. <div class="dropdown-content">
  48. <a href="#">Link 1</a>
  49. <a href="#">Link 2</a>
  50. <a href="#">Link 3</a>
  51. </div>
  52. </div>
  53. </nav>
  54.  
  55. <!-- Dodaj skrypt jQuery, który pokazuje i ukrywa menu rozwijane -->
  56. <script>
  57. $(document).ready(function(){
  58. // Po kliknięciu na przycisk przełączaj między pokazywaniem i ukrywaniem menu rozwijanego
  59. $(".dropbtn").click(function(){
  60. $(".dropdown-content").toggle();
  61. });
  62. });
  63. </script>
  64. </body>
  65.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement