0
こんにちは、私はhtmlとCSSをYouTubeのチュートリアルで学習しています、どのようにCSS/HTMLでナビゲーションをスライドさせるのですか？ 私はスライドのメニューバーを盛り付けるのにいくつかの問題があります
#sidebartoggler
display: none
&:checked + .page-wrap
.sidebar
left:0px
これ以外はすべて正常に動作しています。これをクリックすると、サイドバーが出てきますが、そうではありません。
私は問題を解決しようとしましたが、2日間コードに何か間違ったものを見つけようとしましたが、私はできず、疲れませんでした。
何が間違っているのかがわかります。 助けてください
ps。ユーチューブリンクはhttps://www.youtube.com/watch?v=d4P8s-mkMvs
@import 'bourbon'
.page-content
\t position: relative
\t z-index:0
.toggle
\t text-decoration: none
\t font-size:30px
\t color: black
\t +position(fixed, 20px 0 0 200px)
\t z-index:1
\t
.sidebar
\t +position(fixed, 0px 0 0px 0px)
\t width: 120px
\t padding: 30px
\t background: #333
\t z-index:0
\t
\t
\t
\t li
\t \t color: rgba(255,255,255,0.8)
\t \t font-family: "Ubuntu",sans-serif
\t \t font-size: 16px
\t \t -webkit-font-smoothing: antialiased
\t \t margin-bottom: 16px
\t \t cursor:pointer
\t \t
\t \t &:hover
\t \t \t color: rgba(255,255,255,1)
#sidebartoggler
\t display: none
\t
\t &:checked + .page-wrap
\t .sidebar
\t \t left:0px
\t \t
\t \t \t
\t \t \t<!doctype html>
<html>
\t <head>
\t \t \t <title>GagaPro</title>
\t \t \t <meta charset="utf-8">
\t \t \t <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
\t \t \t <link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
\t \t \t <link rel="stylesheet" href="css/slidebar.css">
\t </head>
\t
\t <body>
\t
\t \t <input type="checkbox" id="sidebartoggler" name="" value="">
\t \t
\t \t <div class="page-wrap">
\t \t \t <label for="sidebartoggler" class="toggle">☰</label>
\t \t
\t \t </div>
\t
\t \t <div class="page-content">
\t \t \t <div class="wrapper">
\t \t \t
\t \t \t </div>
\t \t </div>
\t \t
\t \t <div class="sidebar">
\t \t \t <ul>
\t \t \t \t <li>Home</li>
\t \t \t \t <li>Project</li>
\t \t \t \t <li>Client</li>
\t \t \t \t <li>Blog</li>
\t \t \t \t <li>Home</li>
\t \t \t \t <li>Home</li>
\t \t \t
\t \t \t </ul>
\t \t
\t \t </div>
\t \t \t
\t \t </body>
</html>