- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
更新
通过将以下内容添加到“站点菜单”和“容器”样式,我能够让侧边导航项堆叠:
{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
}
唯一剩下的就是让内容根据点击的标签正确切换。
原帖
我正在使用 flexbox 和 Off-Canvas menu tutorial创建一个悬停的sidenav菜单。
当按下一个选项卡时,我希望该 flex 元素滑到屏幕上并位于最前面。我有滑动到屏幕上的工作,这是导致问题的堆叠顺序。如何更改 flex 元素的堆叠顺序或根据单击的选项卡在显示的内容之间切换?图片应该有助于澄清:
Image - Flexbox Off Canvas Menu
这是我目前为该网站所做的工作的链接:<强> LINK
我看过使用 css 和 javascript 更改堆叠顺序的示例,但我无法完全理解如何使其与 flexbox 元素一起工作。
CSS
#site-wrapper {
position: relative;
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
}
#site-canvas {
width: 100%;
height: 84vh;
position: relative;
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: .3s ease all;
transition: .3s ease all;
margin: 0 auto;
padding: 0.8% 20px; /* Temp: Just spacing. */
-webkit-box-shadow:inset 1px 1px 60px 5px rgba(100,100,100,0.5);
box-shadow:inset 1px 1px 60px 5px rgba(100,100,100,0.5);
display: flex;
flex-wrap: wrap;
}
#site-menu {
width: 300px;
height: 100%;
position: absolute;
top: 0;
left: -300px;
/*background: #428bca;*/
padding: 15px 0 15px 15px;
}
/* Animation */
#site-wrapper.show-nav #site-canvas {
-webkit-transform: translateX(300px);
transform: translateX(300px);
}
#sidenav span {
display: flex;
flex:auto;
justify-content: flex-end;
position: absolute; /* Position them relative to the browser window */
left: -80px; /* Position them outside of the screen */
transition: 0.3s; /* Add transition on hover */
padding: 10px 15px; /* 15px padding */
width: 140px; /* Set a specific width */
text-decoration: none; /* Remove underline */
font-size: 20px; /* Increase font size */
color: white; /* White text color */
border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
}
#sidenav span:hover {
left: 0; /* On mouse-over, make the elements appear as they should */
cursor: pointer;
}
.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#tabOne {
top: 20px;
background-color: #333333; /* Black */
}
#tabTwo {
top: 20px;
background-color: #666666; /* Black */
}
#tabThree {
top: 20px;
background-color: #999999; /* Black */
}
HTML
<div class="page">
<div id="site-wrapper">
<div id="site-canvas">
<div id="mySidenav" class="toggle-nav sidenav">
<span id="tabOne">
<h4>Tab One </h4>
<img alt="Tab Icon"/>
</span>
<span id="tabTwo">
<h4>Tab Two </h4>
<img alt="Tab Icon"/>
</span>
<span id="tabThree">
<h4>Tab Three </h4>
<img alt="Tab Icon"/>
</span>
</div>
<div id="site-menu flex-container">
<div class="container" id="tabOne">
<div class="tabOne-flexItem">
<h1>Tab One Content</h1>
<p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div class="container" id="tabTwo">
<div class="tabTwo-flexItem">
<h1>Tab One Content</h1>
<p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
<p>Lorem ipsum dolor sit amet, laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
<div class="main_content">
<div>
Main Page Content Goes Here
</div>
</div>
</div>
</div>
</div>
Javascript
<script>
/* OFF CANVAS */
$(function() {
"use strict";
$('.toggle-nav').click(function() {
toggleNav();
});
});
/*========================================
= CUSTOM FUNCTIONS =
========================================*/
function toggleNav() {
"use strict";
if ($('#site-wrapper').hasClass('show-nav')) {
// Do things on Nav Close
$('#site-wrapper').removeClass('show-nav');
} else {
// Do things on Nav Open
$('#site-wrapper').addClass('show-nav');
}
}
</script>
如有任何指导,我们将不胜感激。
最佳答案
我对您的代码进行了一些更改以使堆叠顺序正常工作。我将数据属性添加到选项卡,并使用 jQuery 来使用属性值来隐藏或显示容器。由于单击选项卡会更改内容,因此我不想在单击选项卡时关闭 Canvas ,因此我使用悬停来打开 Canvas 。
这是更改哪个容器可见的新 jQuery 代码:
$( ".sidenav span" ).click(function() {
var index = $(this).data('index');
$( ".container" ).each(function(i) {
if (i != index) {
$(this).addClass('hidden');
}
else {
$(this).removeClass('hidden');
}
});
});
看看 fiddle .
关于javascript - 需要帮助/Off-Canvas Flexbox 菜单切换/z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51182358/
这个问题已经有答案了: 已关闭14 年前。 ** 重复:What's the difference between X = X++; vs X++;? ** 所以,即使我知道你永远不会在代码中真正做到
我在一本C语言的书上找到了这个例子。此代码转换输入数字基数并将其存储在数组中。 #include int main(void) { const char base_digits[16] =
尝试使用“pdf_dart”库保存 pdf 时遇到问题。 我认为问题与我从互联网下载以尝试附加到 pdf 的图像有关,但我不确定它是什么。 代码 import 'dart:io'; import 'p
我的 Apache 服务器曾经可以正常工作,但它随机开始对几乎每个目录发出 403 错误。两个目录仍然有效,我怎样才能使/srv/www/htdocs 中的所有目录正常工作? 我查看了两个可用目录的权
这些索引到 PHP 数组的方法之间有什么区别(如果有的话): $array[$index] $array["$index"] $array["{$index}"] 我对性能和功能上的差异都感兴趣。 更
我有一个简单的结构,我想为其实现 Index,但作为 Rust 的新手,我在借用检查器方面遇到了很多麻烦。我的结构非常简单,我想让它存储一个开始值和步长值,然后当被 usize 索引时它应该返回 st
我对 MarkLogic 中的 element-range-index 和 field-range-index 感到困惑。 请借助示例来解释差异。 最佳答案 这两个都是标量索引:特定类型的基于值的排序
我对 MarkLogic 中的 element-range-index 和 field-range-index 感到困惑。 请借助示例来解释差异。 最佳答案 这两个都是标量索引:特定类型的基于值的排序
所以我有一个 df,我在其中提取一个值以将其存储在另一个 df 中: import pandas as pd # Create data set d = {'foo':[100, 111, 222],
我有一个由 codeigniter 编写的网站,我已经通过 htaccess 从地址中删除了 index.php RewriteCond $1 !^(index\.php|resources|robo
谁能告诉我这两者有什么区别: ALTER TABLE x1 ADD INDEX(a); ALTER TABLE x1 ADD INDEX(b); 和 ALTER TABLE x1 ADD INDEX(
我在 Firefox 和其他浏览器上遇到嵌套 z-index 的问题,我有一个 div,z-index 为 30000,位于 label 下方> zindex 为 9000。我认为这是由 z-inde
Link to the function image编写了一个函数来查找中枢元素(起始/最低)的索引 排序和旋转数组。我解决了这个问题并正在检查 边缘情况,它甚至适用于索引为零的情况。任何人都可以 解
我正在尝试运行有关成人人口普查数据的示例代码。当我运行这段代码时: X_train, X_test, y_train, y_test = cross_validation.train_test_spl
我最近将我的 index.html 更改为 index.php - 我希望能够进行重定向以反射(reflect)这一点,然后还进行重写以强制 foo.com/index.php 成为 foo.com/
我最近将我的 index.html 更改为 index.php - 我希望能够进行重定向以反射(reflect)这一点,然后还进行重写以强制 foo.com/index.php 成为 foo.com/
我有一个用户定义的函数,如下所示:- def genre(option,option_type,*limit): option_based = rank_data.loc[rank_data[
我有两个巨大的数据框我正在合并它们,但我不想有重复的列,因此我通过减去它们来选择列: cols_to_use=df_fin.columns-df_peers.columns.difference(['
感谢您从现在开始的回答, 我是React Native的新手,我想做一个跨平台的应用所以我创建了index.js: import React from 'react'; import { Co
我知道 not_analyzed 是什么意思。简而言之,该字段不会被指定的分析器标记化。 然而,什么是 NO_NORMS 方法?我看到了文档,但请用简单的英语解释我。什么是索引时间字段和文档提升和字段
我是一名优秀的程序员,十分优秀!