css - 基础切换画布菜单
问题描述
切换功能适用于小屏幕,但在使用大屏幕时切换功能不会显示/隐藏容器。
有没有办法让容器默认显示在大屏幕上,但也可以使用 Foundation 通过按钮单击来显示和隐藏容器?
容器:
<div class="off-canvas position-left reveal-for-large is-transition-push"
id="mainSidebar"
data-off-canvas
data-position="left"
aria-hidden="false">Content goes here.</div>
按钮:
<button class="menu-icon"
type="button"
data-open="mainSidebar"
aria-expanded="false"
aria-controls="mainSidebar">Toggle container</button>
解决方案
切换所有设备的画布外菜单。
CSS 代码
<style>
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
HTML 代码
<body>
<div id="sideNav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#" class="active">Home</a>
<a href="#">About Us</a>
<a href="#"> Our Services</a>
<a href="#">Contact Us</a>
<a href="#">Sign Up</a>
<a href="#">Login Up</a>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ </span>
</div>
用于打开和关闭切换的 JS 脚本
<script>
function openNav() {
document.getElementById("sideNav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("sideNav").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
document.body.style.backgroundColor = "white";
}
</script>
</body>
推荐阅读
- azure - 将单元测试写入队列触发 Azure webjob
- python - 我正在尝试将此值放入表中的一行中。我该如何解决?
- java - 为什么我的 while 循环每次都打印出相同的内容?
- python - 如何从 vaderSentiment 获得更好的数据?
- springdoc - 我已经使用 springdoc 安装了 OpenAPI 3,但是 URL 很奇怪。我可以将其更改为预期值吗?
- java - 杰克逊注释问题
- windows - 通过 bat 文件或 cmd 远程启动/停止 Windows 服务
- google-bigquery - 在 Google bigquery 中创建多列数组
- javascript - 如何准确地使用 Java Script JSON.parse() 函数来平面显示文本?
- airflow - 云作曲家气流插件使用