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 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
Show Stats 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');
});
}
});

48
sass/components/navbar.sass
View File

@ -1,9 +1,20 @@
$navbar-color: $grey-dark !default
$navbar-background: $white !default
$navbar-dropdown-background: $white !default
$navbar-height: 3.25rem !default
$navbar-item: $grey-dark !default
$navbar-item-hover: $grey-darker !default
$navbar-item-hover-background: $background !default
$navbar-item-desktop-hover-background: transparent !default
$navbar-dropdown-background: $white !default
$navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: $link !default
$navbar-dropdown-radius: $radius-large !default
$navbar-dropdown-item-hover-background: $background !default
$navbar-divider-background: $border !default
.navbar
background-color: $navbar-background
min-height: $navbar-height
@ -18,9 +29,12 @@ $navbar-height: 3.25rem !default
+hamburger($navbar-height)
margin-left: auto
.navbar-menu
display: none
.navbar-item,
.navbar-link
color: $navbar-color
color: $navbar-item
display: block
line-height: 1.5
padding: 0.5rem 1rem
@ -29,7 +43,8 @@ $navbar-height: 3.25rem !default
a.navbar-item,
.navbar-link
&:hover
background-color: $background
background-color: $navbar-item-hover-background
color: $navbar-item-hover
.navbar-item
flex-grow: 0
@ -53,9 +68,11 @@ a.navbar-item,
.navbar-item
padding-left: 1.5rem
padding-right: 1.5rem
a.navbar-item:hover
background-color: $navbar-dropdown-item-hover-background
.navbar-divider
background-color: $border
background-color: $navbar-divider-background
border: none
display: none
height: 1px
@ -68,6 +85,8 @@ a.navbar-item,
display: flex
.navbar-menu
padding: 0.5rem 0
&.is-active
display: block
+desktop
.navbar,
@ -88,13 +107,18 @@ a.navbar-item,
&.has-dropdown
align-items: stretch
&::after
+arrow($input-arrow)
+arrow($navbar-dropdown-arrow)
margin-top: -0.375em
right: 1.125em
top: 50%
&:hover
&.is-active,
&.is-hoverable:hover
.navbar-dropdown
display: block
a.navbar-item,
.navbar-link
&:hover
background-color: $navbar-item-desktop-hover-background
.navbar-menu
flex-grow: 1
flex-shrink: 0
@ -106,16 +130,14 @@ a.navbar-item,
margin-left: auto
.navbar-dropdown
background-color: $navbar-dropdown-background
border-bottom-left-radius: $radius-large
border-bottom-right-radius: $radius-large
border-top: 1px solid $border
box-shadow: 0 8px 8px rgba($black, 0.1)
border-radius: $navbar-dropdown-radius
box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
display: none
font-size: 0.875rem
left: 0
min-width: 100%
position: absolute
top: 100%
top: calc(100% + (#{$navbar-dropdown-offset}))
z-index: 20
.navbar-item
padding: 0.375rem 1rem