library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add basic navbar example

Browse Source
This commit is contained in:
Jeremy Thomas 2018-10-02 08:25:09 +01:00
parent 9a5c7efe6c
commit 39bdeacf46
2 changed files with 77 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,6 +14,69 @@ meta:
variables: true
---
{% capture navbar_basic_example %}
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" width="112" height="28">
</a>
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<strong>Sign up</strong>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
{% endcapture %}
{% capture navbar_example %}
{% include examples/navbar.html id="Default" %}
{% endcapture %}
@ -594,6 +657,20 @@ $(document).ready(function() {
</ul>
</div>
{% include elements/anchor.html name="Basic Navbar" %}
<div class="content">
<p>
To <strong>get started quickly</strong>, here is what a complete basic navbar looks like:
</p>
</div>
<div class="bd-example is-paddingless">
{{ navbar_basic_example }}
</div>
{% highlight html %}{{ navbar_basic_example }}{% endhighlight %}
{% include elements/anchor.html name="Navbar brand" %}
<div class="content">

41
docs/test.html
View File

@ -1,41 +0,0 @@
---
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bulma test page</title>
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css?v={{ site.time | date: "%Y%m%d%H%M" }}">
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
</head>
<body>
<!-- <object type="application/x-shockwave-flash" data="https://htmlreference.io/assets/golf.swf">
<param name="movie" value="https://htmlreference.io/assets/golf.swf">
<param name="wmode" value="transparent">
<p>You need to enable Flash to view this content.</p>
</object> -->
<!-- <embed src="https://www.youtube.com/embed/kmk43_2dtn0" width="640" height="480"> -->
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/hK8ONv4wcbA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
<!-- <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> -->
{% include global/navbar.html %}
{% include index/focus.html %}
<!-- {% include test/from-to.html %} -->
<!-- {% include test/features.html %} -->
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>
<script async defer type="text/javascript">(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.async = true;
js.defer = true;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8&appId=310296819307942";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="{{ site.url }}/vendor/clipboard-1.7.1.min.js"></script>
<script src="{{ site.url }}/vendor/js.cookie-2.1.4.min.js"></script>
<script src="{{ site.url }}/lib/main.js?v={{ site.time | date: '%Y%m%d%H%M' }}"></script>
</body>
</html>