将侧面导航栏移到移动屏幕的右侧

Question

我有一个页面，其中有一个侧栏可以打开不同的页面。在将侧边栏移到右侧的宽屏中，它可以正常工作，但是当我在移动屏幕上尝试此操作时，侧边栏将移至小屏幕。请帮助我，以使其在宽屏以及移动屏幕的右侧都能正常工作。

以下是我页面的HTML和CSS。

我已经在互联网上进行搜索，但没有得到任何解决方案。从我的角度来看，我试图更改HTML页面的方向，但无法正常工作。

/* CSS Document */

body {
  background-color: #599cff;
  font-family: sans-serif, Arial, Helvetica;
  /*direction:rtl;*/
  /*font-family: times-new-roman;*/
}

.line {
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #47748b;
  /*margin: 5px 0;*/
}

#sidebar {
  font-family: sans-serif;
  overflow: hidden;
  z-index: 3;
  /*direction:rtl;*/
  /*height:100vh;*/
  /*overflow-y: scroll;*/
}

#sidebar h3 {
  font-size: .8em;
  color: #F0F8FF;
  text-transform: uppercase;
}

h6 {
  text-transform: uppercase;
  color: #a9a9a9;
  font-size: .7em;
  font-weight: bold;
}

#sidebar .list-group {
  max-width: 300px;
  background-color: #006666;
  /*#333;*/
  min-height: 100vh;
}

#sidebar i {
  margin-right: 6px;
}

#sidebar .list-group-item {
  border-radius: 4;
  background-color: #006666;
  /*#333;*/
  color: #F0F8FF;
  /*#333;#ccc;*/
  border-left: 0;
  border-right: 0;
  border-top: 0;
  font-size: .9em;
  /*border-color: #0d8686;#2c2c2c;*/
  #F0F8FF-space: nowrap;
}

#sidebar .list-group-item:hover {
  background-color: #F0F8FF;
  color: #333;
}


/* highlight active menu */

#sidebar .list-group-item:not(.collapsed) {
  background-color: #73abab;
  /*#222;*/
  /*border-color:#99cccc;#006666;*/
}


/* closed state */

#sidebar .list-group .list-group-item[aria-expanded="false"]::after {
  content: " \f0d7";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}


/* open state */

#sidebar .list-group .list-group-item[aria-expanded="true"] {
  background-color: #006666;
  /*#222;*/
  color: #F0F8FF;
  /*border-color:#99cccc;*/
}

#sidebar .list-group .list-group-item[aria-expanded="true"]::after {
  content: " \f0da";
  font-family: FontAwesome;
  display: inline;
  text-align: right;
  padding-left: 5px;
}


/* level 1*/

#sidebar .list-group .collapse .list-group-item,
#sidebar .list-group .collapsing .list-group-item {
  padding-left: 20px;
}


/* level 2*/

#sidebar .list-group .collapse>.collapse .list-group-item,
#sidebar .list-group .collapse>.collapsing .list-group-item {
  padding-left: 30px;
}


/* level 3*/

#sidebar .list-group .collapse>.collapse>.collapse .list-group-item {
  padding-left: 40px;
}

@media (max-width:768px) {
  #sidebar {
    min-width: 35px;
    max-width: 40px;
    overflow-y: auto;
    overflow-x: visible;
    transition: all 0.25s ease;
    transform: translateX(-45px);
    /*position: fixed;*/
  }
  #sidebar.show {
    transform: translateX(0);
  }
  #sidebar::-webkit-scrollbar {
    width: 0px;
  }
  #sidebar,
  #sidebar .list-group {
    min-width: 35px;
    overflow: visible;
  }
  /* overlay sub levels on small screens */
  #sidebar .list-group .collapse.show,
  #sidebar .list-group .collapsing {
    position: relative;
    z-index: 1;
    width: 190px;
    top: 0;
  }
  #sidebar .list-group>.list-group-item {
    text-align: center;
    padding: .75rem .5rem;
  }
  #sidebar h3 {
    font-size: .50em;
  }
  /* hide caret icons of top level when collapsed */
  #sidebar .list-group>.list-group-item[aria-expanded="true"]::after,
  #sidebar .list-group>.list-group-item[aria-expanded="false"]::after {
    display: none;
  }
}

.collapse.show {
  visibility: visible;
}

