Material Menu List

Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line. Menu items may be disabled if not applicable to a certain context. Contextual menus dynamically change their available menu items based on the current state of the app.

by Bouteille Dimitri

HTML

<div class="align">
  <div class="align-bis">
    <button class="material-menu">
      <span class="material-menu-title"><i class="material-icons">more_vert</i></span>
      <ul class="material-menu-list">
        <li>
          <a href="">@deprecated</a>
        </li>
        <li>
          <a href="">@example</a>
        </li>
        <li>
          <a href="">@group</a>
        </li>
        <li>
          <a href="">@parameter</a>
        </li>
        <li>
          <a href="">@throw</a>
        </li>
      </ul>
    </button>
  </div>
  <div class="align-bis">
    <button class="material-menu on-hover">
      <span class="material-menu-title"><i class="material-icons">more_vert</i></span>
      <ul class="material-menu-list">
        <li>
          <a href="">@deprecated</a>
        </li>
        <li>
          <a href="">@example</a>
        </li>
        <li>
          <a href="">@group</a>
        </li>
        <li>
          <a href="">@parameter</a>
        </li>
        <li>
          <a href="">@throw</a>
        </li>
      </ul>
    </button>
  </div>
  <div class="align-bis">
<button class="material-menu align-right">
  <span class="material-menu-title"><i class="material-icons">more_vert</i></span>
  <ul class="material-menu-list">
    <li>
      <a href="">@access</a>
    </li>
    <li>
      <a href="">@alias</a>
    </li>
    <li>
      <a href="">@deprecated</a>
    </li>
    <li>
      <a href="">@example</a>
    </li>
  </ul>
</button>
</div>
</div>



<div class="align">
  <div class="align-bis">
    <button class="material-menu align-bottom">
      <span class="material-menu-title"><i class="material-icons">more_vert</i></span>
      <ul class="material-menu-list">
        <li>
          <a href="">@deprecated</a>
        </li>
        <li>
          <a href="">@example</a>
        </li>
        <li>
          <a href="">@group</a>
        </li>
        <li>
          <a href="">@parameter</a>
        </li>
        <li>
          <a...

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

$primary : #03A9F4;
$grey : rgb(235,235,235);
$white : #fff;
$black: #333;


//
// Default style
* {
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #000;
  font-size: 15px;
}

.align{
  display: flex;
  background-color: rgb(250,250,250);
  min-height: 100%;
  &-bis{
    flex: 1;
    display:flex;
    justify-content: center;
    padding: 100px 0;
  }
  .black{
    background-color:$black;
  }
}

//
// Style components
$this : '.material-menu';

#{$this}{
  background: none;
  position:relative;
  border:none;
  outline: none;
  cursor: pointer;
  &.align-right{
    #{$this}-list{
      right:0;
      left: auto;
      transform-origin: top right;
    }
  }
  &.align-bottom {
    #{$this}-list{
      top: auto;
      bottom: 100%;
      transform-origin: bottom left;
    }
    &.align-right{
      #{$this}-list{
        transform-origin: bottom right;
      }  
    }
  }
  
  &:not(.on-hover):focus, &.on-hover:hover{
    ul{
      transform: scale(1);
      transition-duration: 0.2s;
    }
  }
  &-list{
    top:100%;
    z-index: 500;
    position:absolute;
    left: 0;
    list-style:none;
    text-align:left;
    background: $white;
    width: 200px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    transform-origin: top left;
    transform: scale(0);
    transition: all 0s ease;
    &-separator{
      display:block;
      width: 100%;
      height: 1px; 
      background: $grey;
    }
    li{
      a {
        text-decoration:none;
        display:block;
        padding: 12px 20px;
        &:hover, &:focus{
          background-color: $grey;
        }
      }
    }
  }
}