Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 05:04:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add dropup docs

Browse Source
This commit is contained in:
Jeremy Thomas
2017-10-24 12:31:14 +01:00
parent c0639cde83
commit 7b6755ea72
1 changed files with 80 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
docs/documentation/components/navbar.html
View File

@@ -296,6 +296,60 @@ doc-subtab: navbar
</section> </section>
{% endcapture %} {% endcapture %}
{% capture navbar_dropup_snippet %}
<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
<a class="navbar-link" href="/documentation/overview/start/">
Docs
</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="/documentation/overview/start/">
Overview
</a>
</div>
</div>
{% endcapture %}
{% capture navbar_dropup_example %}
<section class="hero is-primary">
<div class="hero-body">
<p class="title">
Documentation
</p>
<p class="subtitle">
Everything you need to <strong>create a website</strong> with Bulma
</p>
</div>
</section>
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
<div class="navbar-menu">
<div class="navbar-start">
<div class="navbar-item has-dropdown has-dropdown-up is-active">
<a class="navbar-link">
Dropup
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Overview
</a>
<a class="navbar-item">
Elements
</a>
<a class="navbar-item">
Components
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Version {{ site.version }}
</div>
</div>
</div>
</div>
</div>
</nav>
{% endcapture %}
{% capture navbar_dropdown_default_example %} {% capture navbar_dropdown_default_example %}
<nav class="navbar" role="navigation" aria-label="dropdown navigation"> <nav class="navbar" role="navigation" aria-label="dropdown navigation">
<a class="navbar-item"> <a class="navbar-item">
@@ -876,7 +930,6 @@ document.addEventListener('DOMContentLoaded', function () {
<h4 class="title is-4"> <h4 class="title is-4">
Right dropdown Right dropdown
<span class="tag is-info">0.5.1</span>
</h4> </h4>
<div class="content"> <div class="content">
@@ -899,6 +952,32 @@ document.addEventListener('DOMContentLoaded', function () {
</div> </div>
</div> </div>
<h4 class="title is-4">
Dropup
</h4>
{% include elements/new-tag.html version="0.6.1" %}
<div class="content">
<p>
If you're using a navbar at the bottom, like the <a href="#fixed-navbar">fixed bottom navbar</a>, you might want to use a <strong>dropup menu</strong>. Simply add the <code>has-dropdown</code> and <code>has-dropdown-up</code> modifiers to the parent <code>navbar-item</code>.
</p>
</div>
{% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %}
<div class="columns">
<div class="column">
<div class="bd-example is-paddingless">
{{ navbar_dropup_example }}
</div>
</div>
<div class="column">
{% highlight html %}{{ navbar_dropup_example }}{% endhighlight %}
</div>
</div>
<h4 class="title is-4"> <h4 class="title is-4">
Styles for the dropdown menu Styles for the dropdown menu
</h4> </h4>