个人中心
gpt4 book ai didi

jquery - 固定侧边栏，滑出 Canvas 导航

转载 作者：行者123 更新时间：2023-11-28 16:43:08 26 4
gpt4 key购买 nike

有人问我如何将 Canvas 导航菜单滑出 Lanyon来自 Jekyll 的 Poole 系列。我最初是从 this Scotch.io tutorial 学习如何制作 Canvas 外导航的。 ，它使用 CSS3 转换。

我有两支笔:

这两支笔几乎一模一样。在第一个示例中，如果您找到 aside 并将位置更改为 fixed，它不会做任何有用的事情。经过进一步调查，您似乎无法为已转换的元素设置固定位置。

所以，我只需要想出一些技巧来让它工作，我通过将所有内容设置为 position: absolute 并具有不同程度的 left 来做到这一点，并对所有元素(导航图标、main、aside)进行过渡。

然而，在 CSS3 过渡平滑的地方，定位黑客是参差不齐的。这在移动设备上尤为明显。

无论如何，我很好奇有什么更有效的方法来实现固定滑出侧边栏。

最佳答案

使用一点 JQuery 和一些 CSS 可以很容易地制作非 Canvas 导航。在这个DEMO你可以看到。我不知道为什么在 JSFiddle 和 CODE SNIPPET 中我不能将 transform: translateX(290px); 放到正确的类中(参见 CSS 的注释)但是我在浏览器上测试了完整的代码并且它运行得很好。我为“良好”的 UI 添加了一些 CSS，但如果您了解基本的 CSS，则可以轻松编辑它。希望对您有所帮助。

编辑:

要在打开 NAV 时保持滚动条处于事件状态，您只需从 .m-nav-open 类中删除 overflow: hidden;

$(function(){		
	$(".m-nav-opener").click(function(){
		if ($("body").hasClass("m-nav-open")){
			$("body").removeClass("m-nav-open");
		} else {
			$("body").addClass("m-nav-open");
		}
	});
});
body {
    margin: 0px;
    min-height: 100%;
    -webkit-transition: all 0.8s ease 0s;
            transition: all 0.8s ease 0s;
    text-rendering: optimizespeed;
    width: 100%;
    -moz-text-size-adjust: none;
    max-width: 100%;
    height: 100%;
}
.m-nav-container {
  position: fixed;
  z-index: 1001;
  width: 290px;
  height: 100%;
  background: #2F2F2F;
  padding: 0px;
  font-size: 1.15em;
  box-sizing: border-box;
  top: 0px;
  overflow-y: auto;
  overflow-x: hidden;
  left: -290px;
  -webkit-transition: all 0.8s ease 0s;
          transition: all 0.8s ease 0s;
}
.m-nav-open {
  /*transform: translateX(290px); use this on your code*/
}
.m-nav-open .m-nav-container {
  -webkit-transform: translateX(290px);
      -ms-transform: translateX(290px);
          transform: translateX(290px); /* cancel this on your code*/
}
.nav-mobile {
  width: 100%;
}
.nav-mobile ul {
  list-style: outside none none;
  padding: 0px;
  margin:0px;
}
.nav-mobile li {
  display: block;
  border-radius: 0px;
  margin: 0px;
  border-top: 1px solid #292929;
  width: 100%;
  padding: 0px;
}
.nav-mobile li:last-child {
  border-bottom: 1px solid #292929;
}
.nav-mobile a {
  display: block;
  color: #919191;
  padding: 15px;
  text-decoration: none;
  border-radius: 0px;
  cursor: pointer;
  font-family: "Open Sans", sans-serif, Helvetica;
  font-weight: 300;
  font-size: 1.0em;
}
.nav-mobile a:hover {
  color: #fff!important;
  background-color: #505050;
}
.m-nav-opener {
  border: medium none;
  background: transparent none repeat scroll 0% 0%;
  padding: 0px;
  cursor: pointer;
  left: 3%;
  top: 24px;
  position: absolute;
}
.m-nav-opener:hover {
  background: none;
  border: none;
  text-decoration: none;
  outline: none;
}
.m-nav-opener:focus {
  text-decoration: none;
  outline: none;
}
.m-nav-opener:active {
  background: none;
  border: none;
  color: #FFF;
  padding-top: 0px;
  padding-bottom: 0px;
}
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<button class="m-nav-opener">OPEN</button>
<div class="m-nav-container">
<nav class="nav-mobile">
    <ul>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
        <li><a href="#">Page</a></li>
    </ul>
</nav>
</div>
<p style="height:2000px;">Hi</p>
</body>
</html>

关于jquery - 固定侧边栏，滑出 Canvas 导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33482912/

26 4 0
文章推荐： css - DIV 元素不接触
文章推荐： 带 CSS 的 HTML 不工作
文章推荐： jQuery 对象属性而不是类
文章推荐： python - 将 XML 提取到以父属性作为列标题的数据框中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com