导航栏中的用户菜单下拉菜单
Posted
技术标签:
【中文标题】导航栏中的用户菜单下拉菜单【英文标题】：User menu dropdown inside a navbar 【发布时间】：2021-05-19 08:02:01 【问题描述】：将我的脚趾浸入顺风中，我在让用户菜单下拉菜单正常工作时遇到了一些问题，用户下拉菜单会导致整个导航栏随之滚动，并且它的位置也不正确。我将如何正确解决此问题而不导致整个导航随之滚动？
Codepen
片段
<nav class="fixed top-0 z-50 flex w-full h-16 bg-white " x-data=" open: false, position: true, profile: false "
x-bind:class=' "bg-black shadow-lg": !position '
x-on:scroll.window="position =( window.pageYOffset > 10) ? false : true ">
<div
class="container relative flex flex-wrap items-center justify-between h-16 mx-auto font-medium border-b border-gray-200 lg:justify-center sm:px-4 md:px-2">
<a href=" route('home') " class="w-1/4 py-4 pr-4 md:py-0">
<span class="text-xl font-black leading-none text-gray-900 select-none logo">title<span
class="text-indigo-600">.</span>
</a>
<div
class="top-0 left-0 items-start hidden w-full h-full p-4 text-sm bg-gray-900 bg-opacity-50 md:w-3/4 lg:text-base md:h-auto md:bg-transparent md:p-0 md:relative md:flex"
:class="'flex fixed': open, 'hidden': !open ">
<div
class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg select-none md:bg-transparent md:rounded-none md:relative md:flex md:flex-row md:overflow-auto">
<a href=" route('home') "
class="items-center block w-auto h-16 px-6 text-xl font-black leading-none text-gray-900 select-none md:hidden">title<span
class="text-indigo-600">.</span></a>
<div
class="flex flex-col items-start justify-center w-full text-center md:w-2/3 md:mt-0 md:flex-row md:items-center">
<a href=" route('home') "
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center request()->routeIs('home') ? 'text-indigo-600' : '' ">Home</a>
<a href=" route('blog') "
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center request()->routeIs('blog') ? 'text-indigo-600' : '' ">Blog</a>
<a href=" route('contact') "
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center request()->routeIs('contact') ? 'text-indigo-600' : '' ">Contact</a>
<a href=" route('team') "
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center request()->routeIs('team') ? 'text-indigo-600' : '' ">Our
team</a>
<a href="#"
class="absolute top-0 left-0 hidden py-2 mt-6 ml-10 mr-2 text-gray-600 lg:inline-block md:mt-0 md:ml-2 lg:mx-3 md:relative">
<svg class="inline w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke- viewBox="0 0 24 24" stroke="currentColor">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
</div>
@guest
<div
class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<a href=" route('login') "
class="w-full px-6 py-2 mr-0 text-gray-700 md:px-0 lg:pl-2 md:mr-4 lg:mr-5 md:w-auto request()->routeIs('login') ? 'text-indigo-600' : '' ">Log
in</a>
<span class="inline-flex w-full shadow-sm md:rounded-full md:w-auto">
<a href=" route('register') "
class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white transition duration-150 ease-in-out bg-transparent bg-indigo-600 border border-transparent md:px-3 md:w-auto md:rounded-full lg:px-5 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 request()->routeIs('register') ? 'text-black-700' : '' ">Sign
up
</a>
</span>
</div>
@endguest
@auth
<div
class="flex flex-col items-start justify-end pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<img @click="profile = !profile" class=" object-cover w-12 h-12 rounded-full"
src="https://images.pexels.com/photos/2589653/pexels-photo-2589653.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
/>
<div x-show.transition="profile" class="relative">
<div class="absolute right-0 w-40 mt-2 py-2 bg-white border rounded shadow-xl">
<a href="route('dashboard.index',['user' => Auth()->user()])"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Dashboard</a>
<div class="py-2">
<hr/>
</div>
<a href="#"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Settings</a>
<div class="py-2">
<hr/>
</div>
<form method="POST" action="route('logout')">
@csrf
<button
type="submit"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">
Logout
</button>
</form>
</div>
</div>
</div>
@endauth
</div>
</div>
<div @click="open = !open"
class="absolute right-0 flex flex-col items-end justify-center w-10 h-10 rounded-full cursor-pointer md:hidden hover:bg-gray-100">
<svg class="w-6 h-6 text-gray-700" x-show="!open" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke- viewBox="0 0 24 24" stroke="currentColor" x-cloak>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg class="w-6 h-6 text-gray-700" x-show="open" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" x-cloak>
<path stroke-linecap="round" stroke-linejoin="round" stroke- d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</div>
</div>
</nav>
<nav class="fixed top-0 z-50 flex w-full h-16 bg-white " x-data=" open: false, position: true, profile: false "
x-bind:class=' "bg-black shadow-lg": !position '
x-on:scroll.window="position =( window.pageYOffset > 10) ? false : true ">
<div
class="container relative flex flex-wrap items-center justify-between h-16 mx-auto font-medium border-b border-gray-200 lg:justify-center sm:px-4 md:px-2">
<a href=" route('home') " class="w-1/4 py-4 pr-4 md:py-0">
<span class="text-xl font-black leading-none text-gray-900 select-none logo">Digendo<span
class="text-indigo-600">.</span>
</a>
<div
class="top-0 left-0 items-start hidden w-full h-full p-4 text-sm bg-gray-900 bg-opacity-50 md:w-3/4 lg:text-base md:h-auto md:bg-transparent md:p-0 md:relative md:flex"
:class="'flex fixed': open, 'hidden': !open ">
<div
class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg select-none md:bg-transparent md:rounded-none md:relative md:flex md:flex-row md:overflow-auto">
<a href=" route('home') "
class="items-center block w-auto h-16 px-6 text-xl font-black leading-none text-gray-900 select-none md:hidden">Digendo<span
class="text-indigo-600">.</span></a>
<div
class="flex flex-col items-start justify-center w-full text-center md:w-2/3 md:mt-0 md:flex-row md:items-center">
<a href=" route('home') "
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center request()->routeIs('home') ? 'text-indigo-600' : '' ">Home</a>
<a href=" route('blog') "
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center request()->routeIs('blog') ? 'text-indigo-600' : '' ">Blog</a>
<a href=" route('contact') "
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center request()->routeIs('contact') ? 'text-indigo-600' : '' ">Contact</a>
<a href=" route('team') "
class="inline-block w-full px-6 py-2 mx-0 font-medium text-left text-gray-700 md:w-auto md:px-0 md:mx-2 hover:text-indigo-600 lg:mx-3 md:text-center request()->routeIs('team') ? 'text-indigo-600' : '' ">Our
team</a>
<a href="#"
class="absolute top-0 left-0 hidden py-2 mt-6 ml-10 mr-2 text-gray-600 lg:inline-block md:mt-0 md:ml-2 lg:mx-3 md:relative">
<svg class="inline w-5 h-5" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke- viewBox="0 0 24 24" stroke="currentColor">
<path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</a>
</div>
@guest
<div
class="flex flex-col items-start justify-end w-full pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<a href=" route('login') "
class="w-full px-6 py-2 mr-0 text-gray-700 md:px-0 lg:pl-2 md:mr-4 lg:mr-5 md:w-auto request()->routeIs('login') ? 'text-indigo-600' : '' ">Log
in</a>
<span class="inline-flex w-full shadow-sm md:rounded-full md:w-auto">
<a href=" route('register') "
class="inline-flex items-center w-full px-6 py-3 text-sm font-medium leading-4 text-white transition duration-150 ease-in-out bg-transparent bg-indigo-600 border border-transparent md:px-3 md:w-auto md:rounded-full lg:px-5 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 request()->routeIs('register') ? 'text-black-700' : '' ">Sign
up
</a>
</span>
</div>
@endguest
@auth
<div
class="flex flex-col items-start justify-end pt-4 md:items-center md:w-1/3 md:flex-row md:py-0">
<img @click="profile = !profile" class=" object-cover w-12 h-12 rounded-full"
src="https://images.pexels.com/photos/2589653/pexels-photo-2589653.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
/>
<div x-show.transition="profile" class="relative">
<div class="absolute right-0 w-40 mt-2 py-2 bg-white border rounded shadow-xl">
<a href="route('dashboard.index',['user' => Auth()->user()])"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Dashboard</a>
<div class="py-2">
<hr/>
</div>
<a href="#"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">Settings</a>
<div class="py-2">
<hr/>
</div>
<form method="POST" action="route('logout')">
@csrf
<button
type="submit"
class="transition-colors duration-200 block px-4 py-2 text-normal text-gray-900 rounded hover:bg-purple-500 hover:text-white">
Logout
</button>
</form>
</div>
</div>
</div>
@endauth
</div>
</div>
<div @click="open = !open"
class="absolute right-0 flex flex-col items-end justify-center w-10 h-10 rounded-full cursor-pointer md:hidden hover:bg-gray-100">
<svg class="w-6 h-6 text-gray-700" x-show="!open" fill="none" stroke-linecap="round" stroke-linejoin="round"
stroke- viewBox="0 0 24 24" stroke="currentColor" x-cloak>
<path d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
<svg class="w-6 h-6 text-gray-700" x-show="open" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg" x-cloak>
<path stroke-linecap="round" stroke-linejoin="round" stroke- d="M6 18L18 6M6 6l12 12">
</path>
</svg>
</div>
</div>
</nav>
【问题讨论】：
【参考方案1】：我不太熟悉tailwind，但我认为您应该删除放置下拉列表的容器上的.overflow-hidden 和.md\:overflow-auto 类。这些溢出值可防止下拉菜单显示在 div 元素之外。
【讨论】：
【参考方案2】：这个容器：
<div class="flex-col w-full h-auto overflow-hidden bg-white rounded-lg select-none md:bg-transparent md:rounded-none md:relative md:flex md:flex-row md:overflow-auto">
需要overflow:visible 才能让下拉菜单工作
【讨论】：
以上是关于导航栏中的用户菜单下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章