如何在响应式导航栏中对齐按钮?

huangapple go评论75阅读模式
英文:

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.

Here is how it looks now:
如何在响应式导航栏中对齐按钮?

如何在响应式导航栏中对齐按钮?

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 &lt;button&gt; 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 &lt;button&gt; will always be aligned to the right:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-html -->

&lt;script src=&quot;https://cdn.tailwindcss.com&quot;&gt;&lt;/script&gt;

&lt;body class=&quot;bg-slate-950&quot;&gt;
  &lt;nav class=&quot;py-8 relative z-30&quot;&gt;
    &lt;div class=&quot;absolute w-[50%] inset-0 gradient-01&quot;&gt;&lt;/div&gt;
    &lt;div class=&quot;mx-auto flex justify-between gap-8&quot;&gt;
      &lt;a href=&quot;/&quot; class=&quot;z-30 opacity-50 hover:opacity-100&quot;&gt;
        &lt;img src=&quot;https://picsum.photos/30/30&quot; alt=&quot;logo&quot; width=&quot;30&quot; height=&quot;30&quot; class=&quot;object-contain&quot; /&gt;
      &lt;/a&gt;
      &lt;h2 class=&quot;font-extrabold text-[24px] leading-[30px] text-white&quot;&gt;
        TITLE
      &lt;/h2&gt;
      &lt;div&gt;
        &lt;button type=&quot;button&quot; class=&quot;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&quot;&gt;
          &lt;span class=&quot;sr-only&quot;&gt;Open main menu&lt;/span&gt;
          &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke-width=&quot;1.5&quot; stroke=&quot;currentColor&quot; class=&quot;block w-6 h-6&quot;&gt;
            &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; d=&quot;M6 18L18 6M6 6l12 12&quot; /&gt;
          &lt;/svg&gt;
        &lt;/button&gt;
        &lt;div class=&quot;space-y-1 px-2 pb-3 pt-2&quot;&gt;
          &lt;div class=&quot;rounded-md ring-1 ring-black ring-opacity-5 overflow-hidden&quot;&gt;
            &lt;a class=&quot;text-gray-300 hover:bg-gray-700 hover:text-white block px-4 py-2 text-sm&quot;&gt;
              {item.name}
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月15日 10:19:03
  • 转载请务必保留本文链接:https://go.coder-hub.com/76478670.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定