Advanced Dropdown Menu - React & CSS Animation Tutorial for Beginners

What people said

Recommends DzITC · 2020-09 · Stack Overflow · on “HTML & React JS: CSS design position problems. ( Content stuck in the corner )”

I'm trying to make a navigation bar with some components that should appear in the top right corner of the navbar. I'm pretty much just following a tutorial on [this video] . So basically the components are spawned in the top left corner, and they stack upon each other, what's the reason for that? Here's my code: CSS: :root { --bg: #242526; --bg-accent: #484a4d; --text-color: #dadce1; --nav-size: 60px; --border: 1px solid #474a4d; --border-radius: 8px; --speed: 500ms; } ul{ list-style: none; margin: 0; padding: 0; } a { color: var(--text-color); text-decoration: none; } .navbar { height: var(--nav-size); background-color: var(--bg); padding: 0 1rem; border-radius: var(--border); } .navbar-nav { m

Recommends Tomas Mota · 2021-01 · Stack Overflow · on “Hover "Drop Right" Menu”

My bad, try this video [this video] The dude copy's facebooks dropdown, that will show you how it's done and you learn. Let me know if it works

Recommends Kirsty Richmond · 2022-02 · Stack Overflow · on “React mobile nav won't close automatically when navigating to another route”

I have built a mobile nav following this [this video] tutorial which is a fantastic tutorial, however I am stuck. The mobile nav dropdown opens and closes no problem when clicking on the nav icon. However, when I click on a dropdown menu link and it navigates to another page, the mobile nav will stay open unless I manually close it myself. How can I get the mobile nav to close when the route has changed? I have a feeling its the Navbar file that isn't quite right! But I can't seem to get my head around it. Any suggestions would be great. Thank you. /// Navbar.jsx import { Alert, Stack } from '@mui/material' import React, { useContext, useState } from 'react' import '../../styles/nav.css' import {

Recommends Aykc · 2022-02 · Stack Overflow · on “Reactjs dropdown menu and reusable components”

I am following a tutorial to make a dropdown menu but I am stuck in the middle because instead of using the "props" keyword like The instructor did in the tutorial. I passed the props directly as arguments without props dot. When I wanted to implement {open && children} without props I got the Error that children are not defined This is the tutorial I am following, And the minute when I get the Error [this video] This is the NavItem.js component where I have the problem import React, { useState, useEffect } from 'react'; function NavItem({ icon, title, ...props }) { const [opened, setOpened] = useState(false); return ( <li className='nav-item'> <a href='#' target='' className='icon-button' onClic

Cites Christoffer Hennie · 2020-07 · Stack Overflow · on “React hide dropdown menu when lose focus”

I am following Fireship's Advanced Dropdown Menu [this video] video on YouTube. After I finished the video, I noticed that the menu stays open until the page reloads. Is there a way to make it disappear when it loses focus, for example when the user clicks outside the menu? Not only when the user clicks on the nav icon.

Cites Kirsty Richmond · 2022-02 · Stack Overflow · on “Mobile nav displaying clickable elements underneath dropdown”

I have created a mobile nav following this tutorial on youtube [this video] . The nav dropdown as show in this picture [LINK] is fully opaque and nothing behind dropdown shows through. However, only on the 'reviews list' page, where the sort by and add review elements are, the elements underneath the dropdown show and mess the mobile nav up, as shown here [LINK] . I am using React, MUI material icons [LINK] for the 'add' icon and MUI select for the sort and order by [LINK] . I have switched the add icon from MUI and replaced it with Fontawesome, but the issue still appears. I have also tried setting the Z-index of the dropdown to 1 and the Z-index of the add icon underneath to -1, but this only s

Cites LoyalPotato · 2022-04 · Stack Overflow · on “Why isn't the size increase animating with ngShow (angularjs)?”

I have this dropdown that I want the height to be animated. I'm using max-height to achieve this and it kinda works, but when it expands it won't do the transition. If I reduce the size (i.e. go back) then it transitions just fine. I have this pen [LINK] with the html and css (less) that I'm using. The animations aren't working there but the code is the same as what I have in the next gif. [LINK] The contents of the first menu are "dynamic" as in they can be either 1, 2 or 3, hence the different heights that I have defined with different classes. Here is the css: .content-management-dropdown { position: absolute; margin-top: 1rem !important; top: 2; right: 2.5rem; width: 17rem; box-shadow: 0

Cites Coder4Fun250 · 2025-06 · Stack Overflow · on “Dropdown's height isn't changed smoothly, instead, it jumps from one state to another”

I'm going through a navbar tutorial on youtube ( [this video] ) - the link is with the timecode. It should work like at this moment in the vid calcHeight should do the work but it doesn't. The navbar changes abruptly like at [this video] It's a relatively old tutorial, react changed a bit and, as far as I know, we need to now add a ref. Even after adding dropdownRef it still doesn't work. It messed up the result even more. Now the height of menu stays the same. function DropdownMenu() { const [activeMenu, setActiveMenu] = useState("main"); const [menuHeight, setMenuHeight] = useState(null); const dropdownRef = useRef(null); function calcHeight() { const height = dropdownRef.current.offsetHeight; setMe