CSSだけでスライドメニューを実装する方法

2018年5月13日CSSCSSデザイン

マウスホバー時にメニューをスライド表示させる方法

マウスホバーにてメニュー要素を開閉をさせる方法です

記述は簡単ですが、スマホやタブレット表示には不向きかも

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

2018年5月13日CSSCSSデザイン

Posted by Yousuke.U