如何使用Materialize在垂直FAB中使用水平FAB？

时间：2018-10-15 06:21:57

标签： html css materialize

我正在尝试使用Materialize在垂直FAB内创建水平FAB。下面的代码几乎完美地工作，但是每当我将鼠标悬停在主FAB上时，它将切换主FAB和第二个FAB，但是当我将鼠标悬停在共享按钮上时，我只想打开第二个Fab。 （第二个FAB按钮）
我正在使用Materialize 0.100.2。
我还创建了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>

2 个答案:

答案 0 :(得分：0)

.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>

只需在CSS下方添加即可，您就完成了... 

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;
}

答案 1 :(得分：0)

ElusiveCoder 的回答部分对我有用，就像我能够理解他的想法一样，但这最终对我有用： HTML代码：

 <div class="fixed-action-btn edit-btn">
        <a class="btn-floating btn-large red">
          <i class="large material-icons">mode_edit</i>
        </a>
        <ul>
          <li class="fixed-action-btn-horizontal horizontal FAB2">
            <!-- <a class="btn-floating"> -->
              <!-- <div class="fixed-action-btn-horizontal"> -->
                <a class="btn-floating blue"
                  ><i
                    class="material-icons"
                    style="font-size: 30px"
                    id="pencilLarge"
                    >lens</i
                  ></a
                >

                <ul class="bttom0px">
                  <li class="FAB2-li">
                    <a class="btn-floating green"
                      ><i
                        class="material-icons"
                        style="font-size: 25px"
                        id="pencilMedium"
                        >lens</i
                      ></a
                    >
                  </li>
                  <li class="FAB2-li">
                    <a class="btn-floating pink"
                      ><i
                        class="material-icons"
                        style="font-size: 15px"
                        id="pencilSmall"
                        >lens</i
                      ></a
                    >
                  </li>
                  <li class="FAB2-li">
                    <a class="btn-floating red"
                      ><i
                        class="material-icons"
                        style="font-size: 10px"
                        id="pencilTiny"
                        >lens</i
                      ></a
                    >
                  </li>
                </ul>
              <!-- </div> -->
            <!-- </a>  -->
          </li>

        </ul>
      </div>

CSS 代码：

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

li.fixed-action-btn-horizontal .btn-floating {
  opacity:1 !important;
  transform: scale(1) translateY(0px) translateX(0px) !important;
}
.bttom0px{
  bottom:0!important;
  right:0!important;
  left:90px!important;
}

JavaScript 代码：

var elems = document.querySelectorAll(".fixed-action-btn");
  var elems2 = document.querySelectorAll(".fixed-action-btn-horizontal");
  var instances = M.FloatingActionButton.init(elems, {
    // toolbarEnabled : true,
    hoverEnabled: false,
  });
  var instances2 = M.FloatingActionButton.init(elems2, {
    direction:'right',
  });
相关问题
最新问题