Sorry to ask a question again as I asked a problem in the morning also.
This time I am facing an issue with Mathjax text. As my navbar is fixed, my texts are going inside the navbar whereas the math expressions are going above the navbar. This is annoying me from today's morning itself.
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"
<div class="flex flex-col h-screen">
<!-- navbar -->
<div class="fixed inset-x-0 left-0 right-0 w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
<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">
<div class="p-4 flex flex-row items-center justify-between"> Sachchidanand Prasad
<button class="md:hidden rounded-lg focus:outline-none focus:shadow-outline" #click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow pb-4 md:pb-0 hidden md:flex md:justify-end md:flex-row"> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-gray-700 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 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="index.html">
Home
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-gray-200 text-gray-900 rounded-lg dark-mode:bg-transparent 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 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" href="research.html">
Research
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent 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 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" href="cv.html">
CV
</a> </nav>
</div>
</div>
<!-- section -->
<section class="text-gray-600 body-font">
<div class="container lg:px-36 py-24 mx-auto">
<div class="flex flex-col items-center text-center justify-center">
<h2 class="text-gray-900 text-3xl title-font font-medium">Research</h2>
<div class="w-24 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
</div>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div class="p-4 md:w-full flex">
<div class="flex-grow lg:px-32 px-6">
<p class="mt-4 leading-relaxed text-lg text-justify"> My area of interests include <em>differential geometry</em>, <em>differential topology</em> and <em>algebraic topology</em>. More specifically, I am working on <em class="text-green-600">cut locus of a submanifold</em>. For a given Riemannian manifold $M$ and $N\subset M$ the <em class="text-green-600">cut locus of $N$</em>, $\mathrm{Cu}(N)$, is the collection of points $q\in M$ such that extension of a distance minimal geodesic joining $N$ to $q$ is no longer minimal. Here by the <em class="text-green-600">distance minimal geodesic $\gamma$ joining $N$ to $q$</em> we mean that there exists $p\in N$ such that the length of $\gamma$ from $p$ to $q$ is same as the distance from $N$ to $q$. In my recent paper (joint with Dr Somnath Basu) we have discussed the cut locus of a closed submanifold and described the relation between cut locus, Thom spaces and Morse-Bott functions. </p>
<p class="mt-4 leading-relaxed text-lg text-justify"> Currently, I am working on the cut locus of a quotient manifold and application to the classifying spaces. </p>
<p class="mt-4 leading-relaxed text-lg text-justify:"> </p>
<h2 class="mt-4 mb-4 text-gray-900 text-xl title-font font-medium" id="publications">Publications and Preprints</h2>
<ol class="pl-8 list-decimal">
<li class="text-lg"> <em>A connection between cut locus, Thom spaces and Morse-Bott functions</em> (joint with Dr Somnath Basu) ArXiv link
<div class="mt-2 ml-4 border-l-2 border-indigo-500 hidden md:block xs:hidden">
<p class="pl-2 leading-relaxed text-base text-gray-500 text-justify"> <span class="text-gray-900">Abstract:</span> Associated to every closed, embedded submanifold $N$ in a connected Riemannian manifold $M$, there is the distance function $d_N$ which measures the distance of a point in $M$ from $N$. We analyze the square of this function and show that it is Morse-Bott on the complement of the cut locus $\mathrm{Cu}(N)$ of $N$, provided $M$ is complete. Moreover, the gradient flow lines provide a deformation retraction of $M-\mathrm{Cu}(N)$ to $N$. If $M$ is a closed manifold, then we prove that the Thom space of the normal bundle of $N$ is homeomorphic to $M/\mathrm{N}$. We also discuss several interesting results which are either applications of these or related observations regarding the theory of cut locus. These results include, but are not limited to, a computation of the local homology of singular matrices, a classification of the homotopy type of the cut locus of a homology sphere inside a sphere, a deformation of the indefinite unitary group $U(p,q)$ to $U(p)\times U(q)$ and a geometric deformation of $GL(n,\mathbb{R})$ to $O(n,\mathbb{R})$ which is different from the Gram-Schmidt retraction. </p>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="foot mt-auto border-t border-gray-200">
<div class=" container flex flex-col flex-wrap px-4 py-1 mx-auto md:items-center lg:items-start md:flex-row md:flex-nowrap">
<div class="justify-between w-full mt-4 text-center lg:flex">
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mathscinet.ams.org/mathscinet/" target="_blank">MathSciNet</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.ams.org/open-math-notes" target="_blank">AMS open Math Notes</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mtts.org.in/" target="_blank">MTTS</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.atmschools.org/" target="_blank">ATM School</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="http://www.nbhm.dae.gov.in/" target="_blank">NBHM</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">About Us</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Blogs</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Contact Us</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Social Networks
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="">Facebook</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Twitter</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Instagram</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Github</a> </li>
</ul>
</div>
</div>
</div>
<div class="flex justify-center">
<p class="text-base text-gray-400"> All rights reserved by # <a class="text-gray-400 hover:text-gray-800" href="index.html">Sachchidanand</a> 2022 </p>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js" defer></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
]
},
svg: {
fontCache: 'global'
}
};
</script>
We can see in the above image that the math text s over the navbar. I don't know what exactly the problem is. Any help will be appreciated.
Insert the tailwind class z-10 to the navbar container to give the navbar a higher z-Index
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet"
<div class="flex flex-col">
<!-- navbar -->
<div class="fixed inset-x-0 left-0 right-0 w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 z-10">
<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">
<div class="p-4 flex flex-row items-center justify-between"> Sachchidanand Prasad
<button class="md:hidden rounded-lg focus:outline-none focus:shadow-outline" #click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow pb-4 md:pb-0 hidden md:flex md:justify-end md:flex-row"> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-gray-700 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 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="index.html">
Home
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-gray-200 text-gray-900 rounded-lg dark-mode:bg-transparent 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 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" href="research.html">
Research
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent 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 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" href="cv.html">
CV
</a> </nav>
</div>
</div>
<!-- section -->
<section class="text-gray-600 body-font">
<div class="container lg:px-36 py-24 mx-auto">
<div class="flex flex-col items-center text-center justify-center">
<h2 class="text-gray-900 text-3xl title-font font-medium">Research</h2>
<div class="w-24 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
</div>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div class="p-4 md:w-full flex">
<div class="flex-grow lg:px-32 px-6">
<p class="mt-4 leading-relaxed text-lg text-justify"> My area of interests include <em>differential geometry</em>, <em>differential topology</em> and <em>algebraic topology</em>. More specifically, I am working on <em class="text-green-600">cut locus of a submanifold</em>. For a given Riemannian manifold $M$ and $N\subset M$ the <em class="text-green-600">cut locus of $N$</em>, $\mathrm{Cu}(N)$, is the collection of points $q\in M$ such that extension of a distance minimal geodesic joining $N$ to $q$ is no longer minimal. Here by the <em class="text-green-600">distance minimal geodesic $\gamma$ joining $N$ to $q$</em> we mean that there exists $p\in N$ such that the length of $\gamma$ from $p$ to $q$ is same as the distance from $N$ to $q$. In my recent paper (joint with Dr Somnath Basu) we have discussed the cut locus of a closed submanifold and described the relation between cut locus, Thom spaces and Morse-Bott functions. </p>
<p class="mt-4 leading-relaxed text-lg text-justify"> Currently, I am working on the cut locus of a quotient manifold and application to the classifying spaces. </p>
<p class="mt-4 leading-relaxed text-lg text-justify:"> </p>
<h2 class="mt-4 mb-4 text-gray-900 text-xl title-font font-medium" id="publications">Publications and Preprints</h2>
<ol class="pl-8 list-decimal">
<li class="text-lg"> <em>A connection between cut locus, Thom spaces and Morse-Bott functions</em> (joint with Dr Somnath Basu) ArXiv link
<div class="mt-2 ml-4 border-l-2 border-indigo-500 hidden md:block xs:hidden">
<p class="pl-2 leading-relaxed text-base text-gray-500 text-justify"> <span class="text-gray-900">Abstract:</span> Associated to every closed, embedded submanifold $N$ in a connected Riemannian manifold $M$, there is the distance function $d_N$ which measures the distance of a point in $M$ from $N$. We analyze the square of this function and show that it is Morse-Bott on the complement of the cut locus $\mathrm{Cu}(N)$ of $N$, provided $M$ is complete. Moreover, the gradient flow lines provide a deformation retraction of $M-\mathrm{Cu}(N)$ to $N$. If $M$ is a closed manifold, then we prove that the Thom space of the normal bundle of $N$ is homeomorphic to $M/\mathrm{N}$. We also discuss several interesting results which are either applications of these or related observations regarding the theory of cut locus. These results include, but are not limited to, a computation of the local homology of singular matrices, a classification of the homotopy type of the cut locus of a homology sphere inside a sphere, a deformation of the indefinite unitary group $U(p,q)$ to $U(p)\times U(q)$ and a geometric deformation of $GL(n,\mathbb{R})$ to $O(n,\mathbb{R})$ which is different from the Gram-Schmidt retraction. </p>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="foot mt-auto border-t border-gray-200">
<div class=" container flex flex-col flex-wrap px-4 py-1 mx-auto md:items-center lg:items-start md:flex-row md:flex-nowrap">
<div class="justify-between w-full mt-4 text-center lg:flex">
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mathscinet.ams.org/mathscinet/" target="_blank">MathSciNet</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.ams.org/open-math-notes" target="_blank">AMS open Math Notes</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mtts.org.in/" target="_blank">MTTS</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.atmschools.org/" target="_blank">ATM School</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="http://www.nbhm.dae.gov.in/" target="_blank">NBHM</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">About Us</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Blogs</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Contact Us</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Social Networks
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="">Facebook</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Twitter</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Instagram</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Github</a> </li>
</ul>
</div>
</div>
</div>
<div class="flex justify-center">
<p class="text-base text-gray-400"> All rights reserved by # <a class="text-gray-400 hover:text-gray-800" href="index.html">Sachchidanand</a> 2022 </p>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js" defer></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
]
},
svg: {
fontCache: 'global'
}
};
</script>
Related
How do I get the drop-down button to work within a card in React?
I am building in react and using Tailwind css card to display API information. I do not want to show all the info at once so plan to use a dropdown to say "show more" but somehow it won't work.
Button shows but when clicked nothing happens. Here is the code below, this also applies to dropdown code from the tailwind official website so something wrong with my app that I cannot figure out.
You can see the code display here
Thank you
<h5 class="text-gray-900 text-xl leading-tight font-medium mb-2">Card title</h5>
<p class="text-gray-700 text-base mb-4">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
<button
class="dropdown-toggle inline-block px-6 py-2.5 bg-purple-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-purple-700 hover:shadow-lg focus:bg-purple-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-purple-800 active:shadow-lg active:text-white transition duration-150 ease-in-out flex items-center whitespace-nowrap"
type="button"
id="dropdownMenuButton2"
data-bs-toggle="dropdown"
aria-expanded="false"
>
SHOW MORE
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="caret-down"
class="w-2 ml-2"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
>
<path
fill="currentColor"
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
></path>
</svg>
</button>
<ul
class="dropdown-menu min-w-max absolute hidden bg-white text-base z-50 float-left py-2 list-none text-left rounded-lg shadow-lg mt-1 hidden m-0 bg-clip-padding border-none bg-gray-800"
aria-labelledby="dropdownMenuButton2"
>
<h6
class="text-gray-400 font-semibold text-sm py-2 px-4 block w-full whitespace-nowrap bg-transparent"
>
Dropdown header
</h6>
<span
class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-300"
>Dropdown item text</span
>
<li>
<a
class="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-300 hover:bg-gray-700 hover:text-white focus:text-white focus:bg-gray-700 active:bg-blue-600"
href="#"
>Action</a
>
</li>
<li>
<a
class="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-300 hover:bg-gray-700 hover:text-white focus:text-white focus:bg-gray-700"
href="#"
>Another action</a
>
</li>
<li>
<a
class="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-300 hover:bg-gray-700 hover:text-white focus:text-white focus:bg-gray-700"
href="#"
>Something else here</a
>
</li>
<li><hr class="h-0 my-2 border border-solid border-t-0 border-gray-300 opacity-25" /></li>
<li>
<a
class="dropdown-item text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-gray-300 hover:bg-gray-700 hover:text-white focus:text-white focus:bg-gray-700"
href="#"
>Separated link</a
>
</li>
</ul>
</div>
</div>
Just remove hidden class from ul tag and you can use one of component library like flowbite or daisyui
I want to get these elements to move over to the right. The name is in the correct spot I just want the 4 elements to the right to move over with some slight padding on the outside. Thanks.
here is the code snippet:
<!-- Header/top nav bar -->
<header class="py-6">
<nav class="container flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
<div class="me-auto text-lg font-bold"> Jordan DeGiacomo </div>
<button class="hidden" id="hamburger">
<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z" fill="white"/></svg>
</button>
<ul class="hidden md:flex space-x-12 items-center" id="nav-ul">
<li>Home</li>
<li>Languages</li>
<li>Projects</li>
<li><button class="px-6 py-2 bg-theme font-bold"> Hire Me </button></li>
</ul>
<button class="px-4 py-1 font-bold bg-theme md:hidden"> Hire Me </button>
<!-- <div class="md:hidden">
<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z" fill="white"/></svg>
</div> -->
</nav>
<!-- side nav bar -->
<div class="container mt-16 flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
<div class="flex flex-wrap md:flex-nowrap">
<nav class="inline-block lg:mr-24 lg:w-4 fixed left-percentage hidden xl:block">
<div class="absolute left-50 transform -translate-x-1/2 space-y-6 mt-36">
<a href="#" class="nav-dot selected-circle block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Home</span>
</a>
<a href="#languages" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Languaages</span>
</a>
<a href="#projects" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Projects</span>
</a>
<a href="#hire" class="nav-dot block w-7 h-7 rounded-full border-4 border-nav bg-body">
<span class="bg-black px-2 py-1 rounded-md ml-10 opacity-0">Hire</span>
</a>
</nav>
Here is a screenshot of the nav bar
Since you already have the justify-between just wrap the stuff you want moved to the right inside a div as follows:
<nav class="container flex justify-between items-center mx-auto px-8 md:px-14 lg:px-10 w-full">
<!-- left side div -->
<div class="me-auto text-lg font-bold"> Jordan DeGiacomo </div>
<!-- right side div -->
<div>
<button class="hidden" id="hamburger">
<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M13 17.5H0.25V14.6667H13V17.5ZM25.75 10.4167H0.25V7.58333H25.75V10.4167ZM25.75 3.33333H13V0.5H25.75V3.33333Z"
fill="white" />
</svg>
</button>
<ul class="hidden md:flex space-x-12 items-center" id="nav-ul">
<li>Home</li>
<li>Languages</li>
<li>Projects</li>
<li><button class="px-6 py-2 bg-theme font-bold"> Hire Me </button></li>
</ul>
<button class="px-4 py-1 font-bold bg-theme md:hidden"> Hire Me </button>
</div>
</nav>
Try using CSS to style the element -
/* for float alignment */
element {
float: right;
}
Or for absolute positioning
element {
position: absolute;
right: 0;
}
I have run my Vue JS app in development server multiple times and never faced a single issue with any of the functions. However, as soon as I deploy my application in the production server everything except this specific discount function causes my system to crash.
So after selecting one of the option (either amount or percentage) and as soon as I type in the value inside the input box, my application stops working.
I am still very new to web app development so it would be great if someone can help me out with this. TIA
This is my function that I am using to calculate discounts:
applyDiscount(){
this.balance=this.totalCost-this.totalPaid
if(this.isPercentage=='Percentage'){
if(this.discountAmount<=100 ){
this.discount=(this.totalCost/100)*this.discountAmount
this.form.discount=this.discount
this.str=""
if(this.discount<=this.totalCost-this.totalPaid){
this.adjustment=this.totalCost-this.discount
this.balance=this.balance-this.discount
this.str=""
}
else{
this.str="Discount amount exceeding balance"
}
}
else{
this.str="Percentage is exceeding 100%"
}
}else if(this.isPercentage=='Amount'){
this.str=""
this.discount=this.discountAmount
this.form.discount=this.discount
if(this.discount<=this.totalCost-this.totalPaid){
this.adjustment=this.totalCost-this.discount
this.balance=this.balance-this.discount
this.str=""
}
else{
this.str="Discount amount exceeding balance"
}
}
},
This template code:
<!--discount-->
<form #submit.prevent>
<div class="tracking-widest text-lg text-left title-font font-bold text-gray-500 border-b border-gray-300 ">
Discount:
</div>
<!--discount-->
<div class="inline-flex items-center mt-3 ">
<label for="" class="mb-3 text-gray-800">Give discount in?</label>
<input type="radio" name="test_id" #change="onChange($event)" value="Amount" class="form-radio h-5 w-5 text-indigo-600 mr-2" ><span class="ml-2 mr-2 text-gray-700">Amount</span>
<input type="radio" name="test_id" #change="onChange($event)" value="Percentage" class="form-radio h-5 w-5 text-indigo-600 mr-1"><span class="ml-2 mr-2 text-gray-700">Percentage</span>
</div>
<div class="flex justify-start">
<div class="">
<label class="text-gray-700 dark:text-gray-200" for="discount">Discount Amount</label>
<input #keypress="isNumber($event)" v-model.number="discountAmount" id="discount" type="text"
class="block w-full px-4 py-2 mt-2 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring">
</div>
</div>
<div>{{this.applyDiscount()}}</div>
<!--discount-->
<div v-if="this.str.length>=1">
<div class=" flex items-center mt-10 px-8">
<svg class="h-6 w-6 fill-current text-red-400 mr-4" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20">
<path
d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z" />
</svg>
<div>
<p class="font-medium text-red-500">{{str}}</p>
</div>
</div>
</div>
<!--after discount-->
<div class="flex justify-end items-end ml-6" >
<div class=" mt-5 w-full sm:w-2/4 lg:w-1/4">
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Total Cost:</span> <span
class="text-lg rounded ml-2 text-gray-500 "><span class="text-xl" >৳{{this.totalCost}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Total Paid:</span> <span
class="text-lg rounded ml-2 text-gray-500 "><span class="text-xl" >৳{{this.totalPaid}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Discount:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.discount}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Adjustment:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.totalCost-this.discount}}</span></span> </div>
<div class=" w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
<div class=" justify-between mb-3">
<div class="text-gray-400 text-md flex font-bold uppercase "><span
class="ml-5 mt-2">Balance:</span> <span
class="text-lg ml-2 text-gray-600"><span class="text-xl" >৳{{this.balance}}</span></span> </div>
<div class="w-40">
<div class="text-gray-800 font-medium" x-html="netTotal"></div>
</div>
</div>
</div>
</div>
</form>
<!--form-->
</div>
</div>
<!--discount-->
I am sort of posting all of it since I can't really figure out what the issue is.
Im trying to create a filter to filter different products but so far no success
ive tried different ways like using a long way by using IF for every filter didnt get it to work and code was way to big, tried for loop also wasnt able to do it
im trying to use "data" attribute in HTML to mark items seems to be a best way to do it?
any help is more then welcome
heres a code bellow
const buttons = document.querySelectorAll('.btn')
const products = document.querySelectorAll('.products')
buttons.forEach(function (button) {
button.addEventListener('click', (event) => {
event.preventDefault()
/* active button */
buttons.forEach((button) => {
button.classList.remove('active')
})
button.className = 'active'
products.forEach(product => {
showProduct = button.textContent
if (product.getAttribute('data-filter') == showProduct.toLowerCase()){
product.style.display = 'block'
} else {
product.style.display = 'none'
}
})
})
})
<!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 href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body class="bg-indigo-900 font-mono">
<nav class="mt-4 mb-10 text-white">
<div class="nav-bar">
<ul class="flex flex-row justify-center items-center space-x-8">
<li class=" transition transform duaration-100 hover:scale-110">
<a class="active btn filter-btn" href="#">All</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cake</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cookies</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Donuts</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Pudding</a>
</li>
</ul>
</div>
</nav>
<main>
<section class="container mx-auto flex flex-row justify-center items-center ">
<div class="grid grid-flow-row grid-cols-4 grid-rows-4 gap-10 ">
<!-- cakes -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cake' src="https://images.pexels.com/photos/291528/pexels-photo-291528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cake' src="https://images.pexels.com/photos/1070850/pexels-photo-1070850.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<!-- cookies -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cookies' src="https://images.pexels.com/photos/890577/pexels-photo-890577.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='cookies' src="https://images.pexels.com/photos/1020585/pexels-photo-1020585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<!-- donuts -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='donuts' src="https://images.pexels.com/photos/2955820/pexels-photo-2955820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='donuts' src="https://images.pexels.com/photos/3656118/pexels-photo-3656118.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<!-- pudding -->
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='pudding' src="https://images.pexels.com/photos/302468/pexels-photo-302468.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
<div class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img data-filter='pudding' src="https://images.pexels.com/photos/3026801/pexels-photo-3026801.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products w-full h-full object-cover"/>
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
<a href="https://www.google.com" class="inline-block rounded-sm font-medium border border-solid cursor-pointer text-center transition-colors duration-200 text-base py-3 px-6 text-white bg-green-400 border-green-400 hover:bg-green-600 hover:border-green-600" >View Source</a>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="/app.js"></script>
</body>
</html>
So it seems you are looking to hide everything except what button you press.
I would first place a helper class to hide elements I want to filter out of the dom using classList to toggle the class with remove() and add()
I would move the dataset.filter attribute to the parent element .products rather than use the image as a reference and try to travel up the DOM to target the parent element.
Remove and rename your image class to products-img so it is different than the products parent element.
Use a callback to add to your eventListener that checks the targetBtn value or textContent run it through an forEach loop and if statement to handle the All button, showing all elements.
else we run a forEach over products, first hiding all elements and then matching our dataset.filter value using a conditional that checks if it is equal to e.target.textContent button.
See example below:
const buttons = document.querySelectorAll('.btn')
const products = document.querySelectorAll('.products')
function filterButtons(e) {
let targetBtn = e.target.textContent.toLowerCase()
targetBtn === 'all' ?
products.forEach(p => {
p.classList.contains('hide') ?
p.classList.remove('hide') : null
}) :
products.forEach(p => {
p.classList.add('hide')
p.dataset.filter === targetBtn ?
p.classList.remove('hide') : null
})
}
buttons.forEach(function(button) {
button.addEventListener('click', filterButtons)
})
.hide {
display: none;
}
<!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 href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body class="bg-indigo-900 font-mono">
<nav class="mt-4 mb-10 text-white">
<div class="nav-bar">
<ul class="flex flex-row justify-center items-center space-x-8">
<li class=" transition transform duaration-100 hover:scale-110">
<a class="active btn filter-btn" href="#">All</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cake</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Cookies</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Donuts</a>
</li>
<li class="transition transform duaration-100 hover:scale-110">
<a class="btn filter-btn" href="#">Pudding</a>
</li>
</ul>
</div>
</nav>
<main>
<section class="container mx-auto flex flex-row justify-center items-center ">
<div class="grid grid-flow-row grid-cols-4 grid-rows-4 gap-10 parent">
<!-- cakes -->
<div data-filter='cake' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/291528/pexels-photo-291528.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='cake' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/1070850/pexels-photo-1070850.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<!-- cookies -->
<div data-filter='cookies' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/890577/pexels-photo-890577.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='cookies' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/1020585/pexels-photo-1020585.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<!-- donuts -->
<div data-filter='donuts' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/2955820/pexels-photo-2955820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='donuts' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/3656118/pexels-photo-3656118.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<!-- pudding -->
<div data-filter='pudding' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/302468/pexels-photo-302468.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
<div data-filter='pudding' class="w-72 products max-w-full border border-gray-300 rounded-sm bg-white">
<div class="w-full h-48">
<img src="https://images.pexels.com/photos/3026801/pexels-photo-3026801.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="products-img w-full h-full object-cover" />
</div>
<div class="p-6">
<h5 class="text-lg font-medium">Card title</h5>
<p class="mt-2">
Some simple text that describes what's going on in this very simple card.
</p>
<div class="mt-4 flex">
View Source
</div>
</div>
</div>
</div>
</section>
</main>
<script src="/app.js"></script>
</body>
</html>
I'm trying to create a Mega Menu that triggers on Hover, using Tailwind CSS and Alpinejs. I kind of having it working, but it's really buggy.
I've tried adding x-on:mouseleave to different elements but it will either flicker constantly or only disappear when moving away from certain areas. So it will either disappear when moving below the menu and not when moving above and vice versa.
Any insight would be much appreciated!
https://codepen.io/kennyk3/pen/yLJmzYJ
<div class="bg-blue-800 hidden md:block">
<div class="max-w-screen-xl mx-auto">
<nav class="flex items-center justify-between flex-wrap">
<div class="w-full block flex-grow md:flex md:items-center md:w-auto">
<div class="font-bold md:flex-grow">
<ul class="flex justify-between">
<li>
LINK
</li>
<li>
LINK
</li>
<li>
LINK
</li>
<li>
LINK
</li>
<li class="group hover:bg-white">
<div x-data="{ resourcesMenu: false }" x-on:mouseover="resourcesMenu = !resourcesMenu" x-on:mouseleave="resourcesMenu = !resourcesMenu">
MEGA MENU
<div x-show="resourcesMenu" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 -translate-y-1" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-1" class="absolute inset-x-0 transform shadow-lg -mt-1 z-10">
<div class="bg-white">
<div class="max-w-7xl mx-auto grid gap-y-6 px-4 py-6 sm:grid-cols-2 sm:gap-8 sm:px-6 sm:py-8 lg:grid-cols-4 lg:px-8 lg:py-12 xl:py-16">
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: chart-bar" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Analytics
</p>
<p class="mt-1 text-sm text-gray-500">
Get a better understanding of where your traffic is coming from.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: cursor-click" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Engagement
</p>
<p class="mt-1 text-sm text-gray-500">
Speak directly to your customers in a more meaningful way.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: shield-check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Security
</p>
<p class="mt-1 text-sm text-gray-500">
Your customers' data will be safe and secure.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
<a href="#" class="-m-3 p-3 flex flex-col justify-between rounded-lg hover:bg-gray-50 transition ease-in-out duration-150">
<div class="flex md:h-full lg:flex-col">
<div class="flex-shrink-0">
<div class="inline-flex items-center justify-center h-10 w-10 rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<svg class="h-6 w-6" x-description="Heroicon name: view-grid" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
</svg>
</div>
</div>
<div class="ml-4 md:flex-1 md:flex md:flex-col md:justify-between lg:ml-0 lg:mt-4">
<div>
<p class="text-base font-medium text-gray-900">
Integrations
</p>
<p class="mt-1 text-sm text-gray-500">
Connect with third-party tools that you're already using.
</p>
</div>
<p class="mt-2 text-sm font-medium text-indigo-600 lg:mt-4">Learn more <span aria-hidden="true">→</span></p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li>
LINK
</li>
<li class="md:hidden lg:inline-block">
LINK
</li>
<li class="md:hidden">
LINK
</li>
<li>
LINK
</li>
<li class="md:hidden lg:inline-block">
LINK
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
Change your trigger event from mouseover to mouseenter. The problem you're having is mouseover is triggered for the parent and its child elements.
See: https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseover_event
The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.
Wheres mouseenter will be triggered once.