时间戳

首页 > 解决方案 > 我希望我的 sidenav 从页面推送内容

javascript - 我希望我的 sidenav 从页面推送内容

问题描述

好的，所以我有一个奇怪的要求。我有一个正常的内容页面和一个从左到右的侧边栏。目前，当我点击图标时，导航栏向左移动并推送内容，但它只会调整大小（主页的内容）。我需要内容与导航栏一起移动，但需要将其删除。就像在书页后面散去一样。我不知道这是否对你们有意义。 在此处输入图像描述

也许这张图片会有所帮助，所以你可以理解。

<body>
<div class="pop opened">
    <nav class="pop-nav">
        <div class="pop-links">
            <li><a href="javascript:;">What we do</a></li>
            <li><a href="javascript:;">About</a></li>
            <li><a href="javascript:;">Pricing</a></li>
            <li><a href="javascript:;">Contact</a></li>
        </div>
        <div class="pop-social">
            <ul>
                <li><a href="javascript:;"><span><i class="s s-facebook footer-soc"></i></span></a></li>
                <li><a href="javascript:;"><span><i class="s s-twitter footer-soc"></i></span></a></li>
                <li><a href="javascript:;"><span><i class="s s-youtube footer-soc"></i></span></a></li>
            </ul>
        </div>
    </nav>
</div>
<div class="main">
    <div class="wrapper">
        <header class="header">
            <div class="row">
                <div class="col-3">
                    <!--Icon missing instead of img--><img src="./images/logo_desktop.png" alt="HCI Logo" class="logo">
                </div>
                <div class="col-9">
                    <nav class="header-nav">
                        <li><a href="javascript:;">What we do</a></li>
                        <li><a href="javascript:;">About</a></li>
                        <li><a href="javascript:;">Pricing</a></li>
                        <li><a href="javascript:;">Contact</a></li>
                    </nav>
                    <span><i class="s s-hamburger hamburger"></i></span>
                </div>
            </div>
        </header>
    </div>
    <section class="hero" style="background-image: url(./images/hero.png)">
        <div class="wrapper">
            <div class="row row-big">
                <div class="col-1"></div>
                <div class="col-10">
                    <h1 class="title">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </h1>
                </div>
                <div class="col-1"></div>
            </div>
            <div class="row row-small">
                <div class="col-12">
                    <h1 class="title">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit
                    </h1>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <button type="button" class="btn">Sign up now<span><i class="s s-arrow"></i></span></button>
                </div>
            </div>
        </div>
    </section>

这是导航的重要部分。剩下的只是页面内容。

.main {
  transition: margin-right .5s;
  margin-right: 0;
}

.pop {
  position: fixed;
  z-index: 10;
  height: 100%;
  background-color: $dark-blue;
  width: 0;
  top: 0;
  right: 0;
  overflow-x: hidden;
  transition: 0.5s;

  .pop-nav {
    padding: 46px 0 0 100px;
    border-top: 1px solid $grey-blue;
    margin: 79px 0 0;
    @include breakpoint(phone) {
        padding: 33px 0 0 35px;
    }
  }
}

.pop-links {
  padding-bottom: 65px;

  li {

    display: block;
    padding-bottom: 40px;

    &:last-child {
      padding-bottom: 0;
    }

  a {
    color: $white;
    }
  }
}

希望你们能帮助我。

$('.hamburger').on('click', function(){
        $(this).toggleClass('opened');
        if ($(this).hasClass('opened')){
            $(window).resize(function(){
                if ($(window).width() <= 640){
                    $('.pop').css({'width' : '255px'});
                    $('.main').css({'margin-right' : '255px' , "padding-right" : "255px"});
                }
                else{
                    $('.pop').css({'width' : '550px'});
                    $('.main').css({'margin-right' : '550px'});
                }
            }).resize();
        }
        else {
            $('.pop').css({'width' : '0'});
            $('.main').css({'margin-right' : '0'});
        }
    })

标签： javascripthtmlcsssass

解决方案

这并不难做到（只是想弄清楚），

当你有javascript来打开你的sidenav时，你可能有一个代码将块或宽度的显示设置为一定数量的onclick，在同一个函数中添加所有元素以推到var中并给它们margin-left相同的数量sidenav 的宽度。这将使它看起来像 sidenav 将内容推开

编辑：

我所做的是：

CSS：

#main {
transition: margin-left .5s;
}
.sidenav {
    transition: 0.5s;
}

javascript:

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

只需将其编辑为您需要的内容，因此将 #main 更改为您要推送的所有内容，将 .sidenav 更改为 sidenav 并使用左侧、宽度和过渡

推荐阅读