功能表

預設情況下，功能表為垂直排列。簡約的預設樣式設定和低規範性選取器使得它們易於自訂。預設情況下，功能表項目會佔用其容器 100% 的寬度，因此您可能希望限制功能表寬度或設定功能表為 display: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>

選取和停用的項目

透過將 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 的使用者提供後援。

<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>

用來建立下拉式選單的相同建構在直式功能表中也有用。您可以巢狀子功能表，但請記住，複雜的功能表會在小螢幕上造成可用性問題。

<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 函式庫，以新增此類效果。

<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 類別名稱。可以捲動或輕掃功能表項目。不支援子功能表。

<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>

功能表的簡易 CSS。

直式功能表

橫式功能表

選取和停用的項目

下拉式選單

具有子功能表的直式功能表

可捲動的橫式功能表

可捲動的直式功能表

具隱藏功能的回應式功能表