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"wcollapsediv - 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
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
Podobne pytania
Nowe pytania
php
PHP to szeroko stosowany, wysokopoziomowy, dynamiczny, zorientowany obiektowo i interpretowany język skryptowy przeznaczony głównie do tworzenia stron WWW po stronie serwera. Używane w przypadku pytań dotyczących języka PHP.
.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"); }