Skip to content

[css-ui-4] none value for nav-up, nav-right, nav-down, nav-left properties #1822

@jihyerish

Description

@jihyerish

It would be nice to add none value for disabling the directional navigation.

The directional focus navigation properties, nav-up, nav-right, nav-down, nav-left can be used for the responsive grid layout.
In this case, the specified directional navigation needs to be changed, or be disabled.

For example, here is a grid layout like this in a wide screen:
image

and it will change in the mobile as:

image

#content is specified as:

#content {
  nav-right: #menu;
  nav-up: #header;
  nav-down: #footer;
}
 
@media only screen and (max-width: 750px) {
  #content {
    nav-up: #menu;
    nav-down: #footer;
  }
}

But, in the mobile, it won't have the focus navigation to the right.
If #menu is given to nav-right, it may be an unintentional navigation.
The directional focus navigation would be changed to disable the right-side focus navigation:

#content {
  nav-right: #menu;
  nav-up: #header;
  nav-down: #footer;
}
 
@media only screen and (max-width: 750px) {
  #content {
    nav-right: none;
    nav-up: #menu;
    nav-down: #footer;
  }
}

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions