Bulma: The Menu Component: Extreme Makeover Edition

Created on 23 Sep 2017  路  15Comments  路  Source: jgthms/bulma

Is it about Bulma or about the Docs?

Overview of the problem

This is about the Bulma CSS framework




Description

In my opinion i think its time to give the menu component a makeover with dropdown support.

Proposal

<!-- Menu -->
<aside class="menu">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
  </ul>
</aside>

<!-- Active -->
<aside class="menu">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item is-active" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
  </ul>
</aside>

<!-- Dropdown:Not Active -->
<aside class="menu">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li>
       <a class="menu-item has-dropdown" data-target="menuDropdown" href="#">
         Link
         <span class="icon is-small"><i class="fa fa-angle-down"></i></span>
       </a>
       <ul class="menu-dropdown" id="menuDropdown">
         <li><a class="menu-item" href="#">Link</a></li>
         <li><a class="menu-item" href="#">Link</a></li>
         <li><a class="menu-item" href="#">Link</a></li>
       </ul>
     </li>
  </ul>
</aside>

<!-- Dropdown:Active -->
<aside class="menu">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li>
       <a class="menu-item has-dropdown is-active" data-target="menuDropdown" href="#">
         Link
         <span class="icon is-small"><i class="fa fa-angle-down"></i></span>
       </a>
       <ul class="menu-dropdown" id="menuDropdown">
         <li><a class="menu-item" href="#">Link</a></li>
         <li><a class="menu-item" href="#">Link</a></li>
         <li><a class="menu-item" href="#">Link</a></li>
       </ul>
     </li>
  </ul>
</aside>

<!-- Dropdown:Hoverable -->
<aside class="menu">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li>
       <a class="menu-item has-dropdown is-hoverable" data-target="menuDropdown" href="#">
         Link
         <span class="icon is-small"><i class="fa fa-angle-down"></i></span>
       </a>
       <ul class="menu-dropdown" id="menuDropdown">
         <li><a class="menu-item" href="#">Link</a></li>
         <li><a class="menu-item" href="#">Link</a></li>
         <li><a class="menu-item" href="#">Link</a></li>
       </ul>
     </li>
  </ul>
</aside>

<!-- Sizes -->
<aside class="menu is-small">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
  </ul>
</aside>

<aside class="menu is-medium">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
  </ul>
</aside>

<aside class="menu is-large">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
  </ul>
</aside>

<!-- Colors -->
<aside class="menu">
  <p class="menu-label">Label</p>
  <ul class="menu-list is-success">
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
  </ul>
</aside>

<aside class="menu">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li><a class="menu-item is-primary" href="#">Link</a></li>
     <li><a class="menu-item is-success" href="#">Link</a></li>
     <li><a class="menu-item is-danger" href="#">Link</a></li>
  </ul>
</aside>

<!-- Alignment -->
<aside class="menu is-centered">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
  </ul>
</aside>

<aside class="menu is-right">
  <p class="menu-label">Label</p>
  <ul class="menu-list">
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
     <li><a class="menu-item" href="#">Link</a></li>
  </ul>
</aside>
stale
Source
picture thecodechef
👍2

Most helpful comment

@thecodechef I would suggest opening a pull request.

picture penguoir on 25 Sep 2017
👍2

All 15 comments

Do you have any demo or screenshot?

jgthms picture jgthms on 23 Sep 2017

@jgthms
no not at the moment i am currently working on the css this is just the dom layout portion

thecodechef picture thecodechef on 23 Sep 2017

Hi @thecodechef ,

great initiative.
Do you mind including icon on menu-item and menu-label ?

I'll be glad to help you if you need for the SASS part.

Regards

Wikiki picture Wikiki on 23 Sep 2017

@Wikiki

Something like this:

