Skip to content
This repository has been archived by the owner on May 3, 2020. It is now read-only.

Request: Comparison Table #5

Closed
Log1x opened this issue Sep 18, 2017 · 4 comments
Closed

Request: Comparison Table #5

Log1x opened this issue Sep 18, 2017 · 4 comments
Assignees

Comments

@Log1x
Copy link

Log1x commented Sep 18, 2017

Perhaps a Comparison Table would make a nice Bulma extension?

Something similar to this maybe? But up to date and mobile responsive.

@Log1x
Copy link
Author

Log1x commented Sep 21, 2017

@Wikiki Wikiki self-assigned this Sep 21, 2017
@Wikiki
Copy link
Owner

Wikiki commented Sep 21, 2017

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.

@Log1x
Copy link
Author

Log1x commented Sep 22, 2017

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

@Wikiki
Copy link
Owner

Wikiki commented Oct 2, 2017

Hi @Log1x ,

comparison table has been added.
I'll have a look to a mega-menu.

Regards

@Wikiki Wikiki closed this as completed Oct 2, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants