Today I am going to show you a few different ways to create drop down menu items. My task was to create a drop down menu item based on a mockup. The mockup showed the menu sliding down without its height changing (this is important). I realize that makes it like the TARDIS or some sort of magic bag where you wonder how the main menu item could possibly hold such a large drop down menu inside (you'll see what I mean in the example).
The first menu item uses jQuery to create a sliding drop down menu. There is very minimal code (that you have to write anyway) and it works well. The only problem is it doesn't meet my requirement that it slide down without its height changing. It creates the effect by increasing the height of the object rather than truly sliding it down.
jQuery can do this but you need to use the animate() function and you might need to work with clip-path and overflows.
The second menu uses CSS transitions and some Javascript to handle the click and toggling of classes. This one works pretty well but you really need to know the height of the drop down menu beforehand so you can adequately hide it behind the main menu. You can probably get around this using some more Javascript if you are so inclined. You also have to keep it visible (but behind the main menu) because CSS doesn't like transitioning something after you change the display from none. If you do this, be sure you set the aria-hidden attribute so screen readers don't get confused.
The third menu is just pure Javascript. I make use of the hidden attribute and toggle that on/off for display and then set the top using style.top. Because I have the position set to relative, getBoundingClientRect() doesn't behave as I'd like and setting position: absolute adds some more styling headaches. That is why I just use style.top and replace 'px' with nothing and make sure it is an int to get where the top actually is.
Hope you enjoy!
See the Pen Sliding Menu Item by Galastun (@galastun) on CodePen.
No comments:
Post a Comment