Question

嗨我正在通过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>

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

我在制作带有sass的幻灯片菜单栏时遇到了一些麻烦

1 个答案: