Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- Załaduj jQuery i CSS w sekcji head -->
- <head>
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
- <style>
- /* Stylizuj przycisk i menu rozwijane */
- .dropbtn {
- background-color: #3498DB;
- color: white;
- padding: 16px;
- font-size: 16px;
- border: none;
- cursor: pointer;
- }
- .dropdown {
- position: relative;
- display: inline-block;
- }
- .dropdown-content {
- display: none;
- position: absolute;
- background-color: #f1f1f1;
- min-width: 160px;
- box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
- z-index: 1;
- }
- .dropdown-content a {
- color: black;
- padding: 12px 16px;
- text-decoration: none;
- display: block;
- }
- .dropdown-content a:hover {
- background-color: #ddd;
- }
- </style>
- </head>
- <!-- Utwórz element nav z listą linków rozwijanych -->
- <body>
- <nav>
- <div class="dropdown">
- <button class="dropbtn">Menu</button>
- <div class="dropdown-content">
- <a href="#">Link 1</a>
- <a href="#">Link 2</a>
- <a href="#">Link 3</a>
- </div>
- </div>
- </nav>
- <!-- Dodaj skrypt jQuery, który pokazuje i ukrywa menu rozwijane -->
- <script>
- $(document).ready(function(){
- // Po kliknięciu na przycisk przełączaj między pokazywaniem i ukrywaniem menu rozwijanego
- $(".dropbtn").click(function(){
- $(".dropdown-content").toggle();
- });
- });
- </script>
- </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement