Tips for creating a vertical drawer using jQuery and CSS

Question

Tips for creating a vertical drawer using jQuery and CSS

Hello, I am currently working on developing a drawer component using Ember.js. If you want to view the progress so far, feel free to check out this jsbin http://jsbin.com/wulija/8/edit

My goal is to have the drawer look like the following initially:

+---------------------------+
|    A      B        C      |
+---------------------------+
  ... other page content ...

When an option is selected, the corresponding component will be displayed. The drawer should slide down to reveal content A and overlap the following page content.

+---------------------------+
|    _A_    B        C      |
+---------------------------+
|                           |  |  Clicking on A slides down to show content A
|    content A              |  V  Following page content is covered by the drawer
+---------------------------+

If option B is clicked, content A will slide left and content B will slide in from the right. The height of the drawer will adjust according to the size of content B.

+---------------------------+
|    A    _B_        C      |
+---------------------------+
|                           |  |  If content B has more content
|                           |  |  It will slide further down
|nt A <--     <-- Content B |  V  
|                           |
+---------------------------+

If the currently selected option is clicked again, the drawer will close.

+---------------------------+
|    A    _B_        C      |
+---------------------------+   ^
                                |  Close drawer

I have encountered a few challenges along the way:

One issue is with the sliding drawer adjusting its height based on the content size. Since all content-X elements are set to position: absolute; and moved using jQuery's transform: translate, the drawer does not extend properly because these elements do not occupy any space. Additionally, position: absolute; elements cannot be hidden with overflow-y: hidden;.
Another challenge is that each content-X has a different size and its data is fetched via AJAX requests, making the size unknown beforehand. Therefore, having a fixed length drawer is not feasible. Ideally, I would like the browser layout engine to allocate space dynamically as needed. This would require setting content-X elements to position: static;, resulting in the three contents stacking together vertically.

javascript jquery html css

Answer 1

Answer №1

When it comes to completing tasks, there are numerous things on your to-do list. I have provided the first option below.

$(document).ready(function () {
  var show1 = false,
      show2 = false,
      show3 = false,
      
      content1 = $('.btn-1'),
      content2 = $('.btn-2'),
      content3 = $('.btn-3');
  
  $('.content-placeholder').css("width", $(window).width());
  
  var w = $(window).width() + 30;
  
  $(window).resize(function () {
    w = $(window).width() + 30;
  });
  
  function checkDrawer (shouldOpen) {
    if (shouldOpen) {
      $('.drawer-content').addClass('show');
    } else {
      $('.drawer-content').removeClass('show');
    }
  }
  
  $('.btn-1').on('click', function () {
    show1 = !show1;
    show2 = false;
    show3 = false;
    checkDrawer(show1 || show2 || show3);
    if($('.btn-1').hasClass( "current" ))
      {
        $('.main_content').slideUp(1000);
        content1.removeClass('current');
      }
    else
      {
        $('.main_content').slideDown(1000);
        content1.addClass('current');
      }
    $('.drawer-content').css('transform', 'translate(0, 0)');
    
    
    content2.removeClass('current');
    content3.removeClass('current');
  });
  
  $('.btn-2').on('click', function () {
    show1 = false;
    show2 = !show2;
    show3 = false;
    checkDrawer(show1 || show2 || show3);
    
    
    
    $('.drawer-content').css('transform', 'translate(-' + w + 'px, 0)');
    
    
    content1.removeClass('current');
    
    content3.removeClass('current');
    
  });
  
  $('.btn-3').on('click', function () {
    show1 = false;
    show2 = false;
    show3 = !show3;
    checkDrawer(show1 || show2 || show3);
 
    $('.drawer-content').css('transform', 'translate(-' + 2 * w + 'px, 0)');
    

    content1.removeClass('current');
    content2.removeClass('current');
    content3.addClass('current');
  });
});

.main_content{
  position:relative;
  z-index:1;
  display:none;
}

