/*csslint adjoining-classes: false, box-model:false*/Menus are vertical by default. Minimal default styling and low-specificity selectors make them easy to customize.
.cw-menu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.cw-menu-fixed {
position: fixed;
left: 0;
top: 0;
z-index: 3;
}
.cw-menu-list,
.cw-menu-item {
position: relative;
}
.cw-menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.cw-menu-item {
padding: 0;
margin: 0;
height: 100%;
}
.cw-menu-link,
.cw-menu-heading {
display: block;
text-decoration: none;
white-space: nowrap;
}To create a horizontal menu, add the cw-menu-horizontal class name.
Initial menus should be inline-block so that they are horizontal
.cw-menu-horizontal {
width: 100%;
white-space: nowrap;
}
.cw-menu-horizontal .cw-menu-list {
display: inline-block;
}
.cw-menu-horizontal .cw-menu-item,
.cw-menu-horizontal .cw-menu-heading,
.cw-menu-horizontal .cw-menu-separator {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}We recommend enabling submenus via JavaScript to enable accessibility. To help
get you started, an example script written in vanilla JS provides ARIA
support, limited submenu arrow-key navigation, and the ability to dismiss
menus with an outside event or the ESC key. But you may wish to go further by
adding edge detection, comprehensive arrow-key navigation, and polyfills for
compatibility with old browsers.
Even with JavaScript in place, you still might want to display submenus on
hover. Just add cw-menu-allow-hover to the cw-menu-has-children list
item. This can be nice for desktop users and provides a fallback for users
with no JavaScript.
.cw-menu-item .cw-menu-item {
/* Submenus should still be display: block; */
display: block;
}
.cw-menu-children {
display: none;
position: absolute;
left: 100%;
top: 0;
margin: 0;
padding: 0;
z-index: 3;
}
.cw-menu-horizontal .cw-menu-children {
left: 0;
top: auto;
width: inherit;
}
.cw-menu-allow-hover:hover > .cw-menu-children,
.cw-menu-active > .cw-menu-children {
display: block;
position: absolute;
}
.cw-menu-horizontal .cw-menu-has-children > .cw-menu-link:after {
/* Horizontal Menus - show the dropdown arrow */
content: "\25BE";
}The same construct used to create dropdowns works in vertical menus as well. You may nest submenus, but keep in mind that complex menus can present usability challenges on small screens.
.cw-menu-has-children > .cw-menu-link:after {
/* Vertical Menus - show the dropdown arrow */
padding-left: 0.5em;
content: "\25B8";
font-size: small;
}To create a scrollable vertical menu, limit the height of your menu, and then
add the cw-menu-scrollable class name. The menu items can be scrolled or
flicked. Submenus are not supported.
.cw-menu-scrollable {
overflow-y: scroll;
overflow-x: hidden;
}
.cw-menu-scrollable .cw-menu-list {
display: block;
}To create a scrollable horizontal menu, add the cw-menu-scrollable class
name. When there isn't enough room, the menu items can be scrolled or flicked.
Dropdown menus are not supported.
.cw-menu-horizontal.cw-menu-scrollable .cw-menu-list {
display: inline-block;
}
.cw-menu-horizontal.cw-menu-scrollable {
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
/* a little extra padding for this style to allow for scrollbars */
padding: .5em 0;
}
.cw-menu-horizontal.cw-menu-scrollable::-webkit-scrollbar {
display: none;
}.cw-menu-separator {
background-color: #ccc;
height: 1px;
margin: .3em 0;
}
.cw-menu-horizontal .cw-menu-separator {
width: 1px;
height: 1.3em;
margin: 0 .3em ;
}
.cw-menu-heading {
text-transform: uppercase;
color: #565d64;
}
.cw-menu-link {
color: #777;
}
.cw-menu-children {
background-color: #fff;
}Mark a selected list element by adding the cw-menu-selected class to the
list element. To mark a link as disabled, add an <a> element with the
cw-menu-disabled class name. Disabled items appear faded and do not inherit
hover styles.
.cw-menu-link,
.cw-menu-disabled,
.cw-menu-heading {
padding: .5em 1em;
}
.cw-menu-disabled {
opacity: .5;
}
.cw-menu-disabled .cw-menu-link:hover {
background-color: transparent;
}
.cw-menu-active > .cw-menu-link,
.cw-menu-link:hover,
.cw-menu-link:focus {
background-color: #eee;
}
.cw-menu-selected .cw-menu-link,
.cw-menu-selected .cw-menu-link:visited {
color: #000;
}Check out Pure's Layout Examples to see how you can use Pure as a foundation for more complex menus, such as: