Question 36327 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

What transition must be applied so that sidebar moves from left to right with ease 0.2s? – Jquery

What transition must be applied so that sidebar appear to move in from left? Transition value: all 0.2s ease I could have done it by making width : 100% and zero on click, but looking for alternatives.
So, basically my query is when I click on hamburger menu sidebar should apparently move from left to right.

https://codepen.io/TA0011/pen/QWrvzYe

//for sidebar
const sidebar = document.querySelector('#mySidebar')

const toggle = document.querySelector('#sidebar-toggle')

toggle.addEventListener('click', toggleSidebar)

function toggleSidebar(e) {
  toggle.classList.toggle('open')
  sidebar.classList.toggle('open');
}
//for sidebar
*{
  margin:0;
  padding:0;
  list-style:none;
  box-sizing:border-box;
  text-decoration:none;
}
#sidebar-toggle{
  display: inline-block;
  cursor: grab;
  background: rgba(0, 136,169, 1);
  border-radius: 50%;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  margin-top: 5px;
}
#sidebar-toggle div{
  width: 20px;
  height: 2px;
  background-color: #fff;
  margin: 6px 0;
  transition: all 0.3s ease 0s;
  cursor: grab;
}
#sidebar-toggle.open .bar4 {
  transform: translate(0, 8px) rotate(-45deg);
}

#sidebar-toggle.open .bar5 {
  opacity: 0;
}

#sidebar-toggle.open .bar6 {
  transform: translate(0px, -8px) rotate(45deg);
}

.sidebar {
  display:none;
  position: fixed;
  height: 100vh;
  top: 50px;
  left: 0;
  background-color: #fff;
  width: 15.625rem;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}
.open.sidebar {
  display: flex;
}
.sidebar-nav{
  position: absolute;
  margin: 0 0 0;
  width: 100%;
  padding:  5px 10px;
}
.sidebar-nav ul{
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: flex-start;
}
.sidebar-nav ul li {
  padding: 10px;
  color: #007bff;
  display: flex;
  flex-direction: column;
}
.sidebar-nav ul li:hover{
   background: #007bff;
   color: #fff;
}

.sidebar-nav ul li a .icon{
  color:#007bff;
  width:30px;
  display: inline-block;
}
.sidebar-nav .down_key{
    margin-left: 50px;
}
.sidebar-nav ul li ul li{
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}
<div id="sidebar-toggle">
            <div class="bar4"></div>
            <div class="bar5"></div>
            <div class="bar6"></div>
        </div> 
<div class="sidebar" id='mySidebar'>
  <div class="sidebar-nav">
        <ul>
            <li>
                <a href="">
                    <span class="icon"><i class="fas fa-home"></i></span>
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="icon"><i class="fas fa-file-medical-alt"></i></span>
                    <span>Feed</span>
                </a>
            </li>
            <li>
                <a href="" class="feat-btn">
                    <span class="icon"><i class="fas fa-feather-alt"></i></span>
                    <span>Compose</span>
                    <span class="down_key"><i class="fas fa-chevron-down"></i></span>
                    <ul class="feat-show">
                        <li><a href="">Email</a></li>
                    </ul>
                </a>
            </li>
        </ul>
    </div>
</div>
Tags:

2

Answers


  1. 0 
    //for sidebar
const sidebar = document.querySelector('#mySidebar')

const toggle = document.querySelector('#sidebar-toggle')

toggle.addEventListener('click', toggleSidebar)

function toggleSidebar(e) {
  toggle.classList.toggle('open')
  sidebar.classList.toggle('open');
}
//for sidebar
    *{
  margin:0;
  padding:0;
  list-style:none;
  box-sizing:border-box;
  text-decoration:none;
}
#sidebar-toggle{
  display: inline-block;
  cursor: grab;
  background: rgba(0, 136,169, 1);
  border-radius: 50%;
  padding: 5px 10px;
  height: 40px;
  width: 40px;
  margin-top: 5px;
}
#sidebar-toggle div{
  width: 20px;
  height: 2px;
  background-color: #fff;
  margin: 6px 0;
  transition: all 0.3s ease 0s;
  cursor: grab;
}
#sidebar-toggle.open .bar4 {
  transform: translate(0, 8px) rotate(-45deg);
}

#sidebar-toggle.open .bar5 {
  opacity: 0;
}

#sidebar-toggle.open .bar6 {
  transform: translate(0px, -8px) rotate(45deg);
}

.sidebar {
  transition: 4s, opacity 0.5s linear;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
  position: fixed;
  height: 100vh;
  top: 50px;
  left: 0;
  background-color: #fff;
  width: 15.625rem;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75);
}
.open.sidebar {
  visibility: visible;
  opacity: 1;
  display:flex;
}
.sidebar-nav{
  position: absolute;
  margin: 0 0 0;
  width: 100%;
  padding:  5px 10px;
}
.sidebar-nav ul{
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: flex-start;
}
.sidebar-nav ul li {
  padding: 10px;
  color: #007bff;
  display: flex;
  flex-direction: column;
}
.sidebar-nav ul li:hover{
   background: #007bff;
   color: #fff;
}

.sidebar-nav ul li a .icon{
  color:#007bff;
  width:30px;
  display: inline-block;
}
.sidebar-nav .down_key{
    margin-left: 50px;
}
.sidebar-nav ul li ul li{
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}
    <div id="sidebar-toggle">
            <div class="bar4"></div>
            <div class="bar5"></div>
            <div class="bar6"></div>
        </div> 
<div class="sidebar" id='mySidebar'>
  <div class="sidebar-nav">
        <ul>
            <li>
                <a href="">
                    <span class="icon"><i class="fas fa-home"></i></span>
                    <span>Home</span>
                </a>
            </li>
            <li>
                <a href="">
                    <span class="icon"><i class="fas fa-file-medical-alt"></i></span>
                    <span>Feed</span>
                </a>
            </li>
            <li>
                <a href="" class="feat-btn">
                    <span class="icon"><i class="fas fa-feather-alt"></i></span>
                    <span>Compose</span>
                    <span class="down_key"><i class="fas fa-chevron-down"></i></span>
                    <ul class="feat-show">
                        <li><a href="">Email</a></li>
                    </ul>
                </a>
            </li>
        </ul>
    </div>
</div>

    You can figure out the styling, but here is a working solution, you cannot add a transition to a display:none, you need to use visibility and opacity instead

    Login or Signup to reply.
  2. 0

    Use transform:translateX(-250px) to do the animation

    #mySidebar{
  transition:0.2s;
  transform:translateX(-250px)
}
#mySidebar.open{
  transform:translateX(0)
}

    https://codepen.io/Guichi/pen/dyewaPP

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search