CSS Grade Menu

Last updated: 1 month ago

Category: Navigation

The grade menu is a simplified version of the Menu module. Unlike typical components or modules, grade is built with native CSS+HTML, allowing users to insert custom content while preserving its core structure, and can be integrated into custom modules or components.

Introduction

For implementing an unlimited-level menu without fancy effects using pure CSS, this framework's grade menu is designed with these key points:

1. Uses ul+li to build hierarchical relationships
2. Uses hover pseudo-class for mouse interaction to show/hide

Users can encapsulate the menu into other modules or plugins. The framework already includes powerful menu modules like Menu, Navigation and Dropdown.

Basic Usage

Since the grade menu is built with pure CSS, it has specific format requirements:

1. Place root menu name in _grade node
2. Use rep=host node for host container (optional)
3. Build hierarchy with ul+li
4. Add _grade-wrap class to root ul, with at least rep=head and rep=label tags in submenus
5. Use _reset class to clear default ul+li styles

States

Submenus have three states: normal, selected, and disabled. Add selected or disabled attributes to rep=head node.

Host Node

If a host node is marked with rep=host, any internal node with rep=arrow will display an indicator animation when the menu expands or collapses.

Adding the selected attribute to the host node will show an indicator light effect; the indicator always appears directly below the host node at the very bottom.

In the selected state, if you want to use the host menu's indicator light effect, you need to include a rep=label tag.

Using Icon Indicators

rep=icon represents a font icon.

Using Indicator Images

Supports three types of indicator images:

• rep=disk: Circular image
• rep=cube: Square image
• rep=image: Regular image

Multi-line Content

Submenu content is not limited to a single line - it can display two or more lines. For multi-line text truncation, use the _ell-* style class, where * can be a value from 1 to 9. _ell indicates single-line truncation.

For detailed usage of truncation styles, click here.

Center Alignment

Menu content is left-aligned by default. For more uniform content layouts, center alignment can be used by applying the _a-c style class to the root node (where a=align, c=center).

For detailed usage of text alignment styles, click here.

Positioning

Default position is bottom. Other options:

• placement=bottom-start: Bottom right
• placement=bottom-end: Bottom left
• placement=right: Right side

Dropdown Panel

For custom menus, replace ul+li with div tags in _grade-wrap. Supports placement attribute.

Menu Group

Wrap multiple _grade nodes in _group-grade container to create a menu group.

Always Expanded

For better mobile experience (since hover doesn't work well), add expanded attribute to root node to keep menu always open. Expanded menus show hierarchy with indentation.