Я хочу, чтобы мой sidenav выдвигал контент со страницы - PullRequest
Новая
       0

Я хочу, чтобы мой sidenav выдвигал контент со страницы

0 голосов
/ 25 октября 2018

ОК, поэтому у меня странный запрос.У меня есть обычная страница контента и боковая панель, которая идет слева направо.В данный момент, когда я нажимаю на иконку, навигационная панель перемещается влево и толкает содержимое, но оно только изменяет его размер (содержимое главной страницы).Мне нужно, чтобы содержимое перемещалось с помощью панели навигации, но его нужно удалить.Вроде рассыпаться за страницей.Я понятия не имею, имеет ли это смысл для вас, ребята.enter image description here

Может быть, это изображение поможет вам, чтобы вы могли понять.

<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'});
        }
    })

1 Ответ

0 голосов
/ 25 октября 2018

Это не так сложно сделать (только для выяснения),

Когда у вас есть javascript для открытия вашего sidenav, у вас, вероятно, есть код, который устанавливает отображение на блоке или ширине на определенную величину при нажатии,в той же функции добавьте все элементы, которые нужно отодвинуть в 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 и поиграйте с левым, шириной и переходом

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...