Your sidebar or left navigation may have content that needs to expand past the default width. One way to account for this is to make the left navigation resizable, allowing users to expand and collapse it by dragging.
In this tutorial, we're using Bootstrap. Copy and paste the external links below in the head section of your project's HTML file:
The HTML code below includes two main parts: the sidebar and a main section. The sidebar is inside an
aside tag with an
#resizable. This is important to keep in mind because we will be selecting this
In the CSS code below, we set the sidebar height to a full-height by making its height value
100vh. This sets the sidebar to the full height of the viewport. The vh unit uses percentages, so
100vh is 100% of the viewport. Then we give a default width for the sidebar by setting its width to
200px. Feel free to change the width value to customize it for your project. For the drag handle, we set a
100 to make sure that it is on top of all the other elements on the page. If there are any other elements with a higher
z-index, we can't select the drag handle. The drag handle's width value is set to
8px. This width is enough for mouse to select and drag it. You can make it wider by increasing its width. Finally, we use the
cursor: col-resize property and value. The
col-resize property indicates that the column can be resized horizontally.
And there is it. In the JSFiddle below, drag the gray panel to see how both the sidebar and the main area gets re-sized: