mini.css's dropdown component is built to work well with the navigation bar, allowing users to add submenus to their menus. It is extremely lightweight and can be customized using the make-dropdown mixin provided in the _dropdown.scss partial file.
Definition
@mixin make-dropdown(
$nav-name,
$nav-link-name,
$dropdown-name,
$dropdown-left-margin,
$dropdown-font-size)
Parameters
- $nav-name : The class name for the navigation bar. [1]
- $nav-link-name : The class name for the navigation links of the navigation bar. [1]
- $dropdown-name : The class name for the dropdown element. [2]
- $dropdown-left-margin : The left margin of the dropdown element's contents. [3]
- $dropdown-font-size : The font size of the dropdown element's contents.
Notes:
- [1] : The values of $nav-name and $nav-link-name must match those specified in the navigation bar's definition, otherwise the dropdown element will not work properly.
- [2] : The value of $dropdown-name is used in two distinct elements of the component, namely the checkbox and the dropdown toggle.
- [3] : The value of $dropdown-left-margin will affect all open dropdown menus, as well as dropdown menus on mobile screens. It is suggested that you set this value to something different than 0 to visually represent the menu hierarchy in devices with smaller screens.
- This module will not work correctly unless the navigation module is enabled and properly initialized.
- Dropdowns will automatically adjust to the proper vertical orientation when the screen is small enough.
- Dropdowns will not open as a vertical panel on horizontal menus, but rather as a horizontal panel below the existing content.
- The behavior of dropdowns in large groups as well as in depths greater than 2 is undocumented as of yet. Please report any issues you encounter.
- Multiple dropdowns are supported using radio buttons instead of checkboxes. However, there is currently a problem with this behaviour regarding the layout of the page. Use of Javascript can help solve the problem, however there will be a more permanent fix for this specific problem.