Pure菜單

簡單的CSS菜單。

垂直菜單

菜單默認(rèn)為垂直。最小的默認(rèn)樣式和低特異性選擇器使它們易于自定義。默認(rèn)情況下，菜單項(xiàng)占據(jù)其容器寬度的100％，因此可能需要限制菜單寬度或設(shè)置菜單以顯示：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>

水平菜單

要?jiǎng)?chuàng)建一個(gè)水平菜單，請?zhí)砑觩ure-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>

選定和Disabled項(xiàng)目

通過將pure-menu-selected類添加到列表元素來標(biāo)記選定的列表元素。要將鏈接標(biāo)記為已禁用，請?zhí)砑?lt;a>具有pure-menu-disabled類名稱的元素。禁用的項(xiàng)目顯示為褪色，不會(huì)繼承懸停樣式。

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

下拉菜單

我們建議您通過JavaScript啟用子菜單以啟用輔助功能。為了幫助您開始使用， 用vanilla JS編寫的示例腳本提供ARIA支持，有限的子菜單箭頭鍵導(dǎo)航以及使用外部事件或ESC鍵解除菜單的功能。但是，您可能希望通過添加邊緣檢測，全面的箭頭導(dǎo)航和polyfills來進(jìn)一步與舊瀏覽器兼容。

即使使用JavaScript，您仍然可能希望在懸停上顯示子菜單。只需添加pure-menu-allow-hover到 pure-menu-has-children列表項(xiàng)。這對桌面用戶來說可以很好，并為沒有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>

垂直菜單與子菜單

用于創(chuàng)建下拉列表的相同構(gòu)造也適用于垂直菜單。您可以嵌套子菜單，但請記住，復(fù)雜的菜單可以在小屏幕上顯示可用性挑戰(zhàn)。

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

可滾動(dòng)水平菜單

要?jiǎng)?chuàng)建一個(gè)可滾動(dòng)的水平菜單，請?zhí)砑觩ure-menu-scrollable類名。當(dāng)沒有足夠的空間時(shí)，菜單項(xiàng)可以滾動(dòng)或輕彈。不支持下拉菜單。

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

可滾動(dòng)垂直菜單

要?jiǎng)?chuàng)建可滾動(dòng)的垂直菜單，請限制菜單的高度，然后添加pure-menu-scrollable類名稱。菜單項(xiàng)可以滾動(dòng)或彈出。不支持子菜單。

<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作為更復(fù)雜菜單的基礎(chǔ)。