Kevin Powell - Community•16mo ago

Navigation list sliding from hamburger menu.

Hey guys, getting desperate again with probably trivial question, but hopefully someone could help me understand what can i do here: I am trying to build sliding navigation bar on mobile version of my react-app by using hamburger menu. I also want it to be smooth animated. I can't figure out how to properly do it. Usually in tutorials they do it either with top: -100% to top:0 by using parent position: relative and child position: absolute and they slide from top of the browser (or translateY). However in my case i have 2 top elements that are positioned above the navigation menu, thus they slide in through them and also background of container div isn't applying its background color when button is active. I want it to slide below logo and hamburger button, not from the top of the browser moving through it and also extending background of div container that wraps both header and nav I am working in react, so i am not really sure if i should show my components and css modules, but i built something similar on js fiddle: https://jsfiddle.net/pnvfrhw8/ in attached screenshots is my actual app with hamburger button active and not. But i am missing smooth sliding animation. I control activation through adding .open class to the <ul> parent component of links. In terms of box hierarchy : its almost same as in jsfiddle:

<div class='SectionBgColor'>
  <header>
     <Logo/>
     <HamburgerButton/>
  <header/>
  <Nav/>
<div>

<div class='SectionBgColor'>
  <header>
     <Logo/>
     <HamburgerButton/>
  <header/>
  <Nav/>
<div>

I also tried position absolute and relative, but i am getting really strange things with that (attached screenshot with code)

sliding menu issue - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Navigation list sliding from hamburger menu.