Open
Code
Home
Create
List
Home
Create
List
Edit
Title
Content
<head> <meta charset="utf-8" /> <title>Hello World</title> <script src="https://cdn.tailwindcss.com"></script> <!-- CSS for presentation. --> <style> <link rel="stylesheet" type="text/css" href="mystyle.css"> </style> </head> <body> <nav class="bg-gray-900"> <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"> <a href="#" class="flex items-center space-x-3 rtl:space-x-reverse"> <span class="self-center text-2xl font-semibold text-white">Logo</span> </a> <div class="md:hidden flex md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse"> <button id="menuButton" data-collapse-toggle="navbar-cta" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg md:hidden text-gray-400 hover:bg-gray-700 focus:ring-gray-600" aria-controls="navbar-cta" aria-expanded="false"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14"> <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/> </svg> </button> </div> <div class="flex hidden w-full md:flex md:w-auto md:order-1" id="navbarDrop"> <ul class="flex flex-col text-center font-medium p-4 md:p-0 mt-4 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 bg-gray-900"> <li> <a href="#" class="block py-2 px-3 md:p-0 text-white hover:text-blue-800">Home</a> </li> <li> <a href="#" class="block py-2 px-3 md:p-0 text-white hover:text-blue-800">About</a> </li> </ul> </div> </div> </nav> <script src="/path/to/example.js"></script> </body> --------------------------------------------------------- var menuButton = document.getElementById("menuButton"); var navbarDrop = document.getElementById("navbarDrop"); menuButton.addEventListener("click", () => { var statusDrop = navbarDrop.classList.contains("hidden"); if(statusDrop){ navbarDrop.classList.remove("hidden"); }else{ navbarDrop.classList.add("hidden"); } });
Image
Category
Categories
Front-End
Back-End
Database
DevOps
Others
Password
Back to List