Drops

預設樣式

.drop 加上 .open 時,.drop-box 會顯示出來,並且 可放置任何區塊或內容。

Drop
~內容區域~
<div class="drop open">
    <a class="btn">Drop <span class="caret"></span></a>
    <div class="drop-box">
        ~內容區域~
    </div>
</div>

Hover

.drop 加上 .drop-hover,就能夠透過滑鼠 :hover 時顯示內容。

Drop
~內容區域~
<div class="drop drop-hover">
    <a class="btn">Drop <span class="caret"></span></a>
    <div class="drop-box">
        ~內容區域~
    </div>
</div>

方位

可設定.drop-box不同的位置,預設為向下。

左方
~內容區域~
上方
~內容區域~
右方
~內容區域~
<div class="drop open">
    <a class="btn">左方 <span class="caret"></span></a>
    <div class="drop-box drop-left">
        ~內容區域~
    </div>
</div>

<div class="drop open">
    <a class="btn">上方 <span class="caret"></span></a>
    <div class="drop-box drop-up">
        ~內容區域~
    </div>
</div>

<div class="drop open">
    <a class="btn">右方 <span class="caret"></span></a>
    <div class="drop-box drop-right">
        ~內容區域~
    </div>
</div>

靠齊

可在 .drop-box 加上不同的 class,讓 .drop-box 顯示於不同位置,同時可避免 .drop-box 顯示在視窗範圍之外。

左方靠下
~內容區域~
上方靠右
~內容區域~
下方靠右
右方靠下
~內容區域~
<div class="drop drop-hover">
    <a class="btn">左方靠下 <span class="caret"></span></a>
    <div class="drop-box drop-left-bottom">
        ~內容區域~
    </div>
</div>

<div class="drop drop-hover">
    <a class="btn">上方靠右 <span class="caret"></span></a>
    <div class="drop-box drop-up-right">
        ~內容區域~
    </div>
</div>

<div class="drop drop-hover">
    <a class="btn">下方靠右 <span class="caret"></span></a>
    <div class="drop-box drop-down-right">
        ~內容區域~
    </div>
</div>

<div class="drop drop-hover">
    <a class="btn">右方靠下 <span class="caret"></span></a>
    <div class="drop-box drop-right-bottom">
        ~內容區域~
    </div>
</div>

Drop Menu

.drop 使用到的內容經常是選單,未來會陸續新增除了選單之外的模組。

使用選單時,可在原本 <div class="drop-box"> 改為 ul 並且加上 .menu,每一個選單項目可在 <li> 加上 .menu-item,最後再將 <a>置入。

<div class="drop drop-hover">
    <a class="btn">Drop <span class="caret"></span></a>
    <ul class="drop-box menu">
        <li class="menu-item"><a class="menu-link">Item1</a></li>
        <li class="menu-item"><a class="menu-link">Item2</a></li>
        <li class="menu-item"><a class="menu-link">Item3</a></li>
    </ul>
</div>

可將 .menu-item 設定為禁用,只要加上 .disabled

<div class="drop drop-hover">
    <a class="btn">Drop <span class="caret"></span></a>
    <ul class="drop-box menu">
        <li class="menu-item"><a class="menu-link">Item1</a></li>
        <li class="menu-item"><a class="menu-link">Item2</a></li>
        <li class="menu-item disabled"><a class="menu-link">Disabled</a></li>
    </ul>
</div>

選單可設置標題,在 li 加上 .menu-title

<div class="drop drop-hover">
    <a class="btn">Drop <span class="caret"></span></a>
    <ul class="drop-box menu">
        <li class="menu-title">Title</li>
        <li class="menu-item"><a class="menu-link">Item1</a></li>
        <li class="menu-item"><a class="menu-link">Item2</a></li>
    </ul>
</div>

也可以新增分隔線,在 <li> 加上 .menu-divider

Drop
<div class="drop drop-hover">
    <a class="btn">Drop <span class="caret"></span></a>
    <ul class="drop-box menu">
        <li class="menu-title">Title</li>
        <li class="menu-item"><a class="menu-link">Item1</a></li>
        <li class="menu-item"><a class="menu-link">Item2</a></li>
        <li class="menu-divider"></li>
        <li class="menu-title">Title</li>
        <li class="menu-item"><a class="menu-link">Item3</a></li>
        <li class="menu-item"><a class="menu-link">Item4</a></li>
    </ul>
</div>

設置表單與搜尋

<div class="drop drop-hover">
    <a class="btn">Drop <span class="caret"></span></a>
    <ul class="drop-box menu">
        <li class="menu-search">
            <form>
                <input type="text" />
            </form>
        </li>
        <li class="menu-title">Title</li>
        <li class="menu-item"><a class="menu-link">Item1</a></li>
        <li class="menu-item"><a class="menu-link">Item2</a></li>
    </ul>
</div>

設置多重 Drops

<div class="drop drop-hover">
    <a class="btn">Drop <span class="caret"></span></a>
    <ul class="drop-box menu">
        <li class="menu-title">Title</li>
        <li class="menu-item"><a class="menu-link">Item1</a></li>
        <li class="menu-item"><a class="menu-link">Item2</a></li>
        <li class="menu-item drop drop-hover">
            <a class="menu-link drop-btn">Item3 <span class="caret caret-right"><span/><a/>
            <ul class="drop-box drop-right menu">
                <li class="menu-item"><a class="menu-link">Item3-1</a></li>
                <li class="menu-item"><a class="menu-link">Item3-2</a></li>
                <li class="menu-item"><a class="menu-link">Item3-3</a></li>
                <li class="menu-item"><a class="menu-link">Item3-4</a></li>
            </ul>
        </li>
    </ul>
</div>

Drop Notify

使用方式與 Drop Menu 相似,皆放置於 .drop 內。主要結構為 <div class="drop-box notify">,完整內容請參閱範例。

<div class="drop">
    <a class="navbar-nav-link">
        選單
        <span class="jewel if-empty">9+</span>
    </a>
    <div class="drop-box notify has-more">
        <ul class="notify-list">
            <li class="notify-item">
                <a class="notify-link">
                    <span class="notify-avatar">
                        <img src="img/demo1.jpg">
                    </span>
                    <span class="notify-content">
                        <strong>米漿</strong>
                        回覆了一則訊息
                        <span class="notify-updated">2016-06-16 23:45:28</span>
                    </span>
                </a>
            </li>
        </ul>
        <a class="notify-more-link">顯示所有通知</a>
    </div>
</div>