1
メニューボタンをクリックすると、2つのことができます。まず、バーを十字に変更したいのですが、これはすでにx.classList.toggle("change");で行われていますが、正しく動作しないのは#navi divで、右にスライドして表示されるはずです。 （お持ちのIDを使って要素を選択するための#mainicons、#descriptionなど。Javascript： 'display'と 'left'を変更する+クラスを切り替える
function sidebarFunction(x) {
x.classList.toggle("change");
('#navi').style.left = "80px";
('#navi').style.display = "inline";
};
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").slideToggle(500);
});
});#more-bars{
position:fixed;
cursor: pointer;
width:35px;
height:25px;
left: 18px;
top: 20px;
}
.bar1,
.bar2,
.bar3 {
position: relative;
width: 35px;
height: 5px;
margin-top:6px;
background-color: #843b62;
transition: 0.4s;
-webkit-transition: 0.4s;
-o-transition: 0.4s;
-moz-transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
-ms-transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {
opacity: 0;
}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
-ms-transform: rotate(45deg) translate(-8px, -8px);
}
#more-bars:hover .bar1, #more-bars:hover .bar2,#more-bars:hover .bar3{
background-color: #f67e7d
}
/* Main icons */
#mainicons {
z-index:1;
position: fixed;
top: 250px;
left: 0px;
text-align: center;
}
#mainicons>a {
position: fixed;
margin-top: 40px;
display: flex;
justify-content: center;
align-items: center;
}
#mainicons i {
display: block;
height: 50px;
width: 50px;
padding: 10px;
color: #fff;
background: #f67e7d;
font-size: 20px;
line-height: 50px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#mainicons i:hover {
-webkit-box-shadow: inset 7px 0px 0px 0px #f67e7d;
-moz-box-shadow: inset 7px 0px 0px 0px #f67e7d;
box-shadow: inset 7px 0px 0px 0px #f67e7d;
color: #f67e7d;
background: #fff;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*------ SIDEBAR -----*/
#sidebar {
width: 300px;
height: 100%;
margin-left: -300px;
top: 0px;
}
/*------ Narrow sidebar -----*/
#sidebar1 {
z-index: 10;
position: fixed;
top: 0px;
left: 0;
width: 70px;
height: 200px;
}
/* Blog title */
#blogtitle {
font-family: Raleway;
font-size: 8px;
color: #843b62;
width: 70px;
line-height: 30px;
margin: 0 auto;
text-align: center;
word-wrap: break-word;
-webkit-transition: all 0.3s ease 0.3s;
-moz-transition: all 0.3s ease 0.3s;
-o-transition: all 0.3s ease 0.3s;
transition: all 0.3s ease 0.3s;
}
#blogname {
margin-top:-30px;
font-family: Raleway;
font-size: 8px;
color: #843b62;
width: 70px;
line-height: 30px;
margin-left:-70px;
text-align: center;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#avatar:hover ~ #blogtitle {
-ms-transform: translate(-70px);
-webkit-transform: translate(-70px);
transform: translate(-70px);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#avatar:hover ~ #blogname{
-ms-transform: translate(70px);
-webkit-transform: translate(70px);
transform: translate(70px);
-webkit-transition: all 0.3s ease 0.3s;
-moz-transition: all 0.3s ease 0.3s;
-o-transition: all 0.3s ease 0.3s;
transition: all 0.3s ease 0.3s;
}
/* Avatar */
#avatar {
margin: auto;
margin-top: 100px;
width: 50px;
height: 50px;
z-index:10;
}
#avatar img {
width: 100%;
height: 100%;
border-radius: 10px;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-ms-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;
}
#avatar img:hover {
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
/* Description */
#description {
position: fixed;
margin-left: 80px;
top:20px;
color: #000;
background: #fff;
padding: 2px 10px 2px 10px;
width: 150px;
font-size: 13px;
line-height: 18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity:0.5;
}
#description:after {
content: '';
position: absolute;
border-style: solid;
border-width: 18px 18px 18px 0;
border-color: transparent #fff;
display: block;
width: 0;
z-index: 1;
left: -18px;
top: 85px;
}
#avatar>img:hover + #description{
opacity:0.75;
margin-left:110px;
}
/* Search box */
#search {
margin-top: 10px;
margin-left: 20px;
width: 180px;
height: 30px;
overflow: hidden;
color: #000000;
background: #fff;
}
/* Navigation */
#navi {
cursor: pointer;
position:absolute;
top:20px;
left: 40px;
width: 170px;
height: 30px;
line-height: 30px;
padding-left: 10px;
overflow: hidden;
color: #000000;
background: #f67e7d;
font-size: 12px;
text-align: left;
display:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#navi i {
position: absolute;
margin-left: 77px;
margin-top: 10px;
color: #000000!important;
font-size: 12px;
}
#navi .fa-chevron-down {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navigation {
margin-top: 10px;
margin-left: 20px;
width: 180px;
overflow: hidden;
display: none;
background: #f67e7d;
}
#navigation a {
display: inline-block;
text-decoration:none;
}
#navigationin span {
color: #ffb997;
font-size: 10px;
margin-bottom:5px;
display: inline-block;
text-transform:lowercase;
text-align:center;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#navigationin a:hover i {
-webkit-transform : rotate(360deg);
-moz-transform : rotate(360deg);
-ms-transform : rotate(360deg);
-o-transform : rotate(360deg);
transform : rotate(360deg);
color: #fff!important;
}
#navigationin a:hover span{
color:#fff;
}
#navigation i {
display: block;
color: #ffb997!important;
font-size: 20px;
margin: 0px 10px -10px 10px;
padding:5px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div id="mainicons">
<a href="/"><i class="fa fa-home"></i></a>
<a href="/ask"><i class="fa fa-comment"></i></a>
<a href="/submit"><i class="fa fa-download"></i></a>
<a href="/about"><i class="fa fa-address-card"></i></a>
</div>
<!--End mainicons-->
<div id="sidebar">
<div id="sidebar1">
<div id="more-bars" onclick="sidebarFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div id="avatar"><img src="{image:Avatar}"></div>
<div id="description">
{Description}</div>
<div id="blogtitle">@actorsblog</div>
<div id="blogname">{BlogTitle}</div>
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<!--Navigation-->
<div id="navigation">
<div id="navigationin">
<center>
<a href="{text:Link One Url}"><i class="fa fa-user-circle"></i><span>{text:Link One Title}</span></a>
<a href="{text:Link Two Url}"><i class="fa fa-question-circle"></i><span>{text:Link Two Title}</span></a>
<a href="{text:Link Nine Url}"><i class="fa fa-folder-open-o"></i><span>{text:Link Nine Title}</span></a>
<a href="{text:Link Three Url}"><i class="fa fa-star"></i><span>{text:Link Three Title}</span></a>
<a href="{text:Link Four Url}"><i class="fa fa-film"></i><span>{text:Link Four Title}</span></a>
<a href="{text:Link Eight Url}"><i class="fa fa-link"></i><span>{text:Link Eight Title}</span></a>
<a href="{text:Link Five Url}"><i class="fa fa-file-video-o"></i><span>{text:Link Five Title}</span></a>
<a href="{text:Link Six Url}"><i class="fa fa-file-image-o"></i><span>{text:Link Six Title}</span></a>
<a href="{text:Link Seven Url}"><i class="fa fa-square-o"></i><span>{text:Link Seven Title}</span></a>
<a href="{text:Twitter url}" target="_blank"><i class="fa fa-twitter-square"></i><span>twitter</span></a>
<a href="{text:Instagram url} target="_blank""><i class="fa fa-instagram"></i><span>instagram</span></a>
<a href="{text:Youtube url}" target="_blank"><i class="fa fa-youtube"></i><span>youtube</span></a>
</center>
</div>
<!--End navigationin-->
</div>
<!--End Navigation-->
</div>
<!--End Sidebar1-->感謝:)
'（ '＃を達成することができ、スタイルを変更を確認することができます詳細navi '）。style.left = "80px"; style = "inline"; 'is not valid このように使用する$ {' navi '} css（{ ' left '： "80px"、 ' display '：（' #navi ' 'inline' }）; – XYZ
toggleClass（ "rtoate180"）にはタイプミスがあります – Gerard
ありがとうございます@XYZ、これはうまくいきました！あなたはそれが他の方法ラウンドを動作させる方法を知っていますか？ :) –