Drop down on hover inside of mobile drop down menu

0

To whom who can help,

I followed a video tutorial on how to create a navbar with a drop down menu when hovering over ‘work’ in navbar. I was able to get this part, but the video tutorial did not explain how to do the same when in mobile view if I were to click ‘work’ within the mobile drop down menu and now im pretty lost.

Can anyone help figure out what I should be adding within my code to be able to hover over ‘work’ within drop down to view the same li’s being mapped?

(or should it be click because you cant hover a mouse pointer when using an iphone while viewing general drop downs on websites?)

NAVBAR2 JSX

// REACT:
import { useState } from 'react'

// ROUTER:
import { Link } from 'react-router-dom'

// COMPONENTS:
import DropDown from './DropDown'

//IMGS:
// import logoIcon from '../../imgs/CBMedia_White.png' -- netlify told you to get rid of es lint errors in order to deploy, buy you might need this. Keep that in mind

// CSS:
import './NavBar2.css' 

// NAVBAR2:
export default function NavBar2() {
  const [click, setClick] = useState(false)
  const [dropdown, setDropdown] = useState(false)

  const handleClick = () => setClick(!click)
  const closeMobileMenu = () => setClick(false)

  const onMouseEnter = () => {
    if (window.innerWidth < 960) {
      setDropdown(false)
    } else {
      setDropdown(true)
    }
  }

  const onMouseLeave = () => {
    if (window.innerWidth < 960) {   
      setDropdown(false)
    } else {
      setDropdown(false)
    }
  }

  return (
    <>

      <nav className='navbar'>

        <div className='logoBox'>
          <Link to='/' className='navbar-logo'>Chris Blossom Media</Link>
        </div>

        <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='/services' className='nav-links' onClick={closeMobileMenu }>Services</Link></li>
          <li className='nav-item' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}><Link to='/work' className='nav-links' onClick={closeMobileMenu }>Work <i className='fas fa-caret-down'/></Link>{dropdown && <DropDown />}</li>
          <li className='nav-item'><Link to='/reviews' className='nav-links' onClick={closeMobileMenu }>Reviews</Link></li>
          <li className='nav-item'><Link to='/about' className='nav-links' onClick={closeMobileMenu }>About</Link></li>
          <li className='nav-item'><Link to='/contact' className='nav-links' onClick={closeMobileMenu }>Contact</Link></li>
        </ul>

      </nav>

    </>
)
}

NAVBAR2 CSS

/* NAVBAR ----------------> */
.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;
}

.logoBox {
  width: 45%;
}

.navbar-logo {
  color: #fff;
  align-self: center;
  margin-left: 20px;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
  width: 400px;
}

.menu-icon {
  display: none;
}


.mobileShow img {
  width: 50px;
  margin-top: 5px;
}

.fa-firstdraft {
  margin-left: 0.5rem;
  font-size: 1.6rem;
}

.nav-menu {
  display: grid;
  grid-template-columns: repeat(5, auto);
  grid-gap: 10px;
  list-style: none;
  text-align: center;
  width: 70vw;
  justify-content: end;
  margin-right: 2rem;
}

.nav-item {
  display: flex;
  align-items: center;
  height: 80px;
}

.nav-links {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
}

.nav-links:hover {
  background: rgb(173, 173, 173);
  border-radius: 4px;
  transition: all 0.2s ease-out;
}

.fa-bars {
  color: #fff;
}

.nav-links-mobile {
  display: none;
}


@media screen and (max-width: 960px) {
  .navbar {
    justify-content: space-between;
  }
  
  .NavbarItems {
    position: relative;
  }

  .nav-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 60vh;
    position: absolute;
    top: 60px;
    left: -180%;
    opacity: 1;
    transition: all 0.5s ease;
  }

  .nav-menu.active {
    background: #242222;
    left: 0;
    opacity: 1;
    transition: all 0.5s ease;
    z-index: 1;
    padding-left: 0px;
  }

  .nav-links {
    text-align: center;
    padding: 2rem;
    width: 100%;
    display: table;
  }

  .nav-links:hover {
    background: rgb(173, 173, 173);
    border-radius: 0;
  }

  .logoBox {
    width: 90%;
  }

  .navbar-logo {
    /* position: absolute; */
    top: 0;
    left: -75px;
    transform: translate(25%, 50%);
  }

  .menu-icon {
    display: block;
    position: absolute;
    margin-top: 5px;
    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;
    padding: 1.5rem;
    margin: 2rem auto;
    border-radius: 4px;
    width: 80%;
    background: #1888ff;
    text-decoration: none;
    color: #fff;
    font-size: 1.5rem;
  }

  .nav-links-mobile:hover {
    background: #fff;
    color: #1888ff;
    transition: 250ms;
  }

}

@media screen and (max-width: 420px) {
.navbar-logo {
  font-size: 22px;
}
}

DROPDOWN JSX

// REACT:
import { useState } from 'react'

// ROUTER:
import { Link } from 'react-router-dom'

// DATA:
import { MenuItems } from './MenuItems' // this deconstructs and finds the variable holding the data

// CSS:
import './DropDown.css' 

export default function DropDown() {
  const [click, setClick] = useState(false)

  const handleClick = () => setClick(!click)

  return (
    <>
      <ul onClick={handleClick} className={click ? 'dropdown-menu clicked' : 'dropdown-menu'}>
        {MenuItems.map((item, index) => {
          return (
            <li key={index}><Link className={item.cName} to={item.path} onClick={() => setClick(false)}>{item.title}</Link></li>
          )
        })}
      </ul>
    </>
  )
}

DROPDOWN CSS

.dropdown-menu {
  width: 200px;
  position: absolute;
  top: 80px;
  right: 260px;
  list-style: none;
  text-align: start;
}

.dropdown-menu li {
  background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
  cursor: pointer;
}

.dropdown-menu li:hover {
  background: rgb(173, 173, 173);
}

.dropdown-menu.clicked {
  display: none;
}

.dropdown-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: white;
  padding: 16px;
}
  • you can make use of “onMouseEnter” and “onMouseLeave” effect on that “work” div
  • on “enter” it will show those “dropdowns” and on “leave” they will be “removed”

see of that worksout on your side, happy coding :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.