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

• • Reply
  zhyanadil.it...

  Member

  68 Points

  426 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

  Participant

  1150 Points

  520 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

  MSDN Community Support
  Please remember to click "Mark as Answer" the responses that resolved your issue.
  If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.