Dropdowns are good for many things, Rob Hall discovers — just not his Mother-In-Law’s bloomers.
The latest addition to DeFliGra’s stacks is called DropDown2GO. It is a dropdown menu for those situations where you need to guide your visitor to pages that are not included in the navigation bar.
DropDown2GO is well thought out and has a couple of interesting features. It may be used simply as a button or as a dropdown. When used as a dropdown, you can define how many sub-menus it should display and set alternating colours for them, in addition to the colour of the button itself. Unlinked text that you might add to the submenus is coloured the same throughout, so be sure to choose a colour that contrasts with the menus both in their inactive state and in their hover state.
Stacks can be added to both the top and the bottom of DropDown2GO so that further text or an image may be added to the menu – an unusual feature. Optionally, the menu items can be deactivated, leaving just the two stack panels visible. The dropdown function may also be deactivated – DD2G then becomes a simple link panel.
DropDown2GO can be set to float on the page above other content, where it will retain its position when the page is scrolled.
Font awesome compatibility is built into the stack so that if you would like to display icons in addition to or instead of the button text, simply add the code into the box provided. You’ll need to visit the FontAwesome cheatsheet to find the codes, not the icons page.
DropDown2GO is responsive and can be set to display or hide, depending on the viewport width or height. It is also possible to merely hide the stacks that you’ve added above and below the menus. A further option is available to make alternate panels become visible on mobile devices.
Once more, Tommy has supplied extensive options for custom CSS code. DropDown2GO is a versatile stack that will prove to be very useful in a number of situations.