<!-- Menu -->
<aside class="menu">
  <p class="menu-label">
    <span class="icon"><i class="fa fa-folder"></i></span> General
  </p>
  <ul class="menu-list">
     <li>
       <a class="menu-item" href="#">
         <span class="icon"><i class="fa fa-home"></i></span> Home
       </a>
     </li>
     <li>
       <a class="menu-item" href="#">
         <span class="icon"><i class="fa fa-camera"></i></span> Pictures
       </a>
     </li>
     <li>
       <a class="menu-item" href="#">
         <span class="icon"><i class="fa fa-video-camera"></i></span> Videos
       </a>
     </li>
  </ul>
</aside>
thecodechef picture thecodechef on 23 Sep 2017
👍2

@jgthms

here is the sass i cooked up so far

$menu-item-color: $text !default
$menu-item-radius: $radius-small !default
$menu-item-hover-color: $text-strong !default
$menu-item-hover-background-color: $background !default
$menu-item-active-color: $link-invert !default
$menu-item-active-background-color: $link !default
$menu-list-border-left: 1px solid $border !default
$menu-label-color: $text-light !default

$font-sizes: ['small', 'medium', 'large'] !default

=menu
  font-size: $size-normal
  // Sizes
  @for $size in $font-sizes
    &.is-#{$size}
      font-size: $size-#{$size}

  // Alignment
  &.is-centered
    text-align: center
  &.is-right
    text-align: right
  @content

=menu-list
  line-height: 1.25

  &.has-dropdown
    & a.menu-item.is-active,
      .menu-dropdown
        display: block

  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      a.menu-item
        &:active,
        &.is-active
          background-color: $color
          color: $color-invert

  @content

=menu-item
  border-radius: $menu-item-radius
  color: $menu-item-color
  display: block
  padding: 0.5em 0.75em
  &:hover
    background-color: $menu-item-hover-background-color
    color: $menu-item-hover-color

  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      &:active,
      &.is-active
        background-color: $color
        color: $color-invert

  // Modifiers
  &:active,
  &.is-active
    background-color: $menu-item-active-background-color
    color: $menu-item-active-color
  @content

=menu-dropdown
  display: none
  border-left: $menu-list-border-left
  margin: 0.75em
  padding-left: 0.75em
  @content

=menu-label
  color: $menu-label-color
  font-size: 0.75em
  letter-spacing: 0.1em
  text-transform: uppercase
  &:not(:first-child)
    margin-top: 1em
  &:not(:last-child)
    margin-bottom: 1em
  @content

.menu
  +menu

.menu-label
  +menu-label

.menu-list
  +menu-list

  a.menu-item
    +menu-item

  li
    ul.menu-dropdown
      +menu-dropdown
thecodechef picture thecodechef on 23 Sep 2017

@thecodechef compiler throws an error on the first @for loop.

connectkushal picture connectkushal on 24 Sep 2017

@connectkushal

Sorry was away from my computer for a few days

this should fix it 

$menu-item-hover-background-color: $background !default
$menu-item-active-color: $link-invert !default
$menu-item-active-background-color: $link !default
$menu-list-border-left: 1px solid $border !default
$menu-label-color: $text-light !default

$font-sizes: ('small': ($size-small),'medium': ($size-medium),'large': ($size-large)) !default

=menu
  font-size: $size-normal
  // Sizes
  @each $size, $index in $font-sizes
    $font: nth($index, 1)
    &.is-#{$size}
      font-size: $font

.menu
  +menu

  // Alignment
  &.is-centered
    text-align: center
  &.is-right
    text-align: right
  @content

=menu-list
  line-height: 1.25

  &.has-dropdown
    & a.menu-item.is-active,
    &.is-hoverable:hover
      .menu-dropdown
        display: block

  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      a.menu-item
        &:active,
        &.is-active
          background-color: $color
          color: $color-invert

  @content

=menu-item
  border-radius: $menu-item-radius
  color: $menu-item-color
  display: block
  padding: 0.5em 0.75em
  &:hover
    background-color: $menu-item-hover-background-color
    color: $menu-item-hover-color

  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      &:active,
      &.is-active
        background-color: $color
        color: $color-invert

  // Modifiers
  &:active,
  &.is-active
    background-color: $menu-item-active-background-color
    color: $menu-item-active-color
  @content

