Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 10:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add dropdown options

Browse Source
This commit is contained in:
Jeremy Thomas
2017-06-30 23:47:22 +01:00
parent 962c9224ad
commit 082d05c8df
6 changed files with 76 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/_includes/navbar.html
View File

@@ -17,19 +17,19 @@
</span>
</a>
<div class="navbar-burger">
<div id="navBurger" class="navbar-burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu">
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<div class="navbar-item has-dropdown">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Docs
</a>
@@ -56,17 +56,9 @@
<div class="navbar-item">
<div>version <p class="has-text-info">{{ site.version }}</p></div>
</div>
<!-- <div class="navbar-item">
<a class="button is-primary" href="{{ site.download }}">
<span class="icon">
<i class="fa fa-download"></i>
</span>
<span>Download</span>
</a>
</div> -->
</div>
</div>
<div class="navbar-item has-dropdown">
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Blog
</a>

1
docs/_layouts/default.html
View File

@@ -3,5 +3,6 @@
{% include head.html %}
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
{{ content }}
<script type="text/javascript" src="{{ site.url }}/javascript/main.js"></script>
</body>
</html>

26
docs/css/bulma-docs.css
View File

@@ -4379,6 +4379,10 @@ a.nav-item.is-tab.is-active {
transform-origin: left bottom;
}
.navbar-menu {
display: none;
}
.navbar-item,
.navbar-link {
color: #4a4a4a;
@@ -4391,6 +4395,7 @@ a.nav-item.is-tab.is-active {
a.navbar-item:hover,
.navbar-link:hover {
background-color: whitesmoke;
color: #363636;
}
.navbar-item {
@@ -4426,6 +4431,10 @@ a.navbar-item:hover,
padding-right: 1.5rem;
}
.navbar-dropdown a.navbar-item:hover {
background-color: whitesmoke;
}
.navbar-divider {
background-color: #dbdbdb;
border: none;
@@ -4442,6 +4451,9 @@ a.navbar-item:hover,
.navbar-menu {
padding: 0.5rem 0;
}
.navbar-menu.is-active {
display: block;
}
}
@media screen and (min-width: 1000px) {
@@ -4481,9 +4493,13 @@ a.navbar-item:hover,
right: 1.125em;
top: 50%;
}
.navbar-item.has-dropdown:hover .navbar-dropdown {
.navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown {
display: block;
}
a.navbar-item:hover,
.navbar-link:hover {
background-color: transparent;
}
.navbar-menu {
flex-grow: 1;
flex-shrink: 0;
@@ -4498,16 +4514,14 @@ a.navbar-item:hover,
}
.navbar-dropdown {
background-color: white;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 1px solid #dbdbdb;
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
border-radius: 5px;
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
display: none;
font-size: 0.875rem;
left: 0;
min-width: 100%;
position: absolute;
top: 100%;
top: calc(100% + (-4px));
z-index: 20;
}
.navbar-dropdown .navbar-item {

8
docs/index.html
View File

@@ -3,13 +3,9 @@ layout: default
route: index
---
<section class="hero is-medium has-text-centered">
<div class="hero-head">
<div class="container">
{% include header.html %}
</div>
</div>
{% include navbar.html %}
<section class="hero is-medium has-text-centered">
<div class="hero-body">
<div class="container">
<p id="b">

13
docs/javascript/main.js Normal file
View File

@@ -0,0 +1,13 @@
document.addEventListener('DOMContentLoaded', () => {
const $navBurger = document.getElementById('navBurger');
const $navMenu = document.getElementById('navMenu');
if ($navBurger) {
$navBurger.addEventListener('click', () => {
$navBurger.classList.toggle('is-active');
$navMenu.classList.toggle('is-active');
});
}
});