d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-18 23:16:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3299 from LooseLi/menu-item-drop

Browse Source 
fix(下拉子菜单闪烁问题#3154)
This commit is contained in:
tangly1024
2025-04-11 17:58:15 +08:00
committed by GitHub
parent ea505831ec 950c3cae23
commit 5ab6e0cf6c
5 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
themes/heo/components/MenuItemDrop.js
View File

@@ -25,8 +25,12 @@ export const MenuItemDrop = ({ link }) => {
{/* 含子菜单的按钮 */}
{hasSubMenu && (
<>
<div className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest'>
<div className='cursor-pointer hover:bg-black hover:bg-opacity-10 rounded-2xl flex justify-center items-center px-3 py-1 no-underline tracking-widest relative'>
{link?.icon && <i className={link?.icon} />} {link?.name}
{/* 主菜单下方的安全区域 */}
{show && (
<div className='absolute w-full h-4 -bottom-4 left-0 bg-transparent z-30'></div>
)}
</div>
</>
)}
@@ -34,7 +38,7 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && (
<ul
style={{ backdropFilter: 'blur(3px)' }}
className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white dark:bg-[#1e1e1e] transition-all duration-300 z-20 absolute`}>
className={`${show ? 'visible opacity-100 top-14 pointer-events-auto' : 'invisible opacity-0 top-20 pointer-events-none'} drop-shadow-md overflow-hidden rounded-xl bg-white dark:bg-[#1e1e1e] transition-all duration-300 z-20 absolute`}>
{link.subMenus.map((sLink, index) => {
return (
<li

8
themes/hexo/components/MenuItemDrop.js
View File

@@ -29,10 +29,14 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && (
<>
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1 relative'>
{link?.icon && <i className={link?.icon} />} {link?.name}
<i
className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
{/* 主菜单下方的安全区域 */}
{show && (
<div className='absolute w-full h-3 -bottom-1 left-0 bg-transparent z-30'></div>
)}
</div>
</>
)}
@@ -41,7 +45,7 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && (
<ul
style={{ backdropFilter: 'blur(3px)' }}
className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-20 absolute block `}>
className={`${show ? 'visible opacity-100 top-12 pointer-events-auto' : 'invisible opacity-0 top-20 pointer-events-none'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-20 absolute block `}>
{link.subMenus.map((sLink, index) => {
return (
<li

2
themes/magzine/components/MenuItemDrop.js
View File

@@ -52,7 +52,7 @@ export const MenuItemDrop = ({ link }) => {
{/* 子菜单 */}
{hasSubMenu && (
<ul
className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} p-1 absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg`}>
className={`${show ? 'visible opacity-100 top-14 pointer-events-auto' : 'invisible opacity-0 top-20 pointer-events-none'} p-1 absolute border bg-white dark:bg-black dark:border-gray-800 transition-all duration-150 z-20 block rounded-lg drop-shadow-lg`}>
{link?.subMenus?.map(sLink => {
return (
<li

8
themes/matery/components/MenuItemDrop.js
View File

@@ -28,10 +28,14 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && (
<>
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
<div className='cursor-pointer menu-link pl-2 pr-4 no-underline tracking-widest pb-1 relative'>
{link?.icon && <i className={link?.icon} />} {link?.name}
<i
className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
{/* 主菜单下方的安全区域 */}
{show && (
<div className='absolute w-full h-3 -bottom-1 left-0 bg-transparent z-30'></div>
)}
</div>
</>
)}
@@ -40,7 +44,7 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && (
<ul
style={{ backdropFilter: 'blur(3px)' }}
className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block `}>
className={`${show ? 'visible opacity-100 top-12 pointer-events-auto' : 'invisible opacity-0 top-20 pointer-events-none'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block `}>
{link.subMenus.map((sLink, index) => {
return (
<li

2
themes/movie/components/MenuItemDrop.js
View File

@@ -37,7 +37,7 @@ export const MenuItemDrop = ({ link }) => {
{hasSubMenu && (
<ul
style={{ backdropFilter: 'blur(3px)' }}
className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-30 absolute block `}>
className={`${show ? 'visible opacity-100 top-14 pointer-events-auto' : 'invisible opacity-0 top-20 pointer-events-none'} drop-shadow-md overflow-hidden rounded-md text-black dark:text-white bg-white dark:bg-black transition-all duration-300 z-30 absolute block `}>
{link.subMenus.map((sLink, index) => {
return (
<li