纵向菜单
菜单默认是垂直的。最小的默认样式和low-specificity选择器使其容易定制。默认情况下,菜单项占用100%的容器的宽度,所以你可能希望限制菜单宽度或设置菜单显示:inline-block。
<style>
.custom-restricted-width {
/* To limit the menu width to the content of the menu: */
display: inline-block;
/* Or set the width explicitly: */
/* width: 10em; */
}
</style>
<div class="pure-menu custom-restricted-width">
<span class="pure-menu-heading">Yahoo Sites</span>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
<li class="pure-menu-heading">More Sites</li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Games</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">OMG!</a></li>
</ul>
</div>横向菜单
添加pure-menu-horizontal 可实现横向菜单效果。
<div class="pure-menu pure-menu-horizontal">
<a href="#" class="pure-menu-heading pure-menu-link">BRAND</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
</ul>
</div>选中和禁用菜单
选中菜单class： pure-menu-selected，禁用菜单class： pure-menu-disabled 。菜单禁用后不继承悬浮样式。
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Selected</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Normal</a></li>
<li class="pure-menu-item pure-menu-disabled">Disabled</li>
</ul>
</div>Dropdowns
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 pure-menu-allow-hover to the
pure-menu-has-children list item. This can be nice for desktop
users and provides a fallback for users with no JavaScript.
<div class="pure-menu pure-menu-horizontal">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
<a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
</ul>
</li>
</ul>
</div>下拉菜单
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.
<div class="pure-menu custom-restricted-width">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Flickr</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
<li class="pure-menu-item pure-menu-has-children">
<a href="#" id="menuLink1" class="pure-menu-link">More</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Autos</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
<li class="pure-menu-item pure-menu-has-children">
<a href="#" id="menuLink1" class="pure-menu-link">Even More</a>
<ul class="pure-menu-children">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Foo</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Bar</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Baz</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>Scrollable Horizontal Menu
To create a scrollable horizontal menu, add the pure-menu-scrollable class name. When
there isn't enough room, the menu items can be scrolled or flicked. Dropdown menus are not supported.
<div class="pure-menu pure-menu-horizontal pure-menu-scrollable">
<a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Autos</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Beauty</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Movies</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Small Business</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Cricket</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tech</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">World</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Support</a></li>
</ul>
</div>Scrollable Vertical Menu
To create a scrollable vertical menu, limit the height of your menu, and then add the pure-menu-scrollable class name. The menu items can be scrolled or flicked. Submenus are not supported.
<style>
/* Customization to limit height of the menu */
.custom-restricted {
height: 160px;
width: 150px;
border: 1px solid gray;
border-radius: 4px;
}
</style>
<div class="pure-menu pure-menu-scrollable custom-restricted">
<a href="#" class="pure-menu-link pure-menu-heading">Yahoo</a>
<ul class="pure-menu-list">
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Flickr</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Messenger</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Sports</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Finance</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Autos</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Beauty</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Movies</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Small Business</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Cricket</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tech</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">World</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">News</a></li>
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Support</a></li>
</ul>
</div>响应菜单隐藏
Check out our Layout Examples to see how you can use Pure as a foundation for more complex menus, such as:
- Responsive Vertical Menu, which collapses behind a hamburger, similar to the menu on this Pure website.
- Responsive Horizontal-Scrollable Menu, which tucks out of the way on small screens.
- Responsive Horizontal-to-Vertical Menu, which slides out of view.
