- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一般都在学习 css,但我很失败,非常,非常努力...
我想用我的 css 网格做一件简单的事情,只是让隐藏的菜单从右到左而不是从左到右动画化,但我不知道我必须改变什么才能做到这一点..
你们能帮帮我吗?这是 fiddle :https://jsfiddle.net/xwvL2a70/
/* grid */
.container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
}
/* items */
.container > * {
color: #353535;
font-size: 1.2em;
line-height: 1.5;
padding: 20px;
background: #d0cfc5;
}
/* nav styles */
.container nav {
background: #136fd2;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav a {
color: #d0cfc5
}
nav a:hover {
text-decoration: none;
}
/* media query for grid layout */
@media only screen and (min-width: 600px) {
/* grid */
.container {
grid-template-columns: repeat(4, 1fr);
}
/* specific item styles */
.container header,
.container nav,
.container footer {
grid-column: span 4;
}
.container section {
grid-column: span 3;
}
/* nav styles */
nav ul li {
display: inline-block;
padding: 0 20px 0 0;
}
/* hide toggle */
.toggle {
display: none;
}
}
/* media query for nav styles */
@media only screen and (max-width: 599px) {
#nav {
transition: transform .3s ease-in-out;
top: 0;
bottom: 0;
min-height: 100vh; /* override Safari bug */
position: fixed; /* or choose `absolute` depending on desired behavior*/
width: 300px;
left: -340px;
}
#nav:target {
transform: translateX(340px);
}
.close {
text-align: right;
display: block;
text-decoration: none;
font-size: 3em;
position: relative;
top: -30px;
}
.open {
text-align: left;
}
}
最佳答案
你只需要改变你的 left: -340px;
到 right: -340px;
然后你的 transform: translateX(340px);
到 转换:translateX(-340px);
。这两者都在媒体查询中。
这是一个工作示例(如果您以全屏方式查看并缩小窗口宽度以进行预览):
/* grid */
.container {
display: grid;
grid-template-columns: 1fr;
grid-gap: 10px;
}
/* items */
.container > * {
color: #353535;
font-size: 1.2em;
line-height: 1.5;
padding: 20px;
background: #d0cfc5;
}
/* nav styles */
.container nav {
background: #136fd2;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav a {
color: #d0cfc5
}
nav a:hover {
text-decoration: none;
}
/* media query for grid layout */
@media only screen and (min-width: 600px) {
/* grid */
.container {
grid-template-columns: repeat(4, 1fr);
}
/* specific item styles */
.container header,
.container nav,
.container footer {
grid-column: span 4;
}
.container section {
grid-column: span 3;
}
/* nav styles */
nav ul li {
display: inline-block;
padding: 0 20px 0 0;
}
/* hide toggle */
.toggle {
display: none;
}
}
/* media query for nav styles */
@media only screen and (max-width: 599px) {
#nav {
transition: transform .3s ease-in-out;
top: 0;
bottom: 0;
position: fixed;
width: 300px;
right: -340px;
}
#nav:target {
transform: translateX(-340px);
}
.close {
text-align: right;
display: block;
text-decoration: none;
font-size: 3em;
position: relative;
top: -30px;
}
.open {
text-align: left;
}
}
<div class="support-grid"></div>
<div class="container">
<header role="banner">
<a class="toggle open" href="#nav">open</a>
<h1>Header</h1>
</header>
<nav id="nav" role="navigation">
<a class="toggle close" href="#">×</a>
<ul>
<li>
<a href="#">Item 1</a>
</li>
<li>
<a href="#">Item 2</a>
</li>
<li>
<a href="#">Item 3</a>
</li>
</ul>
</nav>
<section role="main">
<article>
<h2>Article</h2>
<p>Curabitur orci lacus, auctor ut facilisis nec, ultricies quis nibh. Phasellus id diam sollicitudin, malesuada turpis id, gravida erat. Maecenas placerat elit vel hendrerit convallis. Sed in mauris ut justo vulputate viverra feugiat ac dui. Fusce feugiat arcu in vehicula vehicula. Donec varius justo at nulla aliquet volutpat.</p>
<p>Ut id rutrum eros. Nulla tristique, magna et mattis vulputate, mi eros suscipit turpis, nec bibendum turpis nunc feugiat sapien. Nunc arcu est, lacinia id diam quis, sagittis euismod neque. Nullam fringilla velit sed porta gravida. Proin eu vulputate libero. Ut a lacinia enim. Etiam venenatis mauris et orci tempor congue. Sed tempor eros et ultricies congue. Aenean sed efficitur orci. Nulla vel tempus mi.</p>
<p>Ut cursus suscipit augue, id sagittis nibh faucibus eget. Etiam suscipit ipsum eu augue ultricies, at rhoncus mi faucibus. In et tellus vitae leo scelerisque fringilla nec at nunc.</p>
</article>
</section>
<aside>
<h3>Aside</h3>
</aside>
<footer>
<h3>Footer</h3>
</footer>
</div>
关于Css 网格和汉堡包菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48280455/
您能否建议如何在 Bootstrap 或 IE 兼容的 CSS 网格中,在没有 CSS 网格的情况下进行以下布局。 在大屏幕中 头部,左侧堆叠的 body 和右侧覆盖头部和 body 高度的图像。 [
我想在 Objective-C 中绘制一个 15*15 的网格。格子颜色是蓝色的,就像在诺基亚制作“贪吃蛇”游戏的棋盘一样。 我试过使用 for 循环来创建 subview ,但它似乎不起作用,我查看
我正在尝试将 CSS 网格与 grid-template-columns: repeat(auto-fill, auto) 一起使用,单元格被设置为最大宽度,导致每行一个元素。 p> 是否可以让元素宽
我正在努力在网格的自定义列上添加一个指向网站的简单、简单的链接。我用了 Inchoo blog为列添加自定义渲染器,它可以工作。我认为只需修改渲染并添加标签就足够了。但我的希望破灭了,行不通。 如何做
使用 Gnuplot 我绘制了下图 - 现在,正如您在图像中看到的那样,很难在线条之间识别出其末端的块。所以我想用不同的颜色或样式交替着色网格。 我现在用来给网格着色的代码是 - set style
假设我有一个非常简单的 WPF 网格(6 行 x 6 列),定义如下:
我有一个希望绑定(bind)到 WPF 网格的集合。 我面临的问题是列数是动态的并且取决于集合。这是一个简单的模型: public interface IRows { string Messa
我正在使用 Vaadin 8,我想制作某种混淆矩阵。我想知道是否可以根据单元格位置而不是数据提供者手动填充表格/网格的值。 referenceTable.addColumn(reference ->
我在 http://jsfiddle.net/TsRJy/ 上创建了一个带有 div 框的网格. 问题 我不知道如何使 a:hover 工作。 信息 重写 HTML 代码,因为表格不适合我。 http
银光处女在这里。如何使网格周围的用户控件自动调整大小以适应内部网格宽度?目前,当浏览器窗口更宽时,用户控件的显示尺寸约为 300 或 400 像素。它在数据网格周围呈现垂直和水平滚动条,这很丑陋。我想
这个问题已经有答案了: Equal width columns in CSS Grid (11 个回答) 已关闭 2 年前。 使用 CSS Grid,当您不知道会有多少个子项时,如何将所有子项保留在一
我想使用 CSS Grid 的 grid-template-areas。 但问题是我正在使用的 CMS 添加了大量额外的包装器。有没有办法忽略额外的包装?因为它弄乱了漂亮的网格区域...... 我正在
在我的Grid中,当我单击“操作”按钮(下面的代码中显示的“删除和编辑”按钮)时,我需要弹出一个窗口,而不用警告消息提醒用户; 在下面的代码中,我正在使用HANDLER handler: button
这个问题已经有答案了: Equal width columns in CSS Grid (11 个回答) 已关闭 2 年前。 使用 CSS Grid,当您不知道会有多少个子项时,如何将所有子项保留在一
我需要模拟一个仓库,其中有几辆自动驾驶车辆在给定的布局上移动,并具有简单的优先级规则。根据我的理解,这个问题可以通过离散事件模拟(DES)轻松解决,我会使用 SimPy为了这。 我看到的问题是,我似乎
在 ASP.NET 中,我可以让用户控件在页面上的表格中占据多个单元格: 用户控件1: foo bar 第1页: 并且自动调整列宽以适应最大的用户控件。 这也可以在 WPF
我正在寻找一种方法来实时搜索我的网格+要过滤的复选框。我有一个包含学生的网格(照片和姓名)。我想要的是有一个复选框,可以过滤学生所在的不同类(class)。还有一个搜索栏,我可以在其中输入学生姓名。
我正在使用 jQuery 和 jQuery UI 构建一个 Web 应用程序。我陷入了僵局。我需要的是一个 jQuery 网格,它具有可编辑字段,并以某种方式在这些可编辑单元格之一上合并一个自动完成字
我想知道是否有其他 JavaScript 组件可以提供具有多个分组的网格表示。下面是jqGrid的截图我扩展了允许该功能,但它需要获取所有数据。我希望在扩展分组时加载数据。 另一个修改后的 jqGri
我一直在为我将在此处描述的 CSS 问题而烦恼: 在下面的示例 ( https://codesandbox.io/s/jjq4km89y5 ) 中,您可以看到一个可滚动的内容(紫色背景)和一个被左侧面
我是一名优秀的程序员,十分优秀!