Javascript slide question.

Hi, everyone. As a matter of fact. If you click the button in Javascript, I went from right to leftI'm going to make a side bar that comes out.

I made a side bar on the right I can't implement the function that goes in and out when I click the button.

I didn't know the basics of Javascript and just came at you to make a homepage. I understand html css. I have no idea about java.

Are there any masters who can help you?ㅠ<

javascript slide sidebar

2022-09-21 15:32

1 Answers

jQuery's .toggleClass() is simple.

If you are familiar with css,

transition: right 0.5s ease;

Simple animations are also easy to handle, as shown in .

<div class="l-container">

  <div class="l-contents">
    <p>I'm Contents</p>
  </div>

  <div class="l-sidebar is-close">

    <div class="sidebar-in">

      <p>I'm Sidebar</p>
      <button type="button" class="btn-toggle">OPEN</button>

    </div>

  </div>

</div>

.l-container {
  position: relative;
}
.l-container .l-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  width: 200px;
  height: 100%;
  border-left: 1px solid #ccc;
  transition: right 0.5s ease;
}
.l-container .l-sidebar.is-close {
  right: -200px;
  transition: right 0.5s ease;
}
.l-container .l-sidebar .sidebar-in {
  position: relative;
  width: 180px;
  margin: 0 auto;
}
.l-container .l-sidebar .sidebar-in .btn-toggle {
  position: absolute;
  left: -60px;
  top: 10px;
  width: 50px;
  background: #000;
  color: #fff;
  display: inline-block;
  padding: 10px 0;
}

;(function($){

  var $btnToggle  = $('.btn-toggle'),
      $sideBar = $('.l-sidebar');

  $btnToggle.on('click', function(e){

    var _this = $(this);

    $sideBar.toggleClass('is-close');

    if($sideBar.hasClass('is-close')) {
      _this.text('open');
    } } else {
      _this.text('close');
    }    

  });

})(jQuery);

Hmm? The code pen embed doesn't work.

Code pen example preview

2022-09-21 15:32

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656