Можно ли, используя Bootstrap 4, свернуть div влево, в отличие от div, сворачивающегося наверх? (анимация) - PullRequest
Новая
       7

Можно ли, используя Bootstrap 4, свернуть div влево, в отличие от div, сворачивающегося наверх? (анимация)

1 голос
/ 02 марта 2020

Я пытаюсь использовать Bootstrap 4, чтобы свернуть div , содержащее боковое меню слева. Это возможно без многих изменений? Я имею в виду избегая написания моих собственных JS, если это возможно, или используя внешние JS.

Вот то, чего я достиг, используя функцию свертывания bootstrap, найденную здесь https://getbootstrap.com/docs/4.1/components/collapse/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<body class="no-gutters">
        <div id="wrapper" class="container-fluid ">
            <div class="spacer d-flex justify-content-center align-items-center">
            </div>
            <a class="btn btn-primary" data-toggle="collapse" href="#admin-sidebar" role="button" aria-expanded="true"
                aria-controls="admin-sidebar">
                Collapse Button (temp)
            </a>
            <div class="row ">
                <div id="admin-sidebar" class="col-2 p-0 collapse show" style="">
                    <!-- sidenav -->
                    <nav id="admin-nav" class="navbar navbar-expand-md bg-dark breadcrumb align-content-start">
                        <ul class="navbar-nav flex-column ">
                            <li class="nav-item">
                                <a href="admin.php" class="nav nav-link text-uppercase text-light">Admin Menu</a>
                            </li>
                            <li class="nav-item">
    
                                <a href="admin.php?table=sources" class="nav-link"> <i class="fas fa-table"
                                        aria-hidden="true"></i>
                                    <span class="text-light">
                                        Sources
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="?table=topics" class="nav-link">
                                    <i class="fas fa-table" aria-hidden="true"></i>
                                    <span class="text-light">
                                        Topics
                                    </span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="?table=articles" class="nav-link">
                                    <i class="fas fa-table" aria-hidden="true"></i>
                                    <span class="text-light">
                                        Articles
                                    </span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    
    </body>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Я использую Bootstrap 4, и все остальное работает нормально, поэтому, чтобы быть точным: мне нужна помощь в изменении направления свертывания, которое в настоящее время снизу вверх , справа налево.

Любая помощь будет высоко ценится.

1 Ответ

0 голосов
/ 02 марта 2020 

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

function closeNav() {
    document.getElementById("mySidebar").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
}
 body {
    font-family: "Lato", sans-serif;
}

.sidebar {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidebar a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidebar a:hover {
    color: #f1f1f1;
}

.sidebar .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;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
    .sidebar {
        padding-top: 15px;
    }
            .sidebar a {
                font-size: 18px;
            }
        }
<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      </style>
  </head>

  <body>

      <div id="mySidebar" class="sidebar">
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
      </div>

      <div id="main">
          <button class="openbtn" onclick="openNav()">☰ Open Sidebar</button>
          <h2>Collapsed Sidebar</h2>
          <p>Click on the hamburger menu/bar icon to open the sidebar, and push this content to the right.</p>
      </div>

  </body>
</html>

для получения дополнительной информации, пожалуйста, посетите ссылки ниже:

https://www.w3schools.com/howto/howto_js_sidenav.asp

...