=menu-dropdown
  display: none
  border-left: $menu-list-border-left
  margin: 0.75em
  padding-left: 0.75em
  @content

=menu-label
  color: $menu-label-color
  font-size: 0.75em
  letter-spacing: 0.1em
  text-transform: uppercase
  &:not(:first-child)
    margin-top: 1em
  &:not(:last-child)
    margin-bottom: 1em
  @content

.menu
  +menu

.menu-label
  +menu-label

.menu-list
  +menu-list

  a.menu-item
    +menu-item

  li
    ul.menu-dropdown
      +menu-dropdown
thecodechef picture thecodechef on 25 Sep 2017

@thecodechef I would suggest opening a pull request.

penguoir picture penguoir on 25 Sep 2017
👍2

Hi,

Any news for a PR related to this improvment ?

Regards

Wikiki picture Wikiki on 29 Oct 2017

Any news ? PR ? Demo ?

Wikiki picture Wikiki on 30 Dec 2017

Hi @thecodechef ,

I've made some adjustement to your code to get it work:

$menu-background-color: transparent !default
$menu-list-border-left: 1px solid $border !default
$menu-label-color: $text-light !default
$menu-item-padding: 0.75em 1em !default
$menu-item-border-left: 2px solid transparent !default
$menu-item-background-color: transparent !default
$menu-item-hover-background-color: $grey !default
$menu-item-hover-border-color: transparent !default
$menu-item-active-color: transparent !default
$menu-item-active-background-color: transparent !default
$menu-item-active-border-color: $primary !default

$font-sizes: ('small': ($size-small),'medium': ($size-medium),'large': ($size-large)) !default

=menu
  background-color: $menu-background-color
  font-size: $size-normal
  // Sizes
  @each $size, $index in $font-sizes
    $font: nth($index, 1)
    &.is-#{$size}
      font-size: $font
  // Alignment
  &.is-centered
    text-align: center
  &.is-right
    text-align: right
  @content

=menu-list
  line-height: 1.25
  @content

=menu-item
  display: block
  border-left: $menu-item-border-left
  border-radius: $menu-item-radius
  background-color: $menu-item-background-color
  color: $menu-item-color
  &.has-dropdown
    .menu-title
      display: flex
      justify-content: space-between
    &.is-active,
    &.is-hoverable:hover
      .menu-dropdown
        display: block
  &:not(.has-dropdown)
    // Modifiers
    &:hover
      background-color: $menu-item-hover-background-color
      border-color: $menu-item-hover-border-color
      color: $menu-item-hover-color
    &:active,
    &.is-active
      background-color: $menu-item-active-background-color
      border-color: $menu-item-active-border-color
      color: $menu-item-active-color
  @content

=menu-dropdown
  display: none
  border-left: $menu-list-border-left
  margin: 0
  padding: 0
  li
    a
      padding-left: 1.5em
  @content

=menu-label
  color: $menu-label-color
  font-size: $size-7
  letter-spacing: 0.1em
  text-transform: uppercase
  margin-top: 1em
  &:not(:last-child)
    margin-bottom: 1em
  padding-left: 1em
  @content

.menu
  +menu

.menu-label
  +menu-label

.menu-list
  +menu-list

  .menu-item
    +menu-item

  li
    ul.menu-dropdown
      +menu-dropdown

Please create a PR for it if you think it's ok.

regards

Wikiki picture Wikiki on 6 Jan 2018

Hi @thecodechef, any news about a PR for it? Do you want me to create it ?

Wikiki picture Wikiki on 4 May 2018

@Wikiki please do create it :) @thecodechef seems to be unavailable

connectkushal picture connectkushal on 12 May 2018

any news on this? really looking forward to this new menu

nuthingman picture nuthingman on 11 Oct 2018
👍1

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] picture stale[bot] on 9 Apr 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dotMastaz picture dotMastaz  路  3Comments
Wikiki picture Wikiki  路  3Comments
Qard picture Qard  路  3Comments
DAreRodz picture DAreRodz  路  3Comments
bigZ-again picture bigZ-again  路  3Comments