javascript - How to collapse a sidebar on small screens? - Stack Overflow

admin管理员组

文章数量:1320627

I'm making a fixed sidebar but it won't collapse.. I really don't know how to do it.
I have searched on the internet .. still couldn't find any results.

here is my sidebar.html

<div class="container-fluid" style="background-color:#19334d">
<div class="sidebar" id="sidebar">
    <div class="pt-5 text-center pb-2 ">
        <a href="../index.php" class="logo-normal pr-3">
            <img src='../assets/img/favicon.ico' width="50px">
        </a>
        <a href="../index.php" class="logo-normal">
            Fitness Addict 
        </a>
    </div>
    <hr style="border-color:white; width:90%" align=center>
    <ul class="nav pl-4">
        <li >
            <a href="../home/myhome.php">
                <i class="fa fa-home icon pr-4"></i>
                My Home
            </a>
        </li>                
        .
        .
        .
    </ul>
</div>

The css:

.sidebar{
  height: calc(100vh - 90px);
  width: 230px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: cover;
  background-position: center center;
  display: block;
  background: #408000;
  box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6);
  margin-top: 80px;
  margin-left: 20px;
  border-radius: 5px;
}

.sidebar .nav {
 margin-top: 20px;
 display: block;
}

I have tried to do it through JavaScript but I don't know how to make it. anyone can help?

I'm making a fixed sidebar but it won't collapse.. I really don't know how to do it.
I have searched on the internet .. still couldn't find any results.

here is my sidebar.html

<div class="container-fluid" style="background-color:#19334d">
<div class="sidebar" id="sidebar">
    <div class="pt-5 text-center pb-2 ">
        <a href="../index.php" class="logo-normal pr-3">
            <img src='../assets/img/favicon.ico' width="50px">
        </a>
        <a href="../index.php" class="logo-normal">
            Fitness Addict 
        </a>
    </div>
    <hr style="border-color:white; width:90%" align=center>
    <ul class="nav pl-4">
        <li >
            <a href="../home/myhome.php">
                <i class="fa fa-home icon pr-4"></i>
                My Home
            </a>
        </li>                
        .
        .
        .
    </ul>
</div>

The css:

.sidebar{
  height: calc(100vh - 90px);
  width: 230px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: cover;
  background-position: center center;
  display: block;
  background: #408000;
  box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6);
  margin-top: 80px;
  margin-left: 20px;
  border-radius: 5px;
}

.sidebar .nav {
 margin-top: 20px;
 display: block;
}

I have tried to do it through JavaScript but I don't know how to make it. anyone can help?

• javascript
• html
• css

Share Improve this question Follow edited Oct 3, 2018 at 11:40 Constantin Chirila 2,13922 gold badges2020 silver badges3333 bronze badges asked Oct 3, 2018 at 7:46 isso kdisso kd 39955 silver badges1818 bronze badges 2

• When should the sidebar collapse? – OliverRadini Commented Oct 3, 2018 at 7:54
• on small screens – isso kd Commented Oct 3, 2018 at 7:57

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

Your JavaScript might look like this:

/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */

function openNav() 
{
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */

function closeNav() 
{
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}

And then you'd need to add this JS as source on the HTML using relevant code. Via W3Schools tutorial on creating a collapsible sidebar.

You might also want to have a look here at the awesome responsive sidebar tutorial on W3Schools.

collapsed:

max-width: 0;

not collapsed:

max-width: auto;

you can add property to sidebar

tranform:translateX(-100%);

when sidebar is active add class active using js and add css

sidebar.active{
    tranform:translateX(0%);
}

to the parent of side bar add property

.parent{
    overflow-x:hidden;
}

not collapsed:

.sidebar {
    transition: left 0.3s ease-out;
}

collapsed via adding class 'hide' :

.sidebar.hide {
    left: -295px;
}

-295px because width is 230px, margin-left is 20px and box-shadow has blur 45px

You could use css and the transition property.

in .css:

.sidebar {
  // your current code
  left: -210px; // example
  transition: left 2s ease;
}

.sidebar:hover{
  left: 0px;
}

This will let your div slide in over 2 seconds and disapear when not hoovered anymore.
See an example here.

Try Bootstrap, its made for creating responsive websites for all devices with little hassle, and you can find lots of other cool options! check out their documentation

You can use media queries to detect screen size, and then hide the sidebar at smaller sizes:

.sidebar{
  height: calc(100vh - 90px);
  width: 230px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-size: cover;
  background-position: center center;
  display: block;
  background: #408000;
  box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, 0.6);
  margin-top: 80px;
  margin-left: 20px;
  border-radius: 5px;
}

.sidebar .nav {
 margin-top: 20px;
 display: block;
}

@media (max-width: 400px) {
  .sidebar {
    display: none;
  }
}

<div class="container-fluid" style="background-color:#19334d">
<div class="sidebar" id="sidebar">
    <div class="pt-5 text-center pb-2 ">
        <a href="../index.php" class="logo-normal pr-3">
            <img src='../assets/img/favicon.ico' width="50px">
        </a>
        <a href="../index.php" class="logo-normal">
            Fitness Addict 
        </a>
    </div>
    <hr style="border-color:white; width:90%" align=center>
    <ul class="nav pl-4">
        <li >
            <a href="../home/myhome.php">
                <i class="fa fa-home icon pr-4"></i>
                My Home
            </a>
        </li>                
    </ul>
</div>

本文标签： javascriptHow to collapse a sidebar on small screensStack Overflow