how to change sidebar to toggle on small device[Answered] RSS

• • Reply
  zhyanadil.it...

  Member

  75 Points

  513 Posts

  how to change sidebar to toggle on small device

  Mar 11, 2020 05:00 AM|zhyanadil.it@gmail.com|LINK

  i have this code which hide side bar on small device i don't want to to hide it i want change it to toggle on small device

      #sidenav {
  height: 100%;
  width: 280px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 10px;
  transition: all 300ms ease 0s;
  }
  
  #sidenav a {
  padding: 0px 0px 0px 32px;
  margin: 0px;
  text-decoration: none;
  color: #0e1c2c;
  display: block;
  transition: 0.3s
  }
  
  #sidenav a:hover {
  color: #ea4e3c;
  }
  
  @@media (max-width: 768px) {
      #sidenav {
          display: none;
      }
  }

  <div id="sidenav">
      <img id="logo" src="Images/Logo.png">
      <a href="#first">
          <p>Home</p>
      </a>
      <a href="#second">
          <p>What?</p>
      </a>
      <a href="#third">
          <p>Who?</p>
      </a>
      <a href="#fourth">
          <p>Contact</p>
      </a>
  </div>

• • Reply
  yij sun

  Contributor

  3730 Points

  1409 Posts

  Re: how to change sidebar to toggle on small device

  Mar 12, 2020 02:45 AM|yij sun|LINK

  Hi zhyanadil.it@gmail.com,

  Accroding to your description,I suggest you could create a button and you could click the button to toggle the sidenav.

  Besides,I suggest you could use bootstrap navbar or mdb sidenav.These are more Simple and convenient.

  More details,you could refer to below codes:

   <meta name="viewport" content="width=device-width, initial-scale=1" />
      <script src="Scripts/jquery-3.0.0.min.js"></script>
      <style>
          #sidenav {
              height: 100%;
              width: 0;
              /*width: 280px;*/
              position: fixed;
              z-index: 1;
              top: 0;
              left: 0;
              background-color: #111;
              overflow-x: hidden;
              transition: 0.5s;
              padding-top: 10px;
              /*transition: all 300ms ease 0s;*/
          }
  
              #sidenav a {
                  padding: 0px 0px 0px 32px;
                  margin: 0px;
                  text-decoration: none;
                  color: #818181;
                  display: block;
                  font-size: 25px;
                  transition: 0.3s
              }
  
                  #sidenav a:hover {
                      color: #f1f1f1;
                  }
  
              #sidenav .closebtn {
                  position: absolute;
                  top: 0;
                  right: 25px;
                  font-size: 36px;
                  margin-left: 50px;
              }
  
          .openbtn {
              font-size: 20px;
              cursor: pointer;
              background-color: #111;
              color: white;
              padding: 10px 15px;
              border: none;
          }
  
              .openbtn:hover {
                  background-color: #444;
              }
  
          #main {
              transition: margin-left .5s;
              padding: 16px;
          }
          /*@media (max-width: 768px) {
              #sidenav {
                  display: none;
              }
          }*/
          @media screen and (max-height: 768px) {
              #sidenav {
                  padding-top: 15px;
              }
  
                  #sidenav a {
                      font-size: 18px;
                  }
          }
      </style>
  
  
   <div id="sidenav">
              <a href="javascript:void(0)" class="closebtn">×</a>
              <a href="#first">
                  <p>Home</p>
              </a>
              <a href="#second">
                  <p>What</p>
              </a>
              <a href="#third">
                  <p>Who</p>
              </a>
              <a href="#fourth">
                  <p>Contact</p>
              </a>
          </div>
          <div id="main">
              <asp:Button ID="Button1" runat="server" Text="☰ Open Sidebar" class="openbtn" />
          </div>
          <script>
              $(function () {
                  $(".openbtn").on('click', function () {
                      event.preventDefault();
                      $("#sidenav").width("250px");
                      $("#main").css("margin-left", "250px");
                  })
                  $(".closebtn").on('click', function () {
                      event.preventDefault();
                      $("#sidenav").width("0px");
                      $("#main").css("margin-left", "0px");
                  })
              })
          </script>

  Result:

  

  More details,you could refer to below articles:

  Bootstrap-sidebar:

  https://bootstrapious.com/p/bootstrap-sidebar

  MDB-sidenav:

  https://mdbootstrap.com/docs/jquery/navigation/sidenav/

  Best regards,

  Yijing Sun

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.