html - Create a slider menu in pure CSS with a Trigger Button
问题描述
I am trying to create a slider menu in pure CSS. It cannot have any JS or any other framework. I have been able to create one, but the button pressed to open the menu cannot be moved. I have created one as below:
body,
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
}
h1,
p,
li {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
color: #222;
margin: 0 0 1em;
}
section li {
margin: 0 0 10px;
}
h1 {
font-size: 2.5em;
font-weight: 300;
}
p {
font-size: 1em;
line-height: 1.5em;
}
.wrapper {
overflow: hidden;
}
section {
padding: 30px 30px 30px 80px;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 250px;
height: 100%;
margin: 0 0 0 -250px;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
nav ul {
width: 250px;
height: 100%;
padding: 0;
margin: 0;
list-style: none;
background: #222;
overflow: hidden;
}
nav li {
margin: 0;
}
nav a {
color: #fff;
font-size: 1em;
font-family: 'helvetica neue', helvetica, arial, sans-serif;
text-decoration: none;
display: block;
padding: 12px 15px;
font-weight: 300;
letter-spacing: 2px;
border-bottom: 1px solid #333;
}
nav a:hover {
background: #111;
}
label {
display: block;
font-family: 'helvetica neue', helvetica, arial, sans-serif;
font-weight: 700;
background: #1ea1b8;
width: 42px;
height: 42px;
line-height: 42px;
color: #fff;
text-align: center;
font-size: 2em;
line-height: 1.1em;
position: fixed;
top: 10px;
left: 10px;
-moz-transition: all 200ms ease-in;
-webkit-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
z-index: 500;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked~nav {
margin: 0;
}
input[type="checkbox"]:checked~label {
left: 260px;
}
input[type="checkbox"]:checked~section {
-webkit-transform: translate3d(260px, 0, 0);
-moz-transform: translate3d(260px, 0, 0);
-o-transform: translate3d(260px, 0, 0);
transform: translate3d(260px, 0, 0);
}
<input type="checkbox" id="navigation" />
<label for="navigation">
+
</label>
<nav>
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Latest News</a>
</li>
<li>
<a href="">What We Do</a>
</li>
<li>
<a href="">Another Link</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</nav>
This works, however - when I try to move the TRIGGER button to another location, for example, inside a DIV container, the menu doesn't work anymore, for example;
<nav>
<ul>
<li>
<a href="">Home</a>
</li>
<li>
<a href="">Latest News</a>
</li>
<li>
<a href="">What We Do</a>
</li>
<li>
<a href="">Another Link</a>
</li>
<li>
<a href="">Contact</a>
</li>
</ul>
</nav>
<div>
<input type="checkbox" id="navigation" />
<label for="navigation">
+
</label>
</div>
I am trying to incorporate this slider menu into a CMS system, and I want to place the 'open menu' button in a specific place on the page. Any help would be appreciated.
Thanks
解决方案
推荐阅读
- api - 如何使用/阅读 api 文档来发送简单请求?
- rest - 如何在 2Checkout 上设置可变价格的产品/服务
- c# - 当 Azure 应用服务上的“仅 HTTPS”选项处于打开状态时,无法切换 Blazor 应用(在同一托管下)
- javascript - 错误:EACCES:权限被拒绝,打开“/Users/me/.yarnrc”
- typescript - 如何制作具有扩展基础的不同类型的地图?
- python-3.x - Httprequest 没有属性“_read_started”
- javascript - 我无法使用变量设置我的电子窗口大小
- docker - 在 Linux 上的“localhost”访问 minikube 中正在运行的应用程序
- android - 如何使用房间数据库中的实体填充片段?
- batch-file - 如何运行 DISKPART 脚本并在批处理中显示输出