1
残念ですが、これは混乱することがあります。左側から別のバーをクリックすると、サイドバーのdivにjs関数を適用しました。しかし、これは、ホバリングCSS機能を使用していました。物事はスライディングサイドバーにあります。あなたがクリックできるメニューがいくつかあります。バーが（cssで）スライドする方法を変更したので、もうクリックすることはできません。寸法が間違っているので、私は申し訳ありません...と思いますが、あなたはそれがherejs関数を適用した後でクリックできない
function myFunction(x) {
x.classList.toggle("change");
}
<script>
$(document).ready(function(){
$("#navi").click(function(){
$("#navi .fa-chevron-down").toggleClass("rtoate180");
$("#navigation").slideToggle(500);
});
});
</script>#more{
position:fixed;
top:0;
left:0px;
padding:5px;
font-size:20px;
line-height:40px;
text-align:center;
width:60px;
height:40px;
display:inline-block;
{block:IfSidebarRight}
right:0px;
left:auto;
{/block:IfSidebarRight}
}
.bar1, .bar2, .bar3 {
cursor:pointer;
position:relative;
left:18px;
top:25px;
width: 35px;
height: 5px;
background-color:{color:Main icon background};
margin: 6px 0px;
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) ;
}
/*------ SIDEBAR -----*/
#sidebar{
width:300px;
height:100%;
margin-left:-300px;
{block:IfSidebarRight}
margin-left:300px;
{/block:IfSidebarRight}
top:0px;
}
.change ~ #sidebar2{
margin-left:365px;
{block:IfSidebarRight}
margin-left:-300px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/*------ Narrow sidebar -----*/
#sidebar1{
z-index:10;
position:fixed;
top:0px;
left:0;
width:70px;
height:100%;
background:{color:Narrow sidebar background};
{block:IfSidebarRight}
right:0;
left:auto;
{/block:IfSidebarRight}
}
/*------ Wide sidebar -----*/
#sidebar2{
z-index:0;
position:fixed;
top:0px;
margin-left:65px;
width:220px;
height:100%;
background:{color:Wide sidebar background};
background-image:url({image:Wide sidebar background});
{block:IfWideSidebarBackgroundTransparent}
background:transparent;
{/block:IfWideSidebarBackgroundTransparent}
{block:IfSidebarRight}
margin-left:75px;
{/block:IfSidebarRight}
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* Avatar */
#avatar {
margin: auto;
margin-top: 65px;
width: 50px;
height: 50px;
border-radius: 60px;
border:0px solid
z-index:10;
}
#avatar img {
width: 100%;
height: 100%;
border-radius: 100%;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
#avatar img:hover {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
-ms-transform: scale(1.4, 1.4);
-webkit-transform: scale(1.4, 1.4);
transform: scale(1.4, 1.4);
}
/* Description */
#description{
position:relative;
margin-left:20px;
color:{color:Description};
background:{color:Description background};
border:5px solid {color:Description background};
max-height:300px;
padding:10px;
width:150px;
overflow-y:auto;
margin-top:20px;
font-size:13px;
line-height:18px;
}
#description:after{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 57px;
}
/* Search box */
#search{
margin-top:10px;
margin-left:20px;
width:180px;
height:30px;
overflow:hidden;
color:{color:Search};
background:{color:Search box background};
}
#search i{
position:absolute;
margin-left:67px;
margin-top:9px;
color:{color:Search}!important;
font-size:12px;
z-index:1000;
}
/* Navigation */
#navi{
cursor:pointer;
margin-top:10px;
margin-left:20px;
width:170px;
height:30px;
line-height:30px;
padding-left:10px;
overflow:hidden;
color:{color:Navigation};
background:{color:Navigation background};
font-size:12px;
text-align:left;
}
#navi i{
position:absolute;
margin-left:77px;
margin-top:10px;
color:{color:Navigation}!important;
font-size:12px;
}
#navi .fa-chevron-down {
transition: all 0.7s ease;
}
.rtoate180 {
transform: rotate(180deg);
}
#navigation{
margin-top:10px;
margin-left:20px;
width:180px;
overflow:hidden;
display:none;
font-size:12px;
background:{color:Navigation background};
}
#navigationin a{
display:block;
font-size:12px;
line-height:18px;
width:180px;
overflow:hidden;
color:{color:Navigation link};
border-bottom:1px solid {color:Wide sidebar background};
padding:5px;
text-align:center;
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
#navigationin a:hover{
cursor:pointer;
box-shadow: inset 180px 0 0 0 {color:Wide sidebar background};
color:{color:Hover};
-webkit-transition: all .7s ease-in-out;
-moz-transition: all .7s ease-in-out;
-o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
/* Social icons */
#socialicons{
margin-top:0px;
}
#socialicons i{
display:inline-block;
color:{color:Navigation link}!important;
margin:5px;
font-size:15px;
}
#socialicons i:hover{
color:{color:Hover}!important;
}
/*----- MAIN CONTAINER -----*/
#container{
position:absolute;
top: 50px;
left:50%;
margin-bottom:10px;
min-height:500px;
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: -o-calc(100% - 100px);
width: calc(100% - 100px);
min-width:610px;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index:1;
{block:IfShowHeader}
top: -moz-calc(100% + 50px);
top: -webkit-calc(100% + 50px);
top: -o-calc(100% + 50px);
top: calc(100% + 50px);
{/block:IfShowHeader}
{block:TagPage}
top:50px;
{/block:TagPage}
{block:SearchPage}
top:50px;
{/block:SearchPage}
{block:PermalinkPage}
top:50px;
{/block:PermalinkPage}
}<div id="more">
<div id="sidebar">
<div id="sidebar1" onclick="myFunction(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<div id="avatar"><img src="{image:Avatar}"></div>
</div>
<div id="sidebar2">
<div id="description">
{Description}</div>
<div id="search">
<form action="/search" method="get"><i class="fa fa-search"></i>
<input type="text" name="q" value="SEARCH" style="position:absolute; left:20px; width:160px; height:25px; padding-left:10px; font-family:{select:Body font}; font-size: 12px; background:transparent; border:1px solid transparent; color:{color:Search};"/></form>
</div>
<div id="navi"> NAVIGATION <i class="fa fa-chevron-down"></i></div>
<!--Navigation-->
<div id="navigation">
<div id="navigationin">
<a href="{text:Link One Url}">{text:Link One Title}</a>
<a href="{text:Link Two Url}">{text:Link Two Title}</a>
<a href="{text:Link Three Url}">{text:Link Three Title}</a>
<a href="{text:Link Four Url}">{text:Link Four Title}</a>
<a href="{text:Link Five Url}">{text:Link Five Title}</a>
</div>
<!--End navigationin-->
<div id="socialicons">
<center>
<a href="{text:Facebook url}" target = "_blank" title="facebook"><i class="fa fa-facebook-square"></i></a>
<a href="{text:Twitter url}" target="_blank" title="twitter"><i class="fa fa-twitter-square"></i></a>
<a href="{text:Flickr url}" title="flickr"><i class="fa fa-flickr"></i></a>
<a href="{text:Youtube url}" target="_blank" title="youtube"><i class="fa fa-youtube"></i></a>
</center>
</div>
<!--End socialicons-->
</div>
</div>
<!--End sidebar1-->
</div>
<!--End sidebar-->
</div>
<!--End more-->私のコードがダウンしているが、スニペットは、すべての良い見ていません
お手伝いができたら本当にありがとうございます。私はそれがはっきりしていないことを知っています。ごめんなさい！
jsFiddleなどで実行可能な最小限の例を作成する必要があります。 https://stackoverflow.com/help/mcve – sheriffderek
申し訳ありません。多くの質問は「私は申し訳ありません」から始まります。しないでください...ちょうどあなたの質問をしてください。私たちはここに答えてくれてありがとうございます:) –
それは本当ですが、あなたが理解していない人も少なくありません.. ^^ @TonyTannous –