cssでハンバーガーメニューを要素ごとスライド

Question

cssでハンバーガーメニューを作りました。
上に重なって表示されます。
これを重ならないように、メニューをひらいて要素ごとスライドさせるには、cssだけではできないのでしょうか？

<div class="header">

</div>

</div>
  <input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
  <label for="openSidebarMenu" class="sidebarIconToggle">
    <span class="spinner diagonal part-1"></span>
    <span class="spinner horizontal"></span>
    <span class="spinner diagonal part-2"></span>
  </label>

<div id="sidebarMenu">
 <ul class="sidebarMenuInner">
      
      <li>中身</li>
      <li>中身</li>

    </ul>```ここに言語を入力
コード

</div><!--sidebarMenu--> ```

cssです。

#sidebarMenu {
    height: 100%;
    position: fixed;
	z-index: 9999;
    width:40%;
    margin-top: 61px;
	background-color:#FFF;
    transform: translateX(-100%);
    transition: transform 250ms ease-in-out; 
	
}


input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 22px;
    left: 15px;
    height: 22px;
    width: 22px;
	position:fixed;
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color:#f940a8;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}

Answer 1

ご提示のコードでは検証自体が出来ませんでした。

以下蛇足です。

海外のCSSハックでありそうな気もするけど、
やりたいこと自体が『初心者』と言えないし、
コードもだいぶ見づらいので、
他の回答は恐らくつかないかなぁと。

もうちょっと追記
ハンバーガーでfixedなので、上下方向をずらしてもあまり意味がない気がいたします。
※ずらしても結局見えない
となると、『スライド』は横方向でしょうか？
横にスライドさせても大半は隠れると思われるため、『見せ方』としてのスライドになりますか？

メニューとメインコンテンツを分けて、

input:check + main {
  transform: translateX(-200px);
}
//もしくは
input:check ~ main {
  transform: translateX(-200px);
}

おまけ付けておきます。※応用で解決してくれるといいなぁという期待を込めて※
下記の画像はteratailで検証してみたものです。

input:checked + dd(要素は適当に決めました)

input:checked ~ dd(要素は適当に決めました)

inputにposition: fixed;でも+ddがずらせます。

Comments

[ayuayuayu]

細かく答えていただいてありがとうございます。
やってみます！！
コードも見ずらいとのことで勉強になります。