jquery - 响应导航 : Parent Div Collapsing in Mobile Screen?-6ren

jquery - 响应导航 : Parent Div Collapsing in Mobile Screen?

转载作者：太空宇宙更新时间：2023-11-04 08:08:35

27

4

所以我有一个响应式导航，.sidebar-nav div，它是导航包装器并且是 positioned:absolute; 所以我可以用 left: 和 right: 属性。

问题:因为这个 div 是绝对的，父 main-header div 崩溃了。

需求:我希望主标题显示在手机屏幕上，背景颜色为白色，以便用户可以看到汉堡导航。

不确定我的 html 结构如何实现？想法

这是演示链接:http://www.radian3.com

HEADER.PHP

    <!DOCTYPE html>
<html  <?php language_attributes(); ?>>
<head>
    <title>IPE</title>
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body-wrapper">
<div class="main-outer-header">

    <header class="main-header">
        <div id="sidebar-nav">              
            <div class="logo-nav-one-wrap">
                <nav class="nav-one">
                    <li id="primary-headline" class="logo-icon"><img src="#"><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></li>

                    <ul>
                        <?php 

                            $args = array(
                                'theme_location' => 'primary'

                            );
                            wp_nav_menu($args);
                        ?>


                    </ul>


                    </nav>

            </div>

            <nav class="nav-two home-nav">
            <div class="nav-two-wrap">

                <?php       
                    $walker = new Nav_Walker_Nav_Menu;

                    $args = array(
                        'theme_location' => 'secondary',
                        'walker' => $walker

                    );
                    wp_nav_menu($args);
                ?>          
            </div>

            </nav>

            <div id="sidebar-btn">
                <span></span>
                <span></span>
                <span></span>               
            </div>


        </div>


    </header><!--  /HEADER -->
    </div>


<?php wp_head(); ?>

CSS

    .main-outer-header {
        background-color: red;
        height: 300px;
    }


    #nav-desc-show {
        display: block;
        text-align: center;
        position: relative;
        font-weight: normal;
        margin-left: 13px;
    } 

/* HEADER */
.main-header {
    width: 100%;
/*  height: 50px;
*/  background-color: white;
}
/*
    Mobile Sidebar Navbar
*/
#sidebar-nav {
    display: inline-block;
    background-color:#151718;
    width: 200px;
    height: 100%;
    position: absolute;
    left: -200px;
    top:0px;
    z-index: 99;
    transition: left 0.3s linear;

}
/* if sidebar has a class of .visible*/
#sidebar-nav.visible {
    left: 0px;
    transition: left 0.3s linear;
}
#sidebar-btn {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 15px;
    cursor: pointer;
    margin:20px;
    position: absolute;
    top: 0px;
    right: -60px;
}
#sidebar-btn span {
    height: 1px;
    background: #111;
    margin-bottom: 5px;
    display: block;
}
#sidebar-btn span:nth-child(2) {
    width: 75%;
}
#sidebar-btn span:nth-child(3) {
    width: 50%;
}


/* LOGO */
.logo-icon {
    margin-bottom: 1rem;
}
/* NAVIGATION 1*/
.nav-one {
    list-style: none;
}
.nav-one a, .nav-two a {
    color: #fff;
    text-decoration: none;
    padding: 1rem;

}
.nav-one li, .nav-two li {
    background: #1C1E1F;
    padding: 1rem;
}
.menu-items {
/*  border-bottom: 1px solid black;
*/}
.menu-items:last-child {
    border: none;
}

.nav-two-wrap ul {
    list-style: none;
}
/* NAVIGATION 2*/
.nav-two {
    margin-top: 20px;
 }


.nav-desc {
    display: none;

}

最佳答案

请将 sidebar-btn 放在 sidebar-nav 之外，并给出 position:relative 而不是 position:absolute 在移动 View 中。

<div id="sidebar-btn">
   <span></span>
   <span></span>
   <span></span>               
</div>

关于jquery - 响应导航 : Parent Div Collapsing in Mobile Screen?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46440269/

27

4

0

文章推荐： c - 如果不会在内部触发

文章推荐： python - IndexingError 使用 bool 索引

文章推荐： java - Oracle 查询到 JPA 查询转换

文章推荐： python - 如何将整数列表转换为字节？

