Pure
  • 开始使用
  • 布局
  • 基础
  • 网格
  • 表单
  • 按钮
  • 表格
  • 菜单
  • 工具
  • 自定义
  • 扩展
  • 版本

菜单

用于菜单的简单 CSS。

垂直菜单

菜单默认垂直排列。最小的默认样式和低特异性选择器使其易于自定义。默认情况下，菜单项占据容器宽度的 100%，因此您可能需要限制菜单宽度或将菜单设置为 display:inline-block。

雅虎网站
  • Flickr
  • 信使
  • 体育
  • 财务
  • 更多网站
  • 游戏
  • 新闻
  • 天哪！ 
<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>

已选择和已禁用项目

通过向列表元素添加 pure-menu-selected 类来标记所选列表元素。若要将链接标记为已禁用，请将类名 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">
            <a href="#" class="pure-menu-link">Disabled</a>
        </li>
    </ul>
</div>

下拉菜单

我们建议通过 JavaScript 启用子菜单以实现可访问性。为帮助您入门，以香草 JS 编写的示例脚本 提供 ARIA 支持、有限的子菜单箭头键导航以及使用外部事件或 ESC 键关闭菜单的功能。但是，您可能希望通过添加边缘检测、全面的箭头键导航以及与旧浏览器的兼容性多效来更进一步。

即使使用 JavaScript，您仍然可能希望在悬停时显示子菜单。只需将 pure-menu-allow-hover 添加到 pure-menu-has-children 列表项。这对桌面用户来说不错，并且为没有 JavaScript 的用户提供了后备。

  • 主页
  • 联系
    • 电子邮件
    • Twitter
    • Tumblr 博客 
<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>

带子菜单的垂直菜单

用于创建下拉菜单的相同结构同样适用于垂直菜单。您可能会嵌套子菜单，但请记住，复杂的菜单可能会在小屏幕上出现可用性挑战。

  • Flickr
  • 信使
  • 体育
  • 财务
  • 更多
    • 汽车
    • Flickr
    • 更多
      • Foo
      • Bar
      • Baz 
<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>

可滚动水平菜单

要创建可滚动水平菜单，请添加 pure-menu-scrollable 类名。当没有足够空间时，菜单项可以滚动或轻弹。不支持下拉菜单。如果您想要基于动量的滚动效果，我们建议使用诸如 scrollbooster 之类的 JS 库来添加此类效果。

雅虎
  • 主页
  • Flickr
  • 信使
  • 体育
  • 财务
  • 汽车
  • 美容
  • 电影
  • 小型企业
  • 板球
  • 科技
  • 世界
  • 新闻
  • 支持 
<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>

可滚动垂直菜单

要创建一个可滚动的垂直菜单，请限制菜单的高度，然后添加 pure-menu-scrollable 类名。可以滚动或拨动菜单项。不支持子菜单。

雅虎
  • 主页
  • Flickr
  • 信使
  • 体育
  • 财务
  • 汽车
  • 美容
  • 电影
  • 小型企业
  • 板球
  • 科技
  • 世界
  • 新闻
  • 支持 
<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>

可隐藏的响应式菜单

查看我们的 布局示例，了解如何将 Pure 用作更复杂菜单的基础，例如

  • 响应式垂直菜单，它会收缩在汉堡包后面，类似本 Pure 网站上的菜单。
  • 响应式水平可滚动菜单，它会在小屏幕上自动隐藏。
  • 响应式水平到垂直菜单，它会自动滑动显示。
<ul>
    <li>
        <a href="/layouts/side-menu/">Responsive Vertical Menu</a>, which collapses behind a hamburger, similar to the menu on this Pure website.
    </li>
    <li>
        <a href="/layouts/tucked-menu/">Responsive Horizontal-Scrollable Menu</a>, which tucks out of the way on small screens.
    </li>
    <li>
        <a href="/layouts/tucked-menu-vertical/">Responsive Horizontal-to-Vertical Menu</a>, which slides out of view.
    </li>
</ul>

本网站使用 Pure v 充满爱心 ❤️ 构建3.0.0
除非另有说明，本网站上的所有代码均根据 雅虎 BSD 许可 获得许可。

  • GitHub 项目
  • 安全联系信息

© 2014 - 雅虎公司。保留所有权利。