1

Why Drop down Menu not closing when some one clicked on the white space in my code html and tailwind.css

and my code in under medium screen does not show drop down menu at all

Please see my code if possible and answer this 2 questions . i worked on this code and edited for 2 days . but i do not have experience . i do not know . it was components tailwind css that i download and edited for 2 days but still

have this 2 problem

1- When some one click on white space drop down not disappearing

2- in under medium size Drop down not showing at all

I know this code is too long but please some one correct my code impossible for me to understand

Here is my drop down image

here is my full code Html with tailwind css

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>drop down menu</title>
  </head>
  <body>
  

    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer>
    </script>

<div x-data="{ open: false }" class="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">

  <nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow hidden pb-4 md:pb-0 md:flex md:justify-end md:flex-row">

    <button @click="open = !open" class="flex flex-row text-gray-900 bg-gray-200 items-center w-full px-4 
    py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent 
    dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 
    dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 
    hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">HHHH      


      <svg fill="currentColor" viewBox="0 0 20 20" 
      :class="{'rotate-180': open, 'rotate-0': !open}" 
      class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1 rotate-0"><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"></path>
      </svg>

            <div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 w-full md:max-w-screen-sm md:w-screen mt-2 origin-top-right">
             
              <div class="px-2 pt-2 pb-4 bg-white rounded-md shadow-lg dark-mode:bg-gray-700">
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                  
                  <a class="flex flex row items-start rounded-lg bg-transparent p-2 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#">
                    <div class="bg-teal-500 text-white rounded-lg p-3">

                      <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" class="md:h-6 md:w-6 h-4 w-4"><path d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
                    </div>                     

                    
                    <div class="ml-3">
                      <p class="font-semibold">Appearance</p>
                      <p class="text-sm">Easy customization</p>
                    </button>  </div>
                  </a>
    </nav>
  </body>
  </html>
ChenBr
  • 1,671
  • 1
  • 7
  • 21
Hakim Lord
  • 11
  • 6
  • 1
    Please include in your tags all the relevant technologies; it looks like you're using `Alpine.js`, which is relevant here. Also, a Minimal, Reproducible Example might be helpful. – ChenBr Oct 23 '22 at 10:31
  • @ChenBr This Link is The Code that working https://tailwindcomponents.com/component/responsive-navbar-with-grid-dropdown but i just want 5 drop menu not the others and i edited but i failed – Hakim Lord Oct 23 '22 at 11:31
  • You have `html` and `tailwind-css` in your tags, but I can't help you even though I'm familiar with those two. You're missing some critical information that you need to add in order to get help. I can't copy your code and make it work simply because there's more than `html` and `tailwind-css` in it. – ChenBr Oct 23 '22 at 11:36
  • Try to add `tailwind-ui` to your tags: https://stackoverflow.com/questions/tagged/tailwind-ui – ChenBr Oct 23 '22 at 11:40
  • @ChenBr the Code is working but i do not want all links just wanted add 5 drop down . i edidet u see my edited code in my question and not working . but when i paste the real code it is working but it just have 1 drop menu and 4 link . i wanted 5 drop menu . can u send me the sample code of drop menu – Hakim Lord Oct 23 '22 at 11:44

0 Answers0