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> </span>
</a> </a>
<div class="navbar-burger"> <div id="navBurger" class="navbar-burger">
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</div> </div>
</div> </div>
<div class="navbar-menu"> <div id="navMenu" class="navbar-menu">
<div class="navbar-start"> <div class="navbar-start">
<a class="navbar-item"> <a class="navbar-item">
Home Home
</a> </a>
<div class="navbar-item has-dropdown"> <div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> <a class="navbar-link">
Docs Docs
</a> </a>
@ -56,17 +56,9 @@
<div class="navbar-item"> <div class="navbar-item">
<div>version <p class="has-text-info">{{ site.version }}</p></div> <div>version <p class="has-text-info">{{ site.version }}</p></div>
</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> </div>
<div class="navbar-item has-dropdown"> <div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"> <a class="navbar-link">
Blog Blog
</a> </a>

1
docs/_layouts/default.html
View File

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

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

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

8
docs/index.html
View File

@ -3,13 +3,9 @@ layout: default
route: index route: index
--- ---
<section class="hero is-medium has-text-centered"> {% include navbar.html %}
<div class="hero-head">
<div class="container">
{% include header.html %}
</div>
</div>
<section class="hero is-medium has-text-centered">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<p id="b"> <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-background: $white !default
$navbar-dropdown-background: $white !default
$navbar-height: 3.25rem !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 .navbar
background-color: $navbar-background background-color: $navbar-background
min-height: $navbar-height min-height: $navbar-height
@ -18,9 +29,12 @@ $navbar-height: 3.25rem !default
+hamburger($navbar-height) +hamburger($navbar-height)
margin-left: auto margin-left: auto
.navbar-menu
display: none
.navbar-item, .navbar-item,
.navbar-link .navbar-link
color: $navbar-color color: $navbar-item
display: block display: block
line-height: 1.5 line-height: 1.5
padding: 0.5rem 1rem padding: 0.5rem 1rem
@ -29,7 +43,8 @@ $navbar-height: 3.25rem !default
a.navbar-item, a.navbar-item,
.navbar-link .navbar-link
&:hover &:hover
background-color: $background background-color: $navbar-item-hover-background
color: $navbar-item-hover
.navbar-item .navbar-item
flex-grow: 0 flex-grow: 0
@ -53,9 +68,11 @@ a.navbar-item,
.navbar-item .navbar-item
padding-left: 1.5rem padding-left: 1.5rem
padding-right: 1.5rem padding-right: 1.5rem
a.navbar-item:hover
background-color: $navbar-dropdown-item-hover-background
.navbar-divider .navbar-divider
background-color: $border background-color: $navbar-divider-background
border: none border: none
display: none display: none
height: 1px height: 1px
@ -68,6 +85,8 @@ a.navbar-item,
display: flex display: flex
.navbar-menu .navbar-menu
padding: 0.5rem 0 padding: 0.5rem 0
&.is-active
display: block
+desktop +desktop
.navbar, .navbar,
@ -88,13 +107,18 @@ a.navbar-item,
&.has-dropdown &.has-dropdown
align-items: stretch align-items: stretch
&::after &::after
+arrow($input-arrow) +arrow($navbar-dropdown-arrow)
margin-top: -0.375em margin-top: -0.375em
right: 1.125em right: 1.125em
top: 50% top: 50%
&:hover &.is-active,
&.is-hoverable:hover
.navbar-dropdown .navbar-dropdown
display: block display: block
a.navbar-item,
.navbar-link
&:hover
background-color: $navbar-item-desktop-hover-background
.navbar-menu .navbar-menu
flex-grow: 1 flex-grow: 1
flex-shrink: 0 flex-shrink: 0
@ -106,16 +130,14 @@ a.navbar-item,
margin-left: auto margin-left: auto
.navbar-dropdown .navbar-dropdown
background-color: $navbar-dropdown-background background-color: $navbar-dropdown-background
border-bottom-left-radius: $radius-large border-radius: $navbar-dropdown-radius
border-bottom-right-radius: $radius-large box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
border-top: 1px solid $border
box-shadow: 0 8px 8px rgba($black, 0.1)
display: none display: none
font-size: 0.875rem font-size: 0.875rem
left: 0 left: 0
min-width: 100% min-width: 100%
position: absolute position: absolute
top: 100% top: calc(100% + (#{$navbar-dropdown-offset}))
z-index: 20 z-index: 20
.navbar-item .navbar-item
padding: 0.375rem 1rem padding: 0.375rem 1rem