CSSだけでスライドメニューを実装する方法
マウスホバー時にメニューをスライド表示させる方法
マウスホバーにてメニュー要素を開閉をさせる方法です
記述は簡単ですが、スマホやタブレット表示には不向きかも
HTML
<ul class="sample1">
<li class="menu">MENU</li>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>CSS
.sample1{
list-style-type: none;
}
.sample1 li:not(.menu){
overflow: hidden;
height: 0;
transition: .8s;
}
.sample1:hover li{
overflow: visible;
height: 40px;
}※transitionで開閉の動作時間を指定します not(.menu)は「menuというclass名以外は」という指定です
クリック（タップ）で要素を開閉させる方法
チェックボックスを使ってスライダーメニューを実装する方法です
See the Pen css slide menu2 by yochans (@yochans) on CodePen.
HTML
<label for="switch">MENU</label>
<input type="checkbox" id="switch"/>
<ul class="sample2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>CSS
input[type="checkbox"]#switch{
overflow: hidden;
height: 0;
}
.sample2{
list-style: none;
}
.sample2 li{
overflow: hidden;
height: 0;
transition: .8s;
}
input[type="checkbox"]#switch:checked + .sample2 li{
overflow: visible;
height: 50px;
}