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

"Stuck: CSS Div Transition Effect Refuses to Cooper

Is the space-between property not delivering the desired spacing?

I'm receiving a TypeError in Nodejs indicating that the hashPassword function is not recognized as a function. Can anyone offer advice on how to

HTML text/code ratio display tool

Determining the type of index to use for an interface

How to set the element in the render method in Backbone?

The index on ref in MongoDB does not seem to be yielding any improvements

Highcharts: Show tooltip above all elements

Connecting event listeners to offspring elements, the main element, and the entire document

Is there an advantage to pre-rendering a circle on an HTML5 canvas for improved performance?

Enable the duplication of strings within an array

My website using Dynamic Ajax technology is currently experiencing heavy traffic due to the number of getScript

The function form.parse() in node.js is always overlooked

Utilize AngularJS to refine and sort through data retrieved from an API

Having trouble uploading images from my personal computer onto Phaser 3

What is the best way to adjust the widths of a two-row header table using the table-layout: fixed property?

Instant webpage updates upon editing CSS/HTML live

Is being unfazed by work a common occurrence?

Achieve full height Bootstrap styling by nesting it inside a row div

Discover the color value within an array that begins with the "#" symbol