英文:
How to align button in responsive navbar?
问题
以下是您要翻译的内容:
我在“Navbar2.jsx”中有以下导航栏代码:
// 代码部分不要翻译
这个代码生成“响应式”导航栏,我的问题是移动菜单中的下拉菜单会将“X”按钮移到一边,我希望菜单只是在汉堡按钮下面“下拉”,而不会移动。
目前的外观如下:
[![点击此处输入图像说明][1]][1]
[![点击此处输入图像说明][2]][2]
我尝试在按钮的className中添加“absolute”,但没有改变任何东西。还尝试了“justify-end”,也没有改变任何东西。
我在GitHub上上传了完整的项目[这里][3]。
[1]: https://i.stack.imgur.com/85TQ4.png
[2]: https://i.stack.imgur.com/QK1aa.png
[3]: https://github.com/Mischa-bc/nextjs_template1
英文:
I have the following nav bar code in "Navbar2.jsx":
'use client';
import Link from 'next/link';
import Image from 'next/image';
import NavItem from './NavItem';
import { motion } from 'framer-motion';
import { navVariants } from '../utils/motion';
import styles from '../styles';
import { useState } from 'react';
import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
import { Disclosure, Menu, Transition } from '@headlessui/react';
const menu_list = [
{ name: 'Home', href: '/', current: true },
{ name: 'About', href: '/', current: false },
{ name: 'Contact', href: '/', current: false },
]
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
const Navbar2 = () => {
const [isOpen, setIsOpen] = useState(false);
return(
<motion.nav
variants={navVariants}
initial='hidden'
whileInView='show'
className={`${styles.xPaddings} py-8 relative z-30`}
>
<div className='absolute w-[50%] inset-0 gradient-01' />
<div className={`${styles.innerWidth} mx-auto flex justify-between gap-8`}>
<Link href='/' className='z-30 opacity-50 hover:opacity-100'>
<Image
src='/headset.svg'
alt='logo'
width={30}
height={30}
className='object-contain'
/>
</Link>
<h2 className='font-extrabold text-[24px] leading-[30px] text-white'>
TITLE
</h2>
<div className='hidden sm:flex space-x-4'>
{menu_list.map((item) => (
<Link href={item.href} className={classNames(
item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
'rounded-md px-3 py-2 text-sm font-medium'
)}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</Link>
))}
</div>
<div>
<button type='button' onClick={() => setIsOpen(!isOpen)} className='sm:hidden inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white'>
<span className='sr-only'>Open main menu</span>
{isOpen ? (
<XMarkIcon className="block h-6 w-6 " aria-hidden="true" />
) : (
<Bars3Icon className="block h-6 w-6" aria-hidden="true" />
)}
</button>
{isOpen && (
<div className='space-y-1 px-2 pb-3 pt-2'>
<div className='rounded-md ring-1 ring-black ring-opacity-5 overflow-hidden'>
{menu_list.map((item) => (
<Link href={item.href} key={item.name} className={classNames(
item.current ? 'bg-gray-900 text-white' : 'text-gray-300 hover:bg-gray-700 hover:text-white',
'block px-4 py-2 text-sm'
)}
aria-current={item.current ? 'page' : undefined}
>
{item.name}
</Link>
))}
</div>
</div>
)}
</div>
</div>
</motion.nav>
)
}
export default Navbar2;
Which produces the "responsive" navbar, the issue I'm having is that the dropdown menu on the mobile menu shifts the "X" button to the side, I want the menu to just "drop down" below the hamburger button which turns into an "X", without moving.
I tried adding "absolute" to the button className but it didn't change anything. Also tried "justify-end" which also didn't change anything.
I've uploaded the full project on git here
答案1
得分: 2
请考虑将<button>
的类从inline-flex
更改为flex
,以使其成为块级布局,然后使用ml-auto
类应用margin-left: auto
,以使<button>
始终右对齐:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-950">
<nav class="py-8 relative z-30">
<div class="absolute w-[50%] inset-0 gradient-01"></div>
<div class="mx-auto flex justify-between gap-8">
<a href="/" class="z-30 opacity-50 hover:opacity-100">
<img src="https://picsum.photos/30/30" alt="logo" width="30" height="30" class="object-contain" />
</a>
<h2 class="font-extrabold text-[24px] leading-[30px] text-white">
TITLE
</h2>
<div>
<button type="button" class="flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white ml-auto">
<span class="sr-only">Open main menu</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div class="space-y-1 px-2 pb-3 pt-2">
<div class="rounded-md ring-1 ring-black ring-opacity-5 overflow-hidden">
<a class="text-gray-300 hover:bg-gray-700 hover:text-white block px-4 py-2 text-sm">
{item.name}
</a>
</div>
</div>
</div>
</div>
</nav>
<!-- end snippet -->
这是您提供的HTML代码的翻译部分。
英文:
Consider changing the <button>
class from inline-flex
to flex
, so that it becomes a block layout, then apply margin-left: auto
with the ml-auto
class so that the <button>
will always be aligned to the right:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com"></script>
<body class="bg-slate-950">
<nav class="py-8 relative z-30">
<div class="absolute w-[50%] inset-0 gradient-01"></div>
<div class="mx-auto flex justify-between gap-8">
<a href="/" class="z-30 opacity-50 hover:opacity-100">
<img src="https://picsum.photos/30/30" alt="logo" width="30" height="30" class="object-contain" />
</a>
<h2 class="font-extrabold text-[24px] leading-[30px] text-white">
TITLE
</h2>
<div>
<button type="button" class="flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white ml-auto">
<span class="sr-only">Open main menu</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="block w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div class="space-y-1 px-2 pb-3 pt-2">
<div class="rounded-md ring-1 ring-black ring-opacity-5 overflow-hidden">
<a class="text-gray-300 hover:bg-gray-700 hover:text-white block px-4 py-2 text-sm">
{item.name}
</a>
</div>
</div>
</div>
</div>
</nav>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论