.drawer {
    border: 1px solid green;
    height: 100px;
    position: fixed;
    width: 100%;
}
.drawer-navbar {
    width: 100%;
}
.drawer-content {
    overflow-x: hidden;
    transition: all 0.3s ease 0s;
    width: 5000px;
  position:relative;
}
.drawer-content.show {
    max-height: 700px;
}
.content-placeholder {
    border: 1px solid yellow;
    float: left;
    top: 90px;
    
}
.content-placeholder > div {
    transition: all 0.5s ease 0s;
}
.content-placeholder.current {
    border: 5px solid yellow;
}
.content-1 {
    background-color: red;
    height: 300px;
}
.content-2 {
    background-color: green;
    height: 200px;
}
.content-3 {
    background-color: blue;
    height: 100px;
}
.other-content {
    position: relative;
    top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div class="drawer">
    <div class="drawer-navbar">
      <ul>
        <li class="btn-1">1</li>
        <li class="btn-2">2</li>
        <li class="btn-3">3</li>
      </ul>
    </div>
    
    <div class="main_content">
    <div class="drawer-content">
      <div class="content-placeholder">
        <div class="content-1"></div>
      </div>
      <div class="content-placeholder">
        <div class="content-2"></div>
      </div>
      <div class="content-placeholder">
        <div class="content-3"></div>
      </div>     
    </div>
    </div>
  </div>
  <div class="other-content">
    additional web content......sadfa
    sdfj
    asdjf
    sadjf
    sadjf
    jsad
    fjklxzcjlkzxcjv;lkjslkdjfl;kjaskdljflksd
    f
    asdf
    asd
    f
    adsf
    asd
    f
    ads
    fasd
    f
    asd
    fasd
    f
    asd
    fsad
    f
    adsf
    asd
    f
    asdfasd
    fasd
    f
    asdf
    asd
    fa
    sdfa
    sdjf
    asdjf
    aksdjfalskdjflkasdjflkjadslkjflkasf
    
  </div>

Hopefully this helps you progress towards your goal. Good luck!

For reference, you can view the Fiddle Here.

Answer 2

When it comes to completing tasks, there are numerous things on your to-do list. I have provided the first option below.

$(document).ready(function () {
  var show1 = false,
      show2 = false,
      show3 = false,
      
      content1 = $('.btn-1'),
      content2 = $('.btn-2'),
      content3 = $('.btn-3');
  
  $('.content-placeholder').css("width", $(window).width());
  
  var w = $(window).width() + 30;
  
  $(window).resize(function () {
    w = $(window).width() + 30;
  });
  
  function checkDrawer (shouldOpen) {
    if (shouldOpen) {
      $('.drawer-content').addClass('show');
    } else {
      $('.drawer-content').removeClass('show');
    }
  }
  
  $('.btn-1').on('click', function () {
    show1 = !show1;
    show2 = false;
    show3 = false;
    checkDrawer(show1 || show2 || show3);
    if($('.btn-1').hasClass( "current" ))
      {
        $('.main_content').slideUp(1000);
        content1.removeClass('current');
      }
    else
      {
        $('.main_content').slideDown(1000);
        content1.addClass('current');
      }
    $('.drawer-content').css('transform', 'translate(0, 0)');
    
    
    content2.removeClass('current');
    content3.removeClass('current');
  });
  
  $('.btn-2').on('click', function () {
    show1 = false;
    show2 = !show2;
    show3 = false;
    checkDrawer(show1 || show2 || show3);
    
    
    
    $('.drawer-content').css('transform', 'translate(-' + w + 'px, 0)');
    
    
    content1.removeClass('current');
    
    content3.removeClass('current');
    
  });
  
  $('.btn-3').on('click', function () {
    show1 = false;
    show2 = false;
    show3 = !show3;
    checkDrawer(show1 || show2 || show3);
 
    $('.drawer-content').css('transform', 'translate(-' + 2 * w + 'px, 0)');
    

    content1.removeClass('current');
    content2.removeClass('current');
    content3.addClass('current');
  });
});

.main_content{
  position:relative;
  z-index:1;
  display:none;
}

.drawer {
    border: 1px solid green;
    height: 100px;
    position: fixed;
    width: 100%;
}
.drawer-navbar {
    width: 100%;
}
.drawer-content {
    overflow-x: hidden;
    transition: all 0.3s ease 0s;
    width: 5000px;
  position:relative;
}
.drawer-content.show {
    max-height: 700px;
}
.content-placeholder {
    border: 1px solid yellow;
    float: left;
    top: 90px;
    
}
.content-placeholder > div {
    transition: all 0.5s ease 0s;
}
.content-placeholder.current {
    border: 5px solid yellow;
}
.content-1 {
    background-color: red;
    height: 300px;
}
.content-2 {
    background-color: green;
    height: 200px;
}
.content-3 {
    background-color: blue;
    height: 100px;
}
.other-content {
    position: relative;
    top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div class="drawer">
    <div class="drawer-navbar">
      <ul>
        <li class="btn-1">1</li>
        <li class="btn-2">2</li>
        <li class="btn-3">3</li>
      </ul>
    </div>
    
    <div class="main_content">
    <div class="drawer-content">
      <div class="content-placeholder">
        <div class="content-1"></div>
      </div>
      <div class="content-placeholder">
        <div class="content-2"></div>
      </div>
      <div class="content-placeholder">
        <div class="content-3"></div>
      </div>     
    </div>
    </div>
  </div>
  <div class="other-content">
    additional web content......sadfa
    sdfj
    asdjf
    sadjf
    sadjf
    jsad
    fjklxzcjlkzxcjv;lkjslkdjfl;kjaskdljflksd
    f
    asdf
    asd
    f
    adsf
    asd
    f
    ads
    fasd
    f
    asd
    fasd
    f
    asd
    fsad
    f
    adsf
    asd
    f
    asdfasd
    fasd
    f
    asdf
    asd
    fa
    sdfa
    sdjf
    asdjf
    aksdjfalskdjflkasdjflkjadslkjflkasf
    
  </div>

Hopefully this helps you progress towards your goal. Good luck!

For reference, you can view the Fiddle Here.

Tips for creating a vertical drawer using jQuery and CSS

Answer №1

Similar questions

What could be the reason behind datatables automatically setting the table width when the bServerSide parameter is set to true

The dilemma between installing Electron or installing Electron-Builder: which one

What is the best way to set up the login page and logged-in homepage using Node, Express, and Passport with the "/" route?

The changes made to $scope in AngularJS are not being displayed in the view

Trigger a re-render in React using setState(null) and forceUpdate()

I am finding the event naming conventions in Vue 3 to be quite perplex

Can JavaScript event listeners be compelled to trigger in a specific sequence?

Saving vast array in MongoDB

How to adjust animation timing for various elements during a CSS 3D flip with a delay?

How come my HTML form keeps refreshing instead of displaying an alert after submission, even though I've included onsubmit="return false"? Additionally, it seems to be throwing an error

Layer divs on top of each other without explicitly defining their stacking order

Sending back an HTTP response code from PHP to AJAX

Using External APIs in React: A Guide

Having trouble selecting links in the navigation bar

I need help figuring out how to retrieve the full path of an uploaded file in JavaScript. Currently, it only returns "c:fakepath" but I need

``CSS: Styling a Rounded Div with a Clipped Scrollbar

Sluggish webpage (Jquery and bootstrap)

Only refresh the content when there are updates from the ajax call

Issues with PHP ajax causing database insertion failure

Guide to obtaining ngPrime autocomplete text when the button is clicked within Angular 6