1
お時間をいただきありがとうございます。次のHTML、CSS、およびJavaScriptは、アンカーをクリックすると表示に切り替わるオフスクリーンメニューを作成します。ページのメインコンテンツは、画面の右側に表示されます。画面のメニューがそれを右に押すと、メインのコンテンツをラップまたはサイズ変更して画面に完全に表示されるようにする方法はありますか？オフスクリーントグルメニューは、メインコンテンツを画面の右側にプッシュします。
$(function() {
$('.toggle-nav').click(function() {
$('body').toggleClass('show-nav');
return false;
});
});nav {
width: 700px;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
.site-wrap {
overflow: hidden;
width: 100%;
height: 100%;
}
.push-wrap {
border: 1px solid red;
-webkit-transition: all 300ms ease 0;
-moz-transition: all 300ms ease 0;
-o-transition: all 300ms ease 0;
transition: all 300ms ease 0;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.show-nav .push-wrap {
border: 1px solid green;
transform: translate(700px, 0);
transform: translate3d(700px, 0, 0);
}
body {
background: #e3e3e3;
}
a {
transition: all 300ms ease;
}
nav {
background: #2b343f;
text-align: center;
-webkit-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
box-shadow: inset -1.5em 0 1.5em -0.75em rgba(0, 0, 0, 0.5);
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav ul li a {
display: block;
text-decoration: none !important;
height: 60px;
line-height: 60px;
font-size: 18px;
color: #fff;
}
nav ul li a:hover {
background: #4EFFFF;
color: #000;
}
article {
position: relative;
min-height: 1500px;
background: #e3e3e3;
z-index: 9;
width: 100%;
}
article h1 {
text-align: center;
margin: 40px 0 30px;
}
article p {
font-size: 20px;
line-height: 30px;
margin-bottom: 40px;
}
article a.toggle-nav {
position: absolute;
font-size: 25px;
color: rgb(255, 139, 139);
top: 0;
left: 0;
background: #444;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="site-wrap">
<nav>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
<div class="push-wrap">
<article>
<a href="#" class="toggle-nav"></a>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Off Screen Navigation</h1>
<p>blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah !</p>
</div>
</div>
</div>
</article>
</div>
</div>ありがとうございます！これを見て、あなたに何ができるかのアイデアを与えるために
Benありがとうございます。私は提出するとすぐにそのことを考えましたので、すぐにこれをCodepenで一緒に投げました：[http://codepen.io/midasxl/pen/ZOpmEz](http://codepen.io/midasxl/pen/ZOpmEz）希望が役立ちます。 – Midasxl
私は別のオプションとしてcodepenを提案するつもりでしたが、名前を忘れました：S –
そしてTympanusの例へのリンクをありがとう。彼らはとても面白そうです。私たちのユーザーは、メニューが見えるときにメインコンテンツと対話できる必要がありますが、これらの例は正しい方向に私を導きます。 – Midasxl