mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-13 22:41:32 -05:00
90 lines
No EOL
3.5 KiB
HTML
90 lines
No EOL
3.5 KiB
HTML
---
|
|
layout: raw
|
|
title: Dropdowns - Ghost UI
|
|
---
|
|
|
|
<!--
|
|
.dropdown
|
|
This is used to show, hide and position the dropdown
|
|
-->
|
|
|
|
<h1>Default Dropdown</h1>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
|
|
<li role="presentation"><a class="dropdown-item icon-trash" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
|
<li role="presentation">
|
|
<span class="dropdown-item divider"></span>
|
|
</li>
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h1>Bottom Triangle</h1>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-bottom" role="menu" aria-labelledby="dropdownMenu1">
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2>Bottom Left Triangle</h2>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-bottom-left" role="menu" aria-labelledby="dropdownMenu1">
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2>Bottom Right Triangle</h2>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-bottom-right" role="menu" aria-labelledby="dropdownMenu1">
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h1>Top Triangle</h1>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-top" role="menu" aria-labelledby="dropdownMenu1">
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2>Top Left Triangle</h2>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-top-left" role="menu" aria-labelledby="dropdownMenu1">
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2>Top Right Triangle</h2>
|
|
|
|
<div class="dropdown">
|
|
<ul class="dropdown-menu triangle-top-right" role="menu" aria-labelledby="dropdownMenu1">
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
|
|
<li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<h2>Div & Button Markup</h2>
|
|
|
|
<div class="dropdown">
|
|
<div class="dropdown-menu triangle-top-right" role="menu" aria-labelledby="dropdownMenu1">
|
|
<span role="presentation"><button class="dropdown-item" role="menuitem" tabindex="-1">Action</button></span>
|
|
<span role="presentation"><button class="dropdown-item" role="menuitem" tabindex="-1">Another action</button></span>
|
|
</div>
|
|
</div> |