jquery - 在菜单中将类从 "collapse"更改为 "collapse in"
我有这个左侧站点菜单: Typography Name 1
html - "border-collapse: collapse"从表中删除填充
我有两个问题: 是否有合理的解释，为什么会这样？是否有针对这种情况的 CSS 解决方法？谢谢! table { border-collapse: collapse; pad
javascript - Bootstrap "Panel-collapse" "collapse"无法在线工作
我想知道为什么我的类“panel-collapse”“collapse”不起作用。我刚刚将文件上传到我的服务器上，当我单击链接区域时，它们不起作用(它们不会放下隐藏内容)。但是，它们在我的 Drea
html - 用 border-collapse 改变表格的宽度 : collapse
在这种情况下，我完全感到困惑。当我使用 border-collapse: collapse; 从 1px (#1) 到大值 (#2) 并回到 1px (#3)，我有视觉缺陷。 #1 和#3 相同，
javascript - 两个具有 "border-collapse: collapse"的表之间的同步列宽度在谷歌浏览器中不起作用
我有两个表，想要使用 Javascript 同步它们的列宽。只要我不为表格设置 CSS 属性 border-collapse:collapse;，它就能在 Google Chrome 中按预期工作。
javascript - Bootstrap Collapse - Jquery "Collapse all"函数
我正在前端使用 Bootstrap 编写一个个人提要阅读器，并想添加一个“折叠/全部展开”按钮。这是我的第一个 JavaScript/JQuery 代码，所以除了在 Firefox Develope
javascript - Vue2 Collapse - 在事件时将类添加到 v-collapse-wrapper
我正在使用以下模块:https://roszpun.github.io/vue-collapse/#/ 我似乎无法弄清楚如何正确地将类添加到包装元素，因为我首先考虑在 onStatusChange 上
javascript - 如果单击以 collapsible id 作为目标的链接，则打开 collapsible
在我的代码中，您将看到一个按钮和一个可折叠元素。如果单击该按钮，页面将滚动到可折叠状态。用户点击按钮后是否可以打开折叠？我考虑过使用视口(viewport)，但每次在视口(viewport)中时，折
javascript - 在 collapsible-set 中打开了哪个动态添加的 collapsible？移动版
我有一个 Collapsible-set(有 5-10 个可折叠)并使用此代码查找已打开的: $("#mySet").on("collapsibleexpand", function (e) {
javascript - 为什么 Bootstrap Collapse 展开后会一直删除 "collapse"类？
我正在使用 jQuery Collapse在通过 Ajax 插入的元素上。当我应用下面的行时，它删除了 collapse 类。我需要保留该类，以便在需要关闭 Ajax 内容时调用 collapse(
html - 表 : "visibility:collapse" does not work with "border-collapse"
我正在尝试使用隐藏表格中的列和 visibility:collapse如此处所述: Is it possible to hide / show table columns by changing
html - 未折叠时自定义/格式化导航栏(navbar-collapse collapse in)。 MVC
我在格式化 nav navbar-nav 无序列表中的列表项时遇到问题。当页面为全尺寸时，我想保留格式不变。但是，我想在页面缩小时格式化/自定义列表项，并且列表项“消失”并且仅在用户单击切换按钮后“重
javascript - Bootstrap Collapse show.bs.collapse 第二次不工作
出于某种原因，即使我第一次执行完全相同的操作，我也无法再次触发显示。基本上，我有一个表单，用户可以从下拉列表中选择前两个字段(商家提供商和银行)或添加新条目。因此，我在 Javascript 中使用
javascript - Bootstrap : collapse-group within collapse-group
我使用了 jsfiddle 68RXP 中的示例collapse-group 创建一个可扩展的 div: HTML: Heading Lorem ipsum View
html - border-collapse 组合 :collapse and transform:translate
我有以下问题:当我翻译表格中的标题单元格并且表格设置为 border-collapse:collapse 时，单元格将移动但不会移动它们的边框。我创建了一个测试: 标记:
twitter-bootstrap - navbar-toggle、collapse、navbar-collapse 类如何协同工作？
我是 CSS 和 Bootstrap 3.0 的新手。下面是我可以在很多地方找到的代码，现在我可以毫无问题地编写它。但我真的不知道幕后情况如何。 Company
javascript - HTML 表 : border-collapse and visibility collapse of tr
我有一个包含多行的表格，例如: Line1 Line2 Line3 现在，在 javascript(基于单选输入字段)中，我想通过添加 visibility:collapse 来
css - 为什么边框在 IE 9 中消失并出现 border-collapse :collapse?
我有一个网页，我在其中尝试使所有浏览器的边框正确。参见 http://dl.dropbox.com/u/17256431/SpreadsheetConverter/border-3/border-3.
javascript - 如何在 bootstrap collapse navbar-collapse 中将事件类添加到当前
？
我正在尝试使用 javascript 来创建 Bootstrap 我只需要更新 javascript 文件，而不是在网站的各个页面上管理导航栏。这是横幅的代码: document.write( "
html - 在 Firefox 和 border-collapse : collapse; 中不存在单元格的表上隐藏边框
给定以下 HTML 页面，表格顶部出现一条水平线，其中第一行将包含第二和第三个单元格(如果已定义)。 Test Page table { margin:10px 0 10px 0;

首页

博学

6Ren·AI

商城

jquery - 响应导航 : Parent Div Collapsing in Mobile Screen?