Javascript 我希望我的sidenav从页面中推送内容
好吧,我有一个奇怪的要求。我有一个普通的内容页和一个从左到右的边栏。此时,当我单击图标时,导航栏会向左移动并推送内容,但它只会使其调整大小(主页的内容)。我需要的内容移动与导航栏,但它需要被删除。就像在书页后面撕纸一样。我不知道这对你们是否有意义。 也许这张图片会帮助你理解Javascript 我希望我的sidenav从页面中推送内容,javascript,html,css,sass,Javascript,Html,Css,Sass,好吧,我有一个奇怪的要求。我有一个普通的内容页和一个从左到右的边栏。此时,当我单击图标时,导航栏会向左移动并推送内容,但它只会使其调整大小(主页的内容)。我需要的内容移动与导航栏,但它需要被删除。就像在书页后面撕纸一样。我不知道这对你们是否有意义。 也许这张图片会帮助你理解 <body> <div class="pop opened"> <nav class="pop-nav"> <div class="pop-links"&g
<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>
希望你们能帮助我
$('.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'});
}
})
$('.hamburger')。在('click',function()上{
$(this.toggleClass('opened');
if($(this).hasClass('opened')){
$(窗口)。调整大小(函数(){
如果($(window).width()这并不是很难做到(只是想弄清楚)
当你有javascript打开你的sidenav时,你可能会有一个代码,在单击时将块上的显示或宽度设置为一定量,在相同的功能中,添加所有元素以在var中推开,并给它们留出与sidenav宽度相同的余量。这将使它看起来像sidenav将内容推开
编辑:
我所做的是:
css:
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一起使用,并使用左侧、宽度和过渡在此处创建两个并排的div。左侧的div宽度为0vw,右侧的div宽度为100vw,左侧的div扩展,右侧的div与Java收缩script.oh我的导航正在推送内容,但内容的大小正在变小,我需要它从页面上消失…类似于溢出在您的情况下,导航从右到左使用marginleft=“-250px”;这不完全是我需要的,但它给了我一个线索!谢谢!继续做好工作!:)
#main {
transition: margin-left .5s;
}
.sidenav {
transition: 0.5s;
}
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";
}