Search code examples
htmlcssmaterialize

How can i have a horizontal FAB in a vertical FAB using Materialize?

I am trying to create a horizontal FAB inside a vertical FAB using Materialize. The code below works almost perfectly, but whenever I hover over the main FAB, it will toggle the main FAB and second FAB, but I only want to open the second fab when I hover over the share button. (The second FAB button)
I am using Materialize 0.100.2.
I also created a working pen here.

.FAB2 {
 position: relative !important;
    display: inline-block;
    right: 24px !important;
    right: 17px !important;
    bottom: 0 !important;
  padding: 0 0 0 25px !important;
}
.FAB2-li {
  margin: 0 15px 0 0 !important;
}
<!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">


      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
       <div class="fixed-action-btn">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">mode_edit</i>
    </a>
    <ul>
      
      <li class="fixed-action-btn horizontal FAB2">
  <!--Share button-->
  <a class="btn-floating red">
      <i class="large material-icons">share</i>
    </a>
    <!--End of share button-->
    <ul>
      <li class="FAB2-li"><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li class="FAB2-li"><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li class="FAB2-li"><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li class="FAB2-li" style="margin-right: 0px !important;"><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </li>
      
      <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </div>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    </body>
  </html>

Solution 

  • .FAB2 {
 position: relative !important;
    display: inline-block;
    right: 24px !important;
    right: 17px !important;
    bottom: 0 !important;
  padding: 0 0 0 25px !important;
}
.FAB2-li {
  margin: 0 15px 0 0 !important;
}
li.fixed-action-btn.horizontal.FAB2>ul {
    opacity:0 !important;
    transition:0.2s all;
}
li.fixed-action-btn.horizontal.FAB2:hover >ul {
    opacity:1 !important;
}
    <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
       <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">


      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
       <div class="fixed-action-btn">
    <a class="btn-floating btn-large red">
      <i class="large material-icons">mode_edit</i>
    </a>
    <ul>
      
      <li class="fixed-action-btn horizontal FAB2">
  <!--Share button-->
  <a class="btn-floating red">
      <i class="large material-icons">share</i>
    </a>
    <!--End of share button-->
    <ul>
      <li class="FAB2-li"><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li class="FAB2-li"><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li class="FAB2-li"><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li class="FAB2-li" style="margin-right: 0px !important;"><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </li>
      
      <li><a class="btn-floating red"><i class="material-icons">insert_chart</i></a></li>
      <li><a class="btn-floating yellow darken-1"><i class="material-icons">format_quote</i></a></li>
      <li><a class="btn-floating green"><i class="material-icons">publish</i></a></li>
      <li><a class="btn-floating blue"><i class="material-icons">attach_file</i></a></li>
    </ul>
  </div>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    </body>
  </html>

    Just add below css and you're done...

    li.fixed-action-btn.horizontal.FAB2>ul {
    opacity:0 !important;
    transition:0.2s all;
}
li.fixed-action-btn.horizontal.FAB2:hover >ul {
    opacity:1 !important;
}