javascript - 带列的侧边栏导航
问题描述
https://codepen.io/rudolph-reti/pen/PoqEjYm
<div id="mySidenav" class="sidenav">
<a href="java script:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a><a href="#">About</a><a href="#">Services</a><a href="#">Clients</a><a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
body {
font-family: "Lato", sans-serif;
}
.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: 15px;
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;
}
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
在侧边栏中,根据其当前大小和链接数量,滚动条是否出现。我想为侧边栏中的链接设置 150 px 宽的列,并使滑块仅在没有新列的位置时出现。怎么做?
版本 10.03.2020:我希望在文本列中排列链接:
- 关于
- 服务
- 客户
- 接触
等等
解决方案
您可以尝试将其添加到您的 CSS:
.sidenav a {
min-width: 50px;
float: left;
}
@media (max-width: 480px) {
.sidenav a {
float:none;
}}
通过使用媒体查询,您可以仅为较小的屏幕设置侧边栏链接的样式,例如所有低于 480 像素的屏幕。
推荐阅读
- php - 当我编辑然后更新它时如何按 id 显示选择选项?
- android - packageInfo.requestedPermissions 返回不正确的权限
- mysql - 基于联接从多个表中检索数据时出错
- python - 如何从python传递kwargs以更新sql中的多个列
- firebase - 如何为 Firebase Cloud 消息添加 Google API 控制台创建的 API 密钥
- r - 以 png 格式导出使用 rworldmap 创建的地图
- c# - 选择包含部分关键字的引号之间的所有内容
- javascript - 如何将对象类型的 json 数组传递给 MVC 控制器类
- microsoft-graph-api - 如何调试团队机器人的问题?
- php - 如何将模型中的数组返回显示到 Codeigniter 中的视图