Создание мегаменю с помощью react-bootstrap

В данный момент я работаю над созданием мегаменю для одного из моих проектов. До сих пор мне удавалось создать отзывчивую панель навигации, однако требовалось создать раскрывающуюся панель со 100% шириной. Пробовал разные способы сделать его полной ширины, но ни один из них не работал.

Примечание. Все остальные ссылки Nav.Link должны быть такими же, как NavDropdown.

import React from "react";
import {
  Nav,
  Navbar,
  NavDropdown,
  Col,
  Row,
  Container,
  Dropdown,
} from "react-bootstrap";
import { Link } from "react-router-dom";
import "./home.css";
export function Home() {
  return (
    <div>
      <h1>Home page</h1>
      <Navbar collapseOnSelect expand = "lg" bg = "dark" variant = "dark">
        <Container>
          <Navbar.Toggle aria-controls = "responsive-navbar-nav" />
          <Navbar.Collapse id = "responsive-navbar-nav">
            <Nav className = "me-auto">
              <Nav.Link href = "#pricing">shoes</Nav.Link>
              <Nav.Link href = "#features">handbags</Nav.Link>
              <Nav.Link href = "#pricing">jewelry & accessaories</Nav.Link>
              <Nav.Link href = "#pricing">men</Nav.Link>
              <Nav.Link href = "#pricing">kids</Nav.Link>
              <Nav.Link href = "#pricing">home</Nav.Link>
              <Nav.Link href = "#pricing">sale</Nav.Link>

              <NavDropdown
                // className = "pr-2 py-2 align-text-top"
                title = "women"
                id = "basic-nav-dropdown"
              >
                <Container className = "eventsNav pt-0 mt-0">
                  <Row>
                    <Col xs = "12" md = "4" className = "text-left">
                      <Dropdown.Header>Catering</Dropdown.Header>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link" role = "button">
                            Corporate
                          </a>
                        </Link>
                      </Dropdown.Item>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link" role = "button">
                            Private
                          </a>
                        </Link>
                      </Dropdown.Item>
                      <Dropdown.Divider />
                      <Dropdown.Header>
                        {/* <FontAwesomeIcon
                          color = "black"
                          icon = {"chalkboard-teacher"}
                          size = "1x"
                          className = "pr-1"
                        /> */}
                        {"  "}
                        Classes
                      </Dropdown.Header>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link" role = "button">
                            Barista 101
                          </a>
                        </Link>
                      </Dropdown.Item>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link" role = "button">
                            History of Coffee
                          </a>
                        </Link>
                      </Dropdown.Item>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link" role = "button">
                            Intro to Cafe Snobbery
                          </a>
                        </Link>
                      </Dropdown.Item>
                      <Dropdown.Divider className = "d-md-none" />
                    </Col>

                    <Col xs = "12" md = "4" className = "text-left">
                      <Dropdown.Header>
                        {/* <FontAwesomeIcon
                          color = "black"
                          icon = {"building"}
                          size = "1x"
                          className = "pr-1"
                        /> */}
                        {"  "}
                        Rentals
                      </Dropdown.Header>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link" role = "button">
                            Fireside Room
                          </a>
                        </Link>
                      </Dropdown.Item>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link" role = "button">
                            Roasting Room
                          </a>
                        </Link>
                      </Dropdown.Item>
                      <Dropdown.Divider />
                      <Dropdown.Header>
                        {/* <FontAwesomeIcon
                          color = "black"
                          icon = {"sun"}
                          size = "1x"
                          className = "pr-1"
                        /> */}
                        {"  "}
                        Seasonal
                      </Dropdown.Header>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link" role = "button">
                            Coldbrew Night
                          </a>
                        </Link>
                      </Dropdown.Item>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link text-wrap" role = "button">
                            Campfire Coffee Class
                          </a>
                        </Link>
                      </Dropdown.Item>
                    </Col>
                    <Col xs = "12" md = "4" className = "text-left">
                      <Dropdown.Header>
                        {/* <FontAwesomeIcon
                          color = "black"
                          icon = {"building"}
                          size = "1x"
                          className = "pr-1"
                        /> */}
                        {"  "}
                        Rentals
                      </Dropdown.Header>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link" role = "button">
                            Fireside Room
                          </a>
                        </Link>
                      </Dropdown.Item>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link" role = "button">
                            Roasting Room
                          </a>
                        </Link>
                      </Dropdown.Item>
                      <Dropdown.Divider />
                      <Dropdown.Header>
                        {/* <FontAwesomeIcon
                          color = "black"
                          icon = {"sun"}
                          size = "1x"
                          className = "pr-1"
                        /> */}
                        {"  "}
                        Seasonal
                      </Dropdown.Header>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link" role = "button">
                            Coldbrew Night
                          </a>
                        </Link>
                      </Dropdown.Item>
                      <Dropdown.Item>
                        <Link href = "/">
                          <a className = "nav-link text-wrap" role = "button">
                            Campfire Coffee Class
                          </a>
                        </Link>
                      </Dropdown.Item>
                    </Col>
                  </Row>
                </Container>
              </NavDropdown>
            </Nav>
            <Nav>
              <Nav.Link href = "#deets">More deets</Nav.Link>
              <Nav.Link eventKey = {2} href = "#memes">
                Dank memes
              </Nav.Link>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
  );
}

