mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-21 01:41:46 +03:00
52 lines
2.6 KiB
HTML
52 lines
2.6 KiB
HTML
|
---
|
||
|
|
layout: default
|
||
|
|
title: Dropdowns · Ghost UI
|
||
|
|
---
|
||
|
|
|
||
|
|
<header class="page-header">
|
||
|
|
<a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
|
||
|
|
<h2>Dropdowns</h2>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="page-content">
|
||
|
|
|
||
|
|
<h1>Dropdowns</h1>
|
||
|
|
|
||
|
|
<div style="height: 200px;">
|
||
|
|
<div class="dropdown">
|
||
|
|
<ul class="dropdown-menu dropdown-triangle-top" role="menu" aria-labelledby="dropdownMenu1" style="display: block;">
|
||
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||
|
|
<li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
|
||
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||
|
|
<li role="presentation" class="divider"></li>
|
||
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="dropdown">
|
||
|
|
<ul class="dropdown-menu dropdown-menu-right dropdown-triangle-top-right" role="menu" aria-labelledby="dropdownMenu1" style="display: block;">
|
||
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||
|
|
<li role="presentation" class="divider"></li>
|
||
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Triangle Variations</h2>
|
||
|
|
|
||
|
|
{% assign dropdown_classes = "dropdown-triangle-top|dropdown-triangle-top-left|dropdown-triangle-top-right|dropdown-triangle-bottom|dropdown-triangle-bottom-left|dropdown-triangle-bottom-right" | split: "|" %}
|
||
|
|
{% for item in dropdown_classes %}
|
||
|
|
<p><b>Variation: <code>{{item}}</code></b></p>
|
||
|
|
<div class="dropdown" style="height: 110px;">
|
||
|
|
<ul class="dropdown-menu {{item}}" role="menu" aria-labelledby="dropdownMenu1" style="display: block; position: relative; top: 0;">
|
||
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
|
||
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
|
||
|
|
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
|
||
|
|
</section>
|