私はマテリアライズを使用して、私のサイトを乗り始めたが、今私は、ブートストラップに移行したいです。Materialize Horizontal FABと同様のメニューを作成するには？
私はスターターテンプレートのブートストラップをベースとしてウェブサイトを構築します。
HTMLとCSSのみを使用してマテリアライズと同様のメニューを設定し、同じ効果を維持する最も簡単な方法は何ですか？
あなたは純粋なCSSでメニューを作成することができますブートストラップ(you can find it on Github)に
を材料設計を使用することができ、ここでは一例です：
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}<body>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div style="margin-left:25%;padding:1px 16px;height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>することができますを使用して表示される要素を表示：表示しないneの場合は、Jquery関数.toggle（）を使用して表示できます。ここで は一例です：
$(document).ready(function(){
$("li.show > a").click(function(){
$("li.hide").fadeToggle();
});
});body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 25%;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li:nth-child(2)
{
display: none;
background: #4CAF50;
padding: 10px;
}
li a:active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="show">
<a href="#">Click me to show.</a>
</li>
<li class="hide">
This is an hidden element
</li>
</ul>
それを説明する簡単な方法はありません。私はBootstrapにはあらかじめ作成されたメニューがないので、自分で作成する必要があると思います。コードがマテリアルデザインでどのように機能するかを見て、あなた自身でそれを複製しようとしてください。それを学ぶ最善の方法です。 –
@SandrinaPereiraに感謝します！私はCSSとJavaScript Materializeを開き、それを理解しようとします。 –
ホバー効果についてのヒント：メニューの「子供」はポジションアブソリュート、不透明度0〜不透明度1です。これは始めるには良い方法だと思います。そしてあなたはcss –