1

There are two things I want to do when clicking on a menu button. First, I want the bars to change to a cross, that's already done with x.classList.toggle("change"); but what doesn't work is the #navi div that is supposed to slide right and display.

Here is what I tried : (don't mind the #mainicons, #description etc..

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-->

Thanks:)

Maëlle
  • 629
  • 1
  • 11
  • 25
  • 1
    `('#navi').style.left = "80px"; ('#navi').style.display = "inline";` is not valid Use like this `$('#navi').css({ 'left ' : "80px", 'display' : 'inline' });` – XYZ Jun 12 '17 at 17:21
  • toggleClass("rtoate180") has a typo – Gerard Jun 12 '17 at 17:25
  • Thank you @XYZ, this worked! Do you know a way to make it work the other way round please? :) – Maëlle Jun 12 '17 at 17:44
  • no @Gerard it was meant to be like this actually ^^ it's like that on the css – Maëlle Jun 12 '17 at 17:45

1 Answers1

1

For selecting an element using id you have to write it like document.getElementById('navi') or if using jquery use $('#navi') .For sliding right to work use opacity instead of display none.For details you can check this answer

Instead of changing the style you can toggle a class and achieve the desired effect

Check this sample

function sidebarFunction(x) {
    x.classList.toggle("change");
 
  document.getElementById('navi').classList.toggle('show')
  
 /* .opacity = "1";
  document.getElementById('navi').style.left = "80px";
   document.getElementById('navi').style.height = "30px";*/
 
};

$(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: 0px;
    line-height: 30px;
    padding-left: 10px;
    overflow: hidden;
    color: #000000;
    background: #f67e7d;
    font-size: 12px;
    text-align: left;
   /*display:none;*/
    opacity:0;
    -webkit-transition: left  0.5s ease;
    -moz-transition: left  0.5s ease;
    -ms-transition: left  0.5s ease;
    -o-transition: left  0.5s ease;
    transition: left  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;
  }
  
  #navi.show{
    opacity:1;
    height:30px;
    left:80px;
  }
<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-->
XYZ
  • 4,450
  • 2
  • 15
  • 31
  • Hi, thank you for the answer! I wanted to use display because if I click next to the bars when opacity is 0 it can still toggle the function. But if I use display it won't! Also I'm sorry I forgot to mention that I also needed it to work the other way round.. Is there a way to do it? – Maëlle Jun 12 '17 at 17:43
  • Thank you that works great! But for the opacity there is still the problem that when you click on the right of the bars even when the navigation doesn't appear it drops the navigationin down. Display can't have a transition? – Maëlle Jun 12 '17 at 17:55
  • @MaëlleJumel now i have set the height to zero to avoid the click check now – XYZ Jun 12 '17 at 17:56
  • Oh I see! Thank you so much, can I bother you one last time please?^^ – Maëlle Jun 12 '17 at 18:00
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146443/discussion-between-xyz-and-maelle-jumel). – XYZ Jun 12 '17 at 18:00