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
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
In terms of box hierarchy : its almost same as in jsfiddle:
I also tried position absolute and relative, but i am getting really strange things with that (attached screenshot with code)
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% top:0position: relativeposition: absolutetranslateYHowever 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<ul>In terms of box hierarchy : its almost same as in jsfiddle:
I also tried position absolute and relative, but i am getting really strange things with that (attached screenshot with code)
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
