我在用 sass 制作幻灯片菜单栏时遇到了一些麻烦
Posted
技术标签:
【中文标题】我在用 sass 制作幻灯片菜单栏时遇到了一些麻烦【英文标题】：I have some troubles in making slide menu bar with 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>【问题讨论】：
【参考方案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 制作幻灯片菜单栏时遇到了一些麻烦的主要内容，如果未能解决你的问题，请参考以下文章