Just a very quick tutorial on how to create a dropdown (like a drop down menu), so that when you expand the dropdown the space below it isn’t pushed down.
Like this (all the Other actions below contain a drop down menu – see next image)
When I expand one of the menus I don’t want the row below pushed down. I want the dropdown to overlay and not alter the space below it (ie not push the row below down). Like below:
The way this is done is but having the menu that it opens in a wrapper (with position set to relative ). Then setting the display of the menu ( position: absolute , which is absolute to its parent the wrapper , and placing it as required ).
e.g. heres a simple example
Here is some text that sites behind the menu its not pushed down!
You just need to write the js (or css) to show / hide the red menu when the button is clicked. And you have a nice drop down.
Here the code:
<div style="position: relative;"> <button>make a menu dropdown</button> <div style="position: absolute; border: 1px solid green; background-color: red;"> menu item 1<br> menu item 2<br> menu item 3<br> </div> </div>