>source

모바일 친화적 버전의 react.js 스크립트에서 드롭다운 메뉴에 대한 UL을 만들었습니다. 그러나 메뉴를 아래로 드롭하면 목록이 하향식이 아닌 상향식에서 시작됩니다. 어떤 아이디어? 사진과 일부 code를 첨부했습니다.

NAVAR 구성요소 .JS 파일

import React, {useState, useEffect} from 'react';
import { Link } from 'react-router-dom';
import { Button } from './Button';
import './Navbar.css';
function Navbar() {
    const [click, setClick]= useState(false);
    const [button, setButton]= useState(true);
    const handleClick= ()=> setClick(!click);
    const closeMobileMenu= ()=> setClick(false);
    const showButton= ()=> {
        if(window.innerWidth <= 960){
            setButton(false);
        } else {
            setButton(true);
        }
    };
    useEffect(()=> {
        showButton();
    },[]);
    window.addEventListener('resize', showButton);
    return (
        <>            <nav className="navbar">                <div className="navbar-container">                    <Link to="/" className='navbar-logo' onClick={closeMobileMenu}>                        RentalsFriend&amp;
nbsp;
                        <i className="fas fa-home"></i>                    </Link>                    <div className="menu-icon" onClick={handleClick}>                        <i className={click ? 'fas fa-times' : 'fas fa-bars'} />                    </div>                    <ul className={click ? 'nav-menu active' : 'nav-menu'}>                        <li className='nav-item'>                            <Link to='/listings' className='nav-links' onClick={closeMobileMenu}>                                Listings
                            </Link>                        </li>                        <li className='nav-item'>                            <Link to='/landlords' className='nav-links' onClick={closeMobileMenu}>                                Landlords
                            </Link>                        </li>                        <li className='nav-item'>                            <Link to='/services' className='nav-links' onClick={closeMobileMenu}>                                Services
                            </Link>                        </li>                        <li className='nav-item'>                            <Link to='/sign-up' className='nav-links-mobile' onClick={closeMobileMenu}>                                Sign Up
                            </Link>                        </li>                    </ul>                    {button &amp;
&amp;
 <Button buttonStyle='btn--outline'>SIGN UP</Button>}
                </div>            </nav>        </>    );
}
export default Navbar

**

  • .CSS 파일

**

.navbar {
    background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top: 0;
    z-index: 999;
  }
  .navbar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    max-width: 1500px;
  }
  .navbar-logo {
    color: #fff;
    justify-self: start;
    margin-left: 20px;
    cursor: pointer;
    text-decoration: none;
    font-size: 2rem;
    display: flex;
    align-items: center;
  }
  .fa-typo3 {
    margin-left: 0.5rem;
    font-size: 1.8rem;
  }
  .nav-menu {
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-gap: 10px;
    list-style: none;
    text-align: center;
    width: 60vw;
    justify-content: end;
    margin-right: 2rem;
  }
  .nav-item {
    height: 80px;
  }
  .nav-links {
    color: #fff;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0.5rem 1rem;
    height: 100%;
  }
  .nav-links:hover {
    border-bottom: 4px solid #fff;
    transition: all 0.2s ease-out;
  }
  .fa-bars {
    color: #fff;
  }
  .nav-links-mobile {
    display: none;
  }
  .menu-icon {
    display: none;
  }
  @media screen and (max-width: 960px) {
    .nav-item {
      position: relative;
    }
    .nav-menu {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 90vh;
      position: absolute;
      top: 80px;
      left: -100%;
      opacity: 1;
      transition: all 0.5s ease;
    }
    .nav-menu.active {
      background: #242222;
      left: 0;
      opacity: 1;
      transition: all 0.5s ease;
      z-index: 1;
    }
    .nav-links {
      text-align: center;
      padding: 2rem;
      width: 100%;
      display: table;
    }
    .nav-links:hover {
      background-color: #fff;
      color: #242424;
      border-radius: 0;
    }
    .navbar-logo {
      position: absolute;
      top: 0;
      left: 0;
      transform: translate(25%, 50%);
    }
    .menu-icon {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      transform: translate(-100%, 60%);
      font-size: 1.8rem;
      cursor: pointer;
    }
    .fa-times {
      color: #fff;
      font-size: 2rem;
    }
    .nav-links-mobile {
      display: block;
      text-align: center;
      margin: 2rem auto;
      border-radius: 4px;
      width: 80%;
      text-decoration: none;
      font-size: 1.5rem;
      background-color: transparent;
      color: #fff;
      padding: 14px 20px;
      border: 1px solid #fff;
      transition: all 0.3s ease-out;
    }
    .nav-links-mobile:hover {
      background: #fff;
      color: #242424;
      transition: 250ms;
    }
  }

드롭다운이 열린 작은 크기의 탐색 모음

.nav-menu justify-content 확인: end; 재산.

Bojan Bedrač2021-11-25 12:54:11

@BojanBedrač 당신은 신입니다. 감사합니다.

Megil2021-11-25 12:54:11

천만에요. Flexbox 마스터링을 위한 이 무료 과정을 추천할 수 있습니다. flexbox.io

Bojan Bedrač2021-11-25 12:54:11
  • 이전 Azure Automation Runbook이 Webhook "매개변수 목록에 인수 누락"으로 트리거되지 않음
  • 다음 소스에 고유한 레code가 없는 DBT 스냅샷