Dropdown Menu

TUTORIAL LINK | HOME

A horizontal UL bar dropdown menu for medium and above screens
On small screens it goes to an accordion menu that opens from an icon
foundation responsive navigation
Foundation 6.4.1


RSD Build 2349 foundation 6.4.1

If you followed the coffecup tutorial the class dropdown from the foundation default classes is not added. They have vertical medium-horizontal and menu on the menus container. According to foundation that class needs to be in there as well. With this build that doesn't need to be added for the menu to work like it does for 2309 and earlier but I suggest to add it anyway. In case that creates issues with later builds.

When you have the sub menu dropdown selected it doesn't change the top linked text color and background. That is a CSS fix included in the tutorial.

A CSS option I add is some control over the sub menu panel. I like having those match the size of the text link when possible rather than the default 200px and it will expand for longer links. Also the option of controling that panels border size and color and to center that text rather than the default left alignment.

Placeholder Picture

The accordion

An option I add for these accordions is to make them so they open where a user is when they scroll down the page. That uses a fixed position on the column.

A way to work on your page at the lower breakpoint when using an accordion

The accordion repair for Build 2309 and under. The accordion menu for those builds need a CSS repair for the arrows.
That fix is in the tutorial if you still use those builds.

Placeholder Picture

A dynamic menu style for active pages

The example is the THIS PAGE link in the menu above.
I have it change to white and match the styles so you can use the menu to automatically see which page you are on.

It requires a jQuery script to do this in RSD so that is included in the tutorial.

Placeholder Picture

The dropdown menu alignment options

I put in the tutorial a few different ways to align the horizontal dropdown. The default is LEFT so there is also CENTER and RIGHT. Then when you center you can also use space between or like this example space around.

I also show you how you can make the menu links fill the space which might be an option you want to use. That uses a flex grow on the LI or list items.

For those of you that like a fixed horizontal menu as of this build we can now use the newly added "sticky" position.

Placeholder Picture