- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时,我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
我的滑入式菜单仍有问题。据我所知,一切正常,但当用户向下滚动并通过汉堡图标打开菜单时,导航不可见,因为它也在滚动。所以我需要的是让 navi 变粘。但是当我将位置(类:导航)从“绝对”更改为“固定”时,导航超出了我的最大宽度(如果屏幕大小 > 最大宽度)。
$(document).ready(function(){
$('input:checkbox').change(function(){
if($(this).is(":checked")) {
$(".content").animate({ left: '-200px' });
$(".content").css({"box-shadow": "0 0 5px 5px rgba(0,0,0,0.5)" });
} else {
$(".content").animate({ left: '0' });
$(".content").css({"box-shadow": "none" });
}
});
});
body {
background-color:red;
}
h1 {
padding: 10px 0 20px 0;
font-size: 1.7em;
}
p {
padding-bottom: 20px;
line-height: 18px;
}
.wrp {
position:relative;
max-width: 1200px;
margin: 0px auto;
padding:0 20px;
height:100%;
background-color:orange;
}
.header {
position:fixed;
top:0;
width:100%;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
z-index:1000000;
}
.logo {
float:left;
width: 200px;
border:solid red 1px;
}
.menu {
float:right;
border:solid black 1px;
position:relative;
}
.content2 {
padding:5px 10px;
background-color:blue;
color:white;
position: relative;
top: 0;
bottom: 100%;
left: 0;
}
.content {
/* Critical position and size styles */
min-height: 100%;
min-width: 100%;
position: relative;
top: 0;
bottom: 100%;
left: 0;
z-index: 1;
background-color:blue; /* Needs a background or else the nav will show through */
/* non-critical apperance styles */
background-size: 200%;
opacity: 0.5;
transition: right 0.5s;
}
.nav {
position:absolute;
width: 200px;
top: 0;
right: 0;
bottom: 0;
padding-top: 50px;
background-color:green;
opacity: 0.5;
}
/* hb icon */
.menu-icon {
padding: 18px 14px; /* better clickable > please consider in header */
cursor: pointer;
display: inline-block;
float: right;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
.menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
width: 18px;
}
.menu-icon .navicon:before,
.menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.menu-icon .navicon:before {
top: 5px;
}
.menu-icon .navicon:after {
top: -5px;
}
/* Nav Trigger */
.nav-trigger {
/* critical styles - hide the checkbox input */
position: absolute;
clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
/* critical positioning styles */
right: 15px;
top:0;
z-index: 3;
}
.nav-trigger:checked ~ .menu-icon .navicon {
background: transparent;
}
.nav-trigger:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.nav-trigger:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.nav-trigger:checked ~ .menu-icon:not(.steps) .navicon:before,
.nav-trigger:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
/* Make the Magic Happen */
.nav-trigger + label, .wrp {
transition: left 0.5s;
}
.nav-trigger + label {
right: 15px;
transition: right 0.5s;
}
.nav-trigger:checked + label {
right: 215px;
}
.nav-trigger:checked ~ .nav {
border: 4px solid red;
}
.nav-trigger:checked ~ .content {
left: -200px;
box-shadow: 0 0 5px 5px rgba(0,0,0,0.5);
background-color:red;
}
<link href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="wrp">
<div class="logo">Logo</div>
<div class="menu">
<input type="checkbox" class="nav-trigger" id="nav-trigger" />
<label for="nav-trigger" class="menu-icon"><span class="navicon"></span></label>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div class="wrp">
<div class="content">
<h1>This is my content</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<div class="nav">
<h1>Navi</h1>
</div>
</div>
Codepen 上的代码:http://codepen.io/anon/pen/NxeLzY
有人能帮忙吗?
最佳答案
在导航容器内放置一个子容器,例如:
<div class="nav">
<div class="nav-child">
<h1>Navi</h1>
</div>
</div>
然后设置样式,使子容器固定:
.nav-child{
position:fixed;
}
Codepen 解决方案请看这里:
关于javascript - 防止滚动但 div 需要位置 :absolute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35342391/
我有一个应用程序,其中许多对象都扩展了一个抽象类,该抽象类定义了诸如 create() edit() retrieve() 和 delete()。由于每个子类对这些函数使用相同的逻辑,抽象类定义了默认
我正在使用$anchorScroll滚动到页面顶部,其中 html 元素具有 ID #brand。 AngularJS 代码: $location.hash(
我想停用我的应用程序中的右键单击,该右键单击提供了在桌面上安装应用程序的选项。我该如何做这样的事情? 最佳答案 右键单击 Visual Studio 中的项目并选择属性。那里有一个复选框“启用浏览器运
我使用 jquery 定位 div,在我的 CSS 中我有一个 div.right-sm:hover{background-color: blue} 我想使用 jquery 停止悬停: $(this
所以,我正在尝试复制 html5“占位符”属性功能。 我目前坚持的一件事是,在获得元素焦点时,插入符号立即出现在输入的开头。 就目前情况而言,插入符号出现在用户单击的位置,然后当我使用 jQuery
当表单填写并发送时,如果您刷新页面,它表示表单将再次发送。 (再次提交表格)。 防止这种情况发生的好方法是什么?或者终止这个 session ? 这方面有什么指导吗? 谢谢 最佳答案 处理完POST信
我想阻止 @ 被输入到 input 中。但它不起作用,知道为什么吗? $(function() { $(document).on('keyup', '[placeholder="x"]', fun
我正在使用 PHP 创建一个应用程序并涉及 MySQL。如果在请求过程中发生错误,我将如何“将查询分组在一起”,检查它是否会成功,然后对真实表进行实际影响。如果对表的实际更新失败,则恢复到更新之前的状
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: Best Java obfuscator ? 对于我的示例,我知道 eclipse 提供了一个反编译插件。而
这是一个演示我的问题的 fiddle :JSFiddle 我正在制作自定义下拉菜单(实际上我使用的是 icomoon 图标而不是 V)...它看起来不错,但是父元素的 ::after 是阻止选择:(
每当我编写需要大量条件的代码时,我都会这样做: if foo: if bar: if foobar: if barfoo: if foobarfoo:
我不确定术语是否正确,您可以使用哪些代码实践来使某人难以修改二进制文件/程序集以绕过检查: 例如在源代码中。 bool verificationResult = verify(); if (verif
我正在寻找一种简单的方法来检查多个零件表,以确定给定零件号在添加到给定表之前是否已经存在。 我目前想到的最好的想法是一个辅助表,它简单地将所有表中的每个 PN 列在一个列中,并带有一个唯一的键;但是我
这个问题在这里已经有了答案: jquery stop child triggering parent event (7 个答案) 关闭 8 年前。 我不确定这是否真的冒泡,我会解释。 我有这个:
我有一个 Spring MVC web 应用程序(不确定该信息是否重要,但它可能是)使用 ModelAndView 将字符串值传递给 JSP 文件。 字符串值的形式是: d@.
我在这里尝试使用表单 key 方法进行 csrf 保护 http://net.tutsplus.com/tutorials/php/secure-your-forms-with-form-keys/
htmlentities 是防止 PHP 中的 XSS 的最佳解决方案吗?我还想允许像 b、i、a 和 img 这样的简单标签。实现这一点的最佳解决方案是什么?我确实考虑过 bbcode,但发现如果没
我有一个非常基本的 JAX-RS 服务(下面的 BookService 类),它允许创建 Book 类型的实体(也在下面)。 POST负载 { "acquisitionDate": 14188
我正在使用 Polymer 1.5,我确实需要“this”变量不要映射到外部。我知道 typescript 会为某些人做这件事 valid reasons . declare var Polymer:
这个问题在这里已经有了答案: Class-level read-only properties in Python (3 个答案) 关闭 6 年前。 有没有一种方法可以通过重写实例变量的 __set
我是一名优秀的程序员,十分优秀!