【发布时间】：2021-02-15 09:41:30
【问题描述】：
我想在我的 reactjs 代码中复制 this codpepen example。我可以使用 css 获得确切的页面样式，但是单击按钮时不会发生屏幕对齐，这是 jscript/jquery 的工作。由于是 reactjs 新手，请帮助我。
我的代码在 codepen here 中作为参考
$('.nav-toggle').click(function(e) {
e.preventDefault();
$("html").toggleClass("openNav");
$(".nav-toggle").toggleClass("active");
});body {
font-family: 'Work Sans', sans-serif;
margin: 0;
background-color: #eee;
}
/* Layout */
#container {
padding: 0;
margin: 0;
background-color: #fff;
}
#main {
padding: 4% 1.5em;
max-width: 55em;
margin: 0 auto;
}
#header {
padding: 1.5em;
margin: 0 0 1em 0;
background-color: #eee;
}
#footer {
padding: 1.5em;
margin: 2em 0 0 0;
background-color: #eee;
}
/* Menu Styles */
.primary-nav {
position: fixed;
z-index: 999;
}
.menu {
position: relative;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.open-panel {
border: none;
background-color:#fff;
padding: 0;
}
.hamburger {
background: #fff;
position: relative;
display: block;
text-align: center;
padding: 13px 0;
width: 50px;
height: 73px;
left: 0;
top: 0;
z-index: 1000;
cursor: pointer;
}
.hamburger:before {
content:"\2630"; /* hamburger icon */
display: block;
color: #000;
line-height: 32px;
font-size: 16px;
}
.openNav .hamburger:before {
content:"\2715"; /* close icon */
display: block;
color: #000;
line-height: 32px;
font-size: 16px;
}
.hamburger:hover:before {
color: #777;
}
.primary-nav .menu li {
position: relative;
}
.menu .icon {
position: absolute;
top: 12px;
right: 10px;
pointer-events: none;
width: 24px;
height: 24px;
color: #fff;
}
.menu,
.menu a,
.menu a:visited {
color: #aaa;
text-decoration: none!important;
position: relative;
}
.menu a {
display: block;
white-space: nowrap;
padding: 1em;
font-size: 14px;
}
.menu a:hover {
color: #fff;
}
.menu {
margin-bottom: 3em;
}
.menu-dropdown li .icon {
color: #777;
}
.menu-dropdown li:hover .icon {
color: #fff;
}
.menu label {
margin-bottom: 0;
display: block;
}
.menu label:hover {
cursor: pointer;
}
.menu input[type="checkbox"] {
display: none;
}
input#menu[type="checkbox"] {
display: none;
}
.sub-menu-dropdown {
display: none;
}
.new-wrapper {
position: absolute;
left: 50px;
width: calc(100% - 50px);
transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}
#menu:checked + ul.menu-dropdown {
left: 0;
-webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
}
.sub-menu-checkbox:checked + ul.sub-menu-dropdown {
display: block!important;
-webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
}
.openNav .new-wrapper {
position: absolute;
transform: translate3d(200px, 0, 0);
width: calc(100% - 250px);
transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}
.downarrow {
background: transparent;
position: absolute;
right: 50px;
top: 12px;
color: #777;
width: 24px;
height: 24px;
text-align: center;
display: block;
}
.downarrow:hover {
color: #fff;
}
.menu {
position: absolute;
display: block;
left: -200px;
top: 0;
width: 250px;
transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
background-color: #000;
z-index: 999;
}
.menu-dropdown {
top: 0;
overflow-y: auto;
}
.overflow-container {
position: relative;
height: calc(100vh - 73px)!important;
overflow-y: auto;
border-top: 73px solid #fff;
z-index: -1;
display:block;
}
.menu a.logotype {
position: absolute!important;
top: 11px;
left: 55px;
display: block;
font-family: 'Work Sans', sans-serif;
text-transform: uppercase;
font-weight: 800;
color: #000;
font-size: 21px;
padding: 10px;
}
.menu a.logotype span {
font-weight: 400;
}
.menu a.logotype:hover {
color: #777;
}
.sub-menu-dropdown {
background-color: #333;
}
.menu:hover {
position: absolute;
left: 0;
top: 0;
}
.openNav .menu:hover {
position: absolute;
left: -200px;
top: 73px;
}
.openNav .menu {
top: 73px;
transform: translate3d(200px, 0, 0);
transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
}
/* label.hamburger {
display: none;
} */
/* look and feel only, not needed for core menu*/
@-webkit-keyframes grow {
0% {
display: none;
opacity: 0;
}
50% {
display: block;
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes grow {
0% {
display: none;
opacity: 0;
}
50% {
display: block;
opacity: 0.5;
}
100% {
opacity: 1
}
}
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
/* Resposive Typography */
body,
button,
input,
select,
optgroup,
textarea {
color: #000;
font-size: 1em;
line-height: 1.5;
font-weight: 300;
}
h1, h2, h3, h4, h5, h6 {
clear: both;
font-weight: 800;
}
dfn, cite, em, i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch", Courier, monospace;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code, kbd, tt, var {
font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
font-size: 15px;
font-size: 0.9375rem;
}
abbr, acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark, ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
}
.light {
color:#ddd;
}
strong {
font-weight: 600;
}
cite,
em,
i {
font-style: italic;
}
p.big {
font-size: 140%;
line-height: 1.3em;
}
p.small {
font-size: 80%;
}
blockquote {
display:block;
margin: 1em 20px;
padding: 0 1em;
position:relative;
}
blockquote:before {
}
blockquote cite,
blockquote em,
blockquote i {
font-style: italic;
}
abbr,
acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
sup,
sub {
height: 0;
line-height: 1;
vertical-align: baseline;
position: relative;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
p {
font-size: 1em;
margin: 0 0 2em 0;
}
article:last-of-type, p:last-of-type {
margin-bottom: 0;
}
p.intro {
font-size:1.25em;
line-height: 1.5;
font-weight:300;
margin: 0 0 1.5em 0;
}
h1, h2 {
letter-spacing: -1px;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4 {
margin: 0 0 0.5em 0;
line-height: 1.1;
}
h1, .h1 {font-size: 2.074em;}
h2, .h2 {font-size: 1.728em;}
h3, .h3 {font-size: 1.44em;}
h4, .h4 {font-size: 1.2em;}
/* Medium Screen Typography - Scale: 1.333 Perfect Fourth (thanks http://type-scale.com/) */
@media screen and (min-width: 42em) {
h1, .h1 { letter-spacing: -2px; }
h1, .h1 {font-size: 3.157em;}
h2, .h2 {font-size: 2.369em;}
h3, .h3 {font-size: 1.777em;}
h4, .h4 {font-size: 1.333em;}
p { font-size:1.0625em; }
p.intro { font-size:1.3em; }
}
/* Large Screen Typography - Scale: 1.414 Augmented Fourth (thanks http://type-scale.com/) */
@media screen and (min-width: 72em) {
h1 { letter-spacing: -3px; }
h1, .h1 { margin-bottom: 0.35em; font-size: 3.998em; }
h2, .h2 { font-size: 2.827em; }
h3, .h3 { font-size: 1.999em; }
h4, .h4 { font-size: 1.414em; }
p { font-size:1.125em; }
p.intro { font-size:1.4em; }
}<div class="primary-nav">
<button href="#" class="hamburger open-panel nav-toggle">
<span class="screen-reader-text">Menu</span>
</button>
<nav role="navigation" class="menu">
<a href="#" class="logotype">LOGO<span>TYPE</span></a>
<div class="overflow-container">
<ul class="menu-dropdown">
<li><a href="#">Dashboard</a><span class="icon"><i class="fa fa-dashboard"></i></span></li>
<li class="menu-hasdropdown">
<a href="#">Settings</a><span class="icon"><i class="fa fa-gear"></i></span>
<label title="toggle menu" for="settings">
<span class="downarrow"><i class="fa fa-caret-down"></i></span>
</label>
<input type="checkbox" class="sub-menu-checkbox" id="settings" />
<ul class="sub-menu-dropdown">
<li><a href="">Profile</a></li>
<li><a href="">Security</a></li>
<li><a href="">Account</a></li>
</ul>
</li>
<li><a href="#">Favourites</a><span class="icon"><i class="fa fa-heart"></i></span></li>
<li><a href="#">Messages</a><span class="icon"><i class="fa fa-envelope"></i></span></li>
</ul>
</div>
</nav>
</div>
<div class="new-wrapper">
<div id="main">
<div id="main-contents">
<h1>Multi-level Side Navigation</h1>
<p class="intro"><strong>This is a multi-level side navigation pattern with hover and push</strong>. Hovering over the menu will reveal its lables and clicking the hamburger icon pins the menu open.</p>
<h2>Checkbox Hack</h2>
<p>I started by using the checkbox hack but ran into its limitations when I tried to implement the 'push' behaviour. It works for the secondary menus but the input element and its corresponding label can really only affect the adjacent element (i.e. I
couldn't target the page container to push it over). So, I added...</p>
<h2>A Touch of jQuery</h2>
<p>I'm sure this could be done with vanilla javascript, but that is not my strong suit. So here we are. You might be thinking, "Why not just use JQuery for all of the functionality?" Well, you can! Fork it and go nuts! Maybe drop me a line if you do.</p>
<p class="small"><strong>This is small text</strong>. Lorem Ipsum is simply dummy text from the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>【问题讨论】：