Comments (4)
Hi @Log1x ,
comparison table has been added.
I'll have a look to a mega-menu.
Regards
from bulma-extensions.
https://codyhouse.co/demo/products-comparison-table/index.html
from bulma-extensions.
Hi @Log1x,
thanks for the examples. Don't hesitate if you have others.
I'll try to work on this extension before the end of this month.
from bulma-extensions.
The only thing I can think of right now is a proper Mega Menu. I know someone else already did an extension for it, but all they did was position: static
the dropdown container and it's really not a true implementation.
https://codyhouse.co/gem/css-mega-site-navigation/ -- this is pretty over the top, but it's an idea of what would be truly usable. The sidebar for mobile is nice as well -- but their implementation isn't really ideal, especially with them placing the nav outside of the header...
I have a simple mega menu that is working for me-- but it could be done vastly better. Mind you, it's in Stylus using my Bulma.styl fork.
// Dropdown Menu
+desktop()
.navbar
.has-dropdown
&:not(:hover)
.is-megamenu
display: none
.is-megamenu
position: fixed
top: calc(3.25rem + 32px)
padding: 2rem 0
.has-dropdown
@extend .column
@extend .column.is-one-quarter
> .navbar-link
display: block
color: $navbar-item-hover-color
text-transform: uppercase
font-weight: $weight-bold
cursor: default
pointer-events: none
margin: 0
padding: 0
&::after
display: none
ul
display: block
li
line-height: 1.75
padding: 0
&.active a
color: $navbar-item-hover-color
a
color: $white
&:hover
color: $navbar-item-hover-color
+touch()
.navbar
.has-dropdown
padding: 0 !important
> .navbar-link
&::after
margin-left: 10px
margin-top: -1px
color: $primary
icon: chevron-right
font-size: 0.7em
&.is-expanded
> .navbar-link
&::after
icon: chevron-down
&:not(.is-expanded)
.navbar-dropdown,
> ul
display: none
from bulma-extensions.
Related Issues (20)
- Bulma steps
- Update checkradio version
- Unrecognized text Switch
- Quickview additional variables
- bulma-slider is out-of-date and doesn't compile
- datetimepicker-clear-button in bulma-calendar submits a form HOT 4
- Bulma FormValidation
- Timeline not working for me
- Flip tooltips to other positions when near the edge of viewport HOT 1
- Options are not working when using bulma calendar
- Bulma Collapsible HOT 1
- bulma-switch.min.css has sass variables
- Unable to use bulma-carousel
- [Feature Request] Organizational or tree chart
- Using Bulma Extensions with Gatsby
- Pulling "bulma-slider" v1.0.4 instead of latest one
- Tooltip cropped in table-container HOT 1
- Tooltip not displaying HOT 2
- [CHECKBOX] RTL also reverses switch direction
- Activate tooltip on :hover only (not on :focus) ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bulma-extensions.