.nav-link {
  font-size: 0.95rem;
}

#basic-nav-dropdown {
  font-size: 0.95rem;
}

#seeMoreLink {
  color: #607d8b;
}

#seeMoreLink:hover {
  color: black;
  font-weight: 400;
}
.dropdown-menu {
  padding: 1em;
}

.dropdown-item:hover {
  outline: none;
  box-shadow: none;
  background: none;
}
.dropdown-item a:hover {
  color: black;
}

.dropdown-item {
  height: 2em;
  padding-left: 0em;
}

.dropdown-header {
  font-weight: 600;
  padding-left: 0em;
}

.dropdown-menu {
  /* position: relative; */
  padding-top: 10px;
}

@media only screen and (min-width: 600px) {
  .eventsNav {
    position: absolute;
    left: -100px;
    background: #eaafc8 !important;
    background: -webkit-linear-gradient(to right, #eaafc8, #654ea3) !important;
    background: linear-gradient(to right, #eaafc8, #654ea3) !important;

    width: 44em;
    padding-bottom: 1em;
  }
}

Ожидаемый результат

Текущая реализация

Спасибо и всего наилучшего

javascript css reactjs bootstrap-5 react-bootstrap

14.01.2023 18:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Nav.Dropdown устанавливает position: relative; на nav-item (Nav.Link). Поскольку у dropdown-menu есть position: absolute;, он будет расположен относительно nav-item.

Делать:

.nav-item.dropdown {
  position: inherit;
}

.dropdown-menu {
  width: 100%;
  transform: translate(0px, 70px); /* change numbers for your layout */
}

Рекомендуется быть более конкретным с селекторами CSS, чтобы не влиять на другие раскрывающиеся списки на вашей странице.

Причина transform заключается в том, что реализация выпадающего списка React-Bootstrap и то, как они расположены, отличаются от Bootstrap. Поэкспериментируйте с позицией dropdown-menu с помощью инструментов разработчика, а затем примените изменения в собственной таблице стилей.

Также должна быть возможность добавить position: relative; к nav, а затем расположить dropdown-menu под ним. Зависит от вашего макета.

Вот как это делается в Bootstrap (5.3), JSFiddle. Достаточно просто удалить класс .dropdown из nav-item и установить width: 100%; в dropdown-menu.

Большое спасибо @Cooleronie за помощь в решении моей проблемы, Ваш подход работает как шарм ..

— 16.01.2023 07:35

15.01.2023 23:55