메뉴

수평 메뉴

수평 메뉴를 만들려면 pure-menu-horizontal 클래스이름을 추가하면 된다. 활성화된 메뉴는 pure-menu-selected를 리스트 엘리먼트에 추가해서 표시할 수 있다.

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <ul>
        <li><a href="#">Home</a></li>
        <li class="pure-menu-selected"><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
    </ul>
</div>

제목 추가하기

메뉴에 제목을 추가하려면 <ul> 엘리먼트 밖에 내용을 적고 pure-menu-heading 클래스이름이 있는 <a> 엘리먼트로 감싸면 된다.

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <a href="#" class="pure-menu-heading">사이트 이름</a>

    <ul>
        <li class="pure-menu-selected"><a href="#">Home</a></li>
        <li><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
    </ul>
</div>

수직 메뉴

메뉴는 기본적으로 수직이다. 메뉴에 스타일을 넣으려면 pure-menu 클래스만 추가하면 되고, 눈에 띄게 하려면 pure-menu-open 클래스를 해당 엘리먼트에 추가한다. Menus are vertical by default. You need only add the <code>pure-menu</code> class to style the menu, and the <code>pure-menu-open</code> class to ensure that it is visible.

<div class="pure-menu pure-menu-open">
    <a class="pure-menu-heading">Yahoo! Sites</a>

    <ul>
        <li><a href="#">Flickr</a></li>
        <li class="pure-menu-open"><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
        <li class="pure-menu-heading">More Sites!</li>
        <li><a href="#">Games</a></li>
        <li><a href="#">News</a></li>
        <li><a href="#">OMG!</a></li>
    </ul>
</div>

메뉴에 드랍다운 추가하기

다릅다운 메뉴를 추가하려면 자바스크립트를 사용해야한다. 예를 들어, YUI의 Y.Menu 모듈로 자바스크립트 메뉴 기능을 넣고 드랍다운 기능을 추가할 수 있다.

<div id="horizontal-menu">
    <ul id="std-menu-items">
        <li class="pure-menu-selected"><a href="#">Flickr</a></li>
        <li><a href="#">Messenger</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Finance</a></li>
        <li>
            <a href="#">Other</a>
            <ul>
                <li class="pure-menu-heading">More from Yahoo!</li>
                <li class="pure-menu-separator"></li>
                <li><a href="#">Autos</a></li>
                <li><a href="#">Flickr</a></li>
                <li><a href="#">Answers</a></li>
                <li>
                    <a href="#">더 보기</a>
                    <ul>
                        <li><a href="#">Horoscopes</a></li>
                        <li><a href="#">Games</a></li>
                        <li><a href="#">Jobs</a></li>
                        <li><a href="#">OMG</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

<script>
YUI({
    classNamePrefix: 'pure'
}).use('gallery-sm-menu', function (Y) {

    var horizontalMenu = new Y.Menu({
        container         : '#horizontal-menu',
        sourceNode        : '#std-menu-items',
        orientation       : 'horizontal',
        hideOnOutsideClick: false,
        hideOnClick       : false
    });

    horizontalMenu.render();
    horizontalMenu.show();

});
</script>

비활성화된 항목 설정하기

링크를 비활성화로 표시하려면, <a> 엘리먼트에 pure-menu-disabled를 추가하면 된다. 비활성화된 항목은 희미하게 보이며 호버 스타일을 상속받지 않는다.

<div class="pure-menu pure-menu-open pure-menu-horizontal">
    <a href="#" class="pure-menu-heading">사이트 이름</a>

    <ul>
        <li class="pure-menu-selected"><a href="#">Home</a></li>
        <li><a href="#">Flickr</a></li>
        <li class="pure-menu-disabled"><a href="#">비활성화된 항목</a></li>
    </ul>
</div>

페이지 표기

페이지 표기를 만들려면, <ul> 엘리먼트에 pure-paginator 클래스이름을 추가하면 된다. 페이지 표기를 버튼처럼 보이고 싶으면 pure-button 클래스이름을 추가한다. 평범하게 사용하려면 클래스이름을 생략해도 된다.

• «
• 1
• 2
• 3
• 4
• 5
• »

<ul class="pure-paginator">
    <li><a class="pure-button prev" href="#">&#171;</a></li>
    <li><a class="pure-button" href="#">1</a></li>
    <li><a class="pure-button pure-button-active" href="#">2</a></li>
    <li><a class="pure-button" href="#">3</a></li>
    <li><a class="pure-button" href="#">4</a></li>
    <li><a class="pure-button" href="#">5</a></li>
    <li><a class="pure-button next" href="#">&#187;</a></li>
</ul>