我在用 sass 制作幻灯片菜单栏时遇到了一些麻烦答案

【问题标题】：I have some troubles in making slide menu bar with sass我在用 sass 制作幻灯片菜单栏时遇到了一些麻烦
【发布时间】：2016-06-13 07:31:35
【问题描述】：

您好，我正在通过 Youtube 教程学习 html 和 css，如何使用 css/html 滑出导航，但我坚持使用一些代码。一切正常，除了

#sidebartoggler
display: none

&:checked + .page-wrap
 .sidebar
    left:0px

这个。当我点击它时，侧边栏应该会出来，但它不是。

我试图解决这个问题，这两天试图在我的代码中找到任何错误，但我不能并且筋疲力尽。

这对我找出问题所在有很大帮助。请帮帮我

ps。 youtube链接是https://www.youtube.com/watch?v=d4P8s-mkMvs

@import 'bourbon'

.page-content
	position: relative
	z-index:0

.toggle
	text-decoration: none
	font-size:30px
	color: black
	+position(fixed, 20px 0 0 200px)
	z-index:1
	
.sidebar
	+position(fixed, 0px 0 0px 0px)
	width: 120px
	padding: 30px
	background: #333
	z-index:0
	
	
	
	li
		color: rgba(255,255,255,0.8)
		font-family: "Ubuntu",sans-serif
		font-size: 16px
		-webkit-font-smoothing: antialiased
		margin-bottom: 16px
		cursor:pointer
		
		&:hover
			color: rgba(255,255,255,1)

#sidebartoggler
	display: none
	
	&:checked + .page-wrap
	 .sidebar
		left:0px

<!doctype html>

<html>
	<head>
			<title>GagaPro</title>
			<meta charset="utf-8">
			<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
			<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
			<link rel="stylesheet" href="css/slidebar.css">
	</head>
	
	<body>
	
		<input type="checkbox" id="sidebartoggler" name="" value="">
		
		<div class="page-wrap">
			<label for="sidebartoggler" class="toggle">☰</label>
		
		</div>
	
		<div class="page-content">
			<div class="wrapper">
			
			</div>
		</div>
		
		<div class="sidebar">
			<ul>
				<li>Home</li>
				<li>Project</li>
				<li>Client</li>
				<li>Blog</li>
				<li>Home</li>
				<li>Home</li>
			
			</ul>
		
		</div>
			
		</body>
</html>

【问题讨论】：

标签： html css sass menubar

【解决方案1】：

我用普通的 css 尝试过你的代码，我发现了一些很酷的东西。

HTML 中不需要改变任何东西，只有 css 会改变一点

CSS：

 .page-content{
        position: relative;
        z-index:0;
    }
    .toggle{
        text-decoration: none;
        font-size:30px;
        color: black;
        +position(fixed, 20px 0 0 200px);
        z-index:1;
        }
    .sidebar{
        +position(fixed, 0px 0 0px 0px);
        width: 120px;
        padding: 30px;
        background: #333;
        z-index:0;
        display:none;
        }

        li{
            color: rgba(255,255,255,0.8);
            font-family: "Ubuntu",sans-serif;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            margin-bottom: 16px;
            cursor:pointer;
            }
            li:hover{
                color: rgba(255,255,255,1);
          }
    #sidebartoggler{
        display:none;
     }

    #sidebartoggler:checked ~ .sidebar{
         display:block;
    }

【讨论】：