MaterializeCSSのfixed-action-btnツールバーを単なるツールバーにするには？

Question

fixed-action-btnのようなツールバーをmaterializecssに入れたいのですが、私はそれをツールバーにしてボタンからポップしたくないだけです。誰もこれを行う方法を知っていますか？説明するコードがいくつかあります。

<footer> 
 
    <div class="fixed-action-btn toolbar"> 
 
    <a class="btn-floating btn-large red"> 
 
     <i class="large material-icons">mode_edit</i> 
 
    </a> 
 
    <ul> 
 
     <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li> 
 
     <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li> 
 
     <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li> 
 
     <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li> 
 
    </ul> 
 
    </div> 
 
</footer>

Answer 1

それを行うにはどの"公式"や文書化の道を見つけることができませんでしたが、ここでは実用的な一つだ：

setTimeout(function(){ 
 
    var rO = $('.renderOpen'), 
 
     bF = rO.find('.btn-floating').first(); 
 
    bF.trigger('click'); 
 
    setTimeout(function(){ 
 
    rO.animate({opacity:1},{duration:400,delay:400},function(){ 
 
     rO.removeClass('renderOpen'); 
 
    }) 
 
    }, 270) 
 
});

.renderOpen { opacity: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/> 
 

 
<footer> 
 
    <div class="fixed-action-btn toolbar renderOpen"> 
 
    <a class="btn-floating btn-large red"> 
 
    <i class="large material-icons">mode_edit</i> 
 
    </a> 
 
    <ul> 
 
     <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li> 
 
     <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li> 
 
     <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li> 
 
     <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li> 
 
    </ul> 
 
    </div> 
 
</footer>

Answer 2

私はそれを理解した、私はそれが助けることができるように質問を続けます彼女たち！

<div class="toolbar-fixed red"> 
<ul> 
    <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">insert_chart</i></a></li> 
    <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">format_quote</i></a></li> 
    <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">publish</i></a></li> 
    <li class="waves-effect waves-light"><a href="#!"><i class="material-icons">attach_file</i></a></li> 
</ul> 

.toolbar-fixed { 
    width: 100%; 
    padding: 0; 
    height: 56px; 
    position: fixed; 
    bottom: 0px; 
} 

.toolbar-fixed.active > a i { 
opacity: 0; 
} 

.toolbar-fixed ul { 
display: -webkit-flex; 
display: -ms-flexbox; 
display: flex; 
top: 0; 
bottom: 0; 
} 


.toolbar-fixed ul li { 
-webkit-flex: 1; 
-ms-flex: 1; 
flex: 1; 
display: inline-block; 
margin: -; 
height: 100%; 
transition: none; 
position: relative; 
top: -15px; 

} 


.toolbar-fixed ul li a{ 
display: block; 
    overflow: hidden; 
    position: relative; 

    width: 100%; 
    height: 100%; 
    background-color: transparent; 
    box-shadow: none; 
    color: #fff; 
    line-height: 56px; 
    z-index: 1; 
    } 

.toolbar-fixed ul li a i { 
line-height: inherit; 
} 

.toolbar-fixed ul { 
left: 0; 
right: 0; 
text-align: center; 
} 

.toolbar-fixed ul li { 
margin-bottom: 15px; 
}