.collapsing {
  visibility: visible;
  height: 0;
  -webkit-transition-property: height, visibility;
  /*-moz-transition-property: height, visibility;*/
  transition-property: height, visibility;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.collapsing.width {
  -webkit-transition-property: width, visibility;
  /*-o-transition-property:width, visibility;*/
  transition-property: width, visibility;
  width: 0;
  height: 100%;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.language {
  float: right;
  text-align: center;
  line-height: 41px;
  height: 40px;
  position: relative;
  font-family: 'Conv_STC-Regular';
  cursor: pointer;
  margin-top: -1px;
}

<html lang="en" dir="rtl">
<!--changed here from ltr to rtl-->

<head>
  <!--<meta charset="utf-8">-->
  <meta http-equiv="content-type" content="text/html" charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="bootstrap/css/sidenavbar.css">
  <link rel="stylesheet" href="bootstrap/css/font-awesome.min.css">
  <link rel="stylesheet" href="bootstrap/css/tabs.css">
  <title>Bootstrap Side NavBar</title>
</head>

<body>
  <div class="container-fluid pl-4 pt-2 ml-auto">
    <div class="row d-flex d-md-block flex-nowrap wrapper pr-2 flex-row-reverse">
      <!--added here flex-row-reverse -->
      <div class="col-md-3 float-right col-1 pl-0 pr-2 width show collapse" id="sidebar" aria-expanded="true">
        <!--added here float-right,-->
        <!--add "collapse" in the class to hide on page load -->
        <div class="list-group border-0 card text-center text-md-right">
          <!-- changed here from text-md-left to text-md-right -->
          <div style="text-align:center;">
            <img src="images/userid.jpg" style="width:40%;border-radius:50%"></img>
            <h3>User</h3>
          </div>
          <div class="line"> </div>
          <a href="#manifest" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false">
            <i class="fa fa-truck"></i>
            <span class="d-none d-md-inline">Manifest/Operation</span>
          </a>
          <div class="collapse" id="manifest">
            <a href="#" class="list-group-item" data-parent="#manifest">Upload Truck Pre Arrival</a>
            <a href="#" class="list-group-item" data-parent="#manifest">Generate DO</a>
            <a href="#" class="list-group-item" data-parent="#manifest">Check In Gate</a>
            <a href="#" class="list-group-item" data-parent="#manifest">Check Out Gate</a>
            <a href="#" class="list-group-item" data-parent="#manifest">Generate Gatepass</a>
          </div>
          <a href="#billing" class="list-group-item d-inline-block collapsed" data-toggle="collapse" data-parent="#sidebar" aria-expanded="false">
            <i class="fa fa-dollar"></i>
            <span class="d-none d-md-inline">Billing</span>
          </a>
          <div class="collapse" id="billing">
            <a href="#" class="list-group-item" data-parent="#billing">Charge/Service Codes</a>
            <a href="#" class="list-group-item" data-parent="#billing">Vat Setup</a>
            <a href="#" class="list-group-item" data-parent="#billing">Generate Invoice</a>
          </div>

          <a href="#commercial" class="list-group-item d-inline-block collapsed" data-parent="#sidebar" data-toggle="collapse" aria-expanded="false">
            <i class="fa fa-shopping-cart"></i>
            <span class="d-none d-md-inline">Commercial</span>
          </a>
          <div class="collapse" id="commercial">
            <a href="#" class="list-group-item" data-parent="#commercial">Customer Details</a>
            <a href="#" class="list-group-item" data-parent="#commercial">Contract Details</a>
            <a href="#" class="list-group-item" data-parent="#commercial">Creating Tariffs</a>
          </div>
          <a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
            <i class="fa fa-briefcase"></i>
            <span class="d-none d-md-inline">Finance</span>
          </a>
          <a href="#admin" class="list-group-item d-inline-block collapsed" data-parent="#sidebar" data-toggle="collapse" aria-expanded="false">
            <i class="fa fa-wrench"></i>
            <span class="d-none d-md-inline">Admin Tools</span>
          </a>
          <div class="collapse" id="admin">
            <a href="#" class="list-group-item" data-parent="#commercial">Modules</a>
            <a href="#" class="list-group-item" data-parent="#commercial">Menu Items</a>
            <a href="#" class="list-group-item" data-parent="#commercial">User Group</a>
            <a href="#" class="list-group-item" data-parent="#commercial">Login Users</a>
            <a href="#" class="list-group-item" data-parent="#commercial">Bilingual Interface Setup</a>
            <a href="#" class="list-group-item" data-parent="#commercial">Bilingual Message Setup</a>
            <a href="#" class="list-group-item" data-parent="#commercial">System Codes</a>
          </div>
          <a href="#settings" class="list-group-item d-inline-block collapsed" data-parent="#sidebar" data-toggle="collapse" aria-expanded="false">
            <i class="fa fa-sliders"></i>
            <span class="d-none d-md-inline">Settings</span>
          </a>
          <div class="collapse" id="settings">
            <a href="#" class="list-group-item" data-parent="#settings">Company Profile</a>
          </div>
        </div>
        <div class="line"> </div>
      </div>
      <main class="col-md-12 col px-5 pl-md-2 pt-0 main mx-auto" style="background-color:white;border-radius:4px">
        <div class="row pl-md-1 pl-0">
          <div class="col-md-1 pl-md-0">
            <a href="#" data-target="#sidebar" data-toggle="collapse" aria-expanded="true">
              <i class="fa fa-navicon fa-2x py-2 p-1"></i>
            </a>
          </div>
          <div class="col-md-8 pl-md-0 pl-5">
            <div class="pt-3">
              <h6>Saudi Development & Export Services Co. Ltd.</h6>
            </div>
          </div>
          <div class="col-md-2 pl-0 pr-5" style="text-align:left">
            <div class="language pt-1">
              <a href="#" style="text-decoration:none">
                <i class="fa fa-globe"></i> English
              </a>
            </div>
          </div>
        </div>

        <hr>

        <div class="row pl-md-1 pl-1">
          <div class="col-md-12 pl-0">
            <p class="lead">DashBoard</p>
          </div>
        </div>
        <div class="tab-content">
          <div class="os-tabs-controls">
            <ul class="nav nav-pills upper">
              <li class="nav-item">
                <a class="nav-link active" data-toggle="tab" href="#para" aria-expanded="true">Item1</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" data-toggle="tab" href="#control" aria-expanded="false">Item2</a>
              </li>
            </ul>
          </div>
          <div id="para" class="tab-pane active" aria-expanded="true">
            <div class="row pl-md-1 pl-0">
              <div class="col-md-10 pl-1 pt-1" style="border-top:3px solid black">
                <button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo" aria-expanded="true">
                        horizontal collapsible
                      </button>
                <div id="demo" class="width collapse show" aria-expanded="true">
                  <div class="list-group">
                    <!--style="width:600px;"-->
                    <p>
                      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta
                      gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                  </div>
                </div>
              </div>

              <div class="col-md-2 pl-md-0 pl-1 pt-1" style="border-top:3px solid black">
                <button role="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo2" aria-expanded="true">
                        vertical collapsible
                      </button>
                <div id="demo2" class="height collapse show" aria-expanded="true">
                  <div class="list-group">
                    <!--style="width:200px;"-->
                    <p>
                      Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="control" class="tab-pane" aria-expanded="false">
            <div class="row pl-md-1 pl-0 pt-2" style="border-top:3px solid black">
              <div class="col-md-2 pl-1">
                <label>User ID:</label>
              </div>
              <div class="col-md-10 pl-md-0 pl-1">
                <input type="text" name="username" />
              </div>
            </div>
            <div class="row pl-md-1 pl-0">
              <div class="col-md-2 pl-1">
                <label>User Password:</label>
              </div>
              <div class="col-md-10 pl-md-0 pl-1">
                <input type="password" name="password" />
              </div>
            </div>
            <div class="row pl-md-1 pl-0">
              <div class="col-md-2 pl-1">
                <label>User Profile:</label>
              </div>
              <div class="col-md-10 pl-md-0 pl-1">
                <input type="text" name="profile" />
              </div>
            </div>
          </div>
        </div>

      </main>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>

</html>

Answer 1

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #ddd;
}

.navbar ul,
.navbar li {
  display: inline-block;
}

@media (min-width: 767px) {
  .navbar {
    position: fixed;
    top: 50%;
    right: 0;
    left: initial;
    width: 125px;
    background-color: #ddd;
    /*width: 0%;*/
  }
  .navbar ul,
  .navbar li {
    display: block;
  }
}

<nav class="navbar">

  <ul class="navbar-top-right">
    <li><button onclick="jump('header')">home</button></li>
    <li><button onclick="jump('special')">Special</button></li>
    <li><button onclick="jump('menu')">Menu</button></li>
    <li><button onclick="jump('map')">Map</button></li>
    <li><button onclick="jump('about')">About</button></li>
  </ul>

</nav>