Czy mogę zrobić zwinięty pasek nawigacyjny w moim kodzie, ponieważ jeśli otworzę w telefonie komórkowym, nie można go zwinąć, aby go utworzyć? Próbowałem utworzyć przycisk i uczynić go fałszywym, ale pasek nawigacyjny nie wyświetla się na komputerze ani na telefonie komórkowym. to jest kod, który tworzę, aby wyświetlić pasek nawigacyjny.

<nav class="navbar-default navbar-side navbar-collapse" role="navigation">
        <div class="sidebar-collapse">

          <ul class="nav" id="main-menu">
            <li>
              <a class="active-menu ukuran"  href="?hal=dashboard"><i class="fas fa-tachometer-alt "></i> Dashboard</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-item dropdown-toggle ukuran"  id="navbardrop" data-toggle="dropdown"><i class="fas fa-chart-line"></i> Quality</a>
              <div class="dropdown-menu">
                <a href="?hal=quality1" class="dropdown-item ukuran2">Quality 1</a>
                <a href="?hal=pemborong" class="dropdown-item ukuran2">Pemborong</a>
                <a href="?hal=quality2" class="dropdown-item ukuran2">Quality 2</a>             
              </div>
            </li>

              <li>
              <a class="active-menu ukuran"  href="logout.php"><i class="fas fa-sign-out-alt"></i> Keluar</a>
            </li>
          </ul>   
        </div>    
      </nav>

Kod CSS w ten sposób

.navbar-side {
    border: none;
    background-color: #d5f0f3;
    height: 100%;
}
.sidebar-collapse .nav > li > a {
    color:#000;
    background-color: #d5f0f3;;
    text-shadow:none;

}


.navbar-cls-top .navbar-brand{
    color: #00c900;
    background: #d5f0f3;
    text-align: center;
    height: 50px;
    font-size: 40px;
}
.dropdown a {
    padding-left: 8px;
}

@media(min-width:768px) {
    .navbar-side {
        z-index: 1;
        position: absolute;
        width: 260px;
    }

    .navbar {
        border-radius: 0px; 
    }
}
-1
abdul kadir almasyhur 20 grudzień 2019, 05:45

2 odpowiedzi

Kilka rzeczy:

  • Brak zajęć rozszerzonych w <nav>
  • Brak id="collapsibleNavbar" w collapse div
  • brakuje odpowiedniej klasy w div z id="main-menu"

Działający fragment kodu poniżej:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav" id="main-menu">
      <li>
        <a class="active-menu ukuran" href="?hal=dashboard"><i class="fas fa-tachometer-alt "></i> Dashboard</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-item dropdown-toggle ukuran" id="navbardrop" data-toggle="dropdown"><i class="fas fa-chart-line"></i> Quality</a>
        <div class="dropdown-menu">
          <a href="?hal=quality1" class="dropdown-item ukuran2">Quality 1</a>
          <a href="?hal=pemborong" class="dropdown-item ukuran2">Pemborong</a>
          <a href="?hal=quality2" class="dropdown-item ukuran2">Quality 2</a>
        </div>
      </li>

      <li>
        <a class="active-menu ukuran" href="logout.php"><i class="fas fa-sign-out-alt"></i> Keluar</a>
      </li>
    </ul>
  </div>
</nav>
0
Akber Iqbal 20 grudzień 2019, 06:29
Pojawia się tutaj w moim fragmencie... to znaczy, że nie pojawia się w twoim środowisku? czy uwzględniłeś odniesienia do plików jquery.js, bootstrap.js, bootstrap.css?
 – 
Akber Iqbal
20 grudzień 2019, 06:53
Dodaj to do swojego css: .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); }
 – 
Akber Iqbal
20 grudzień 2019, 06:56

Pasek nawigacyjny bootstrap 4:

<html>
 <head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>
<body>
 <nav class="navbar navbar-expand-md navbar-dark bg-dark">
   <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target=".dual-collapse" aria-expanded="false">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="navbar-collapse dual-collapse collapse">
    <ul class="navbar-nav">
     <li  class="nav-item">
      <a class="nav-link active-menu ukuran"  href="?hal=dashboard"><i class="fas fa-tachometer-alt "></i> Dashboard</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle ukuran"  id="navbardrop" data-toggle="dropdown"><i class="fas fa-chart-line"></i> Quality</a>
      <div class="dropdown-menu">
        <a href="?hal=quality1" class="dropdown-item ukuran2">Quality 1</a>
        <a href="?hal=pemborong" class="dropdown-item ukuran2">Pemborong</a>
        <a href="?hal=quality2" class="dropdown-item ukuran2">Quality 2</a>             
      </div>
    </li>

    <li  class="nav-item">
      <a class="nav-link active-menu ukuran"  href="logout.php"><i class="fas fa-sign-out-alt"></i> Keluar</a>
    </li>
  </ul>
</div>
</nav>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</html>
0
Akshita Karetiya 20 grudzień 2019, 09:11