i have dropdown menu from bootstrap 4.In adaptive small screen, I have hamburger, there has title dropdown its opens another one dropdown.So, when I open title dropdown to see what inside, dropdown automatically close full dropdown. Here`s code
<nav class="navbar navbar-expand-lg navbar-header">
<div class="container">
<div class="navbar-translate">
<a class="navbar-brand" href="./" rel="tooltip" title="Казахстанский инженерно-технологический университет" data-placement="bottom">
<img src="assets/img/logo_new.png" width="180">
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<div class="collapse navbar-collapse" style="background-color: white;" id="navigation">
<ul class="navbar-nav mr-auto" id="testing">
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle myclass" data-toggle="dropdown" href="#" id="dropdownMenuButton" role="button" aria-haspopup="true" aria-expanded="false"><?=$m_admission[$_SESSION['lang']]?></a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="?page=undergraduate"> <?=$b_undergraduate[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="?page=graduate"> <?=$b_graduate[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://kazetu.edu.kz/sites/dl/" target="_blank"> <?=$b_distance_learning[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://college.kazetu.edu.kz/"> <?=$b_college[$_SESSION['lang']]?> </a>
<a class="dropdown-item" href="https://zerde.kazetu.kz/?lang=ru" target="_blank"> <?=$zerde_kazetu_reg[$_SESSION['lang']]?> </a>
</ul>
</div>
</ul>
</div>
</div>
</nav>
</header>
I dont fount answer for my question, so, i just write it without bootstrap on clear html and css xD
Related
This is a part of code from my nav bar. I am trying to create a dropdown menu, but unfortunately on mobile when i click the toggle instead of showing dropdown it closed . I have tried to update all the stylesheet bootstrap code , and link . i have tried other models on navbar dropdown but the same thing
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="index.html">
<img src="assets/images/mindnmovelogo.png" alt="Logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
<span class="toggler-icon"></span>
</button>
<div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
<ul id="nav" class="navbar-nav ml-auto">
<li class="nav-item">
<a class="page-scroll" href="#home">INDUSTRIES</a>
</li>
<li class="nav-item">
<a class="page-scroll" href="#about">WHO WE ARE</a>
</li>
<li class="nav-item dropdown">
<a class="page-scroll nav-link " href="#" id="navbarDropdown" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fa fa-newspaper-o"></i>WHAT WE DO</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</li>
<li class="nav-item">
<a class="page-scroll" href="#footer">GET IN TOUCH</a>
</li>
</ul>
</div> <!-- navbar collapse -->
<div class="navbar-btn d-none d-sm-inline-block">
<a class="main-btn" data-scroll-nav="0" href="mailto:">GET A FREE QUOTE</a>
</div>
</nav> <!-- navbar -->
I'm creating a dropdown accordion style in bootstrap 4 and found this useful solution using JavaScript in stack overflow (Twitter Bootstrap: How to create a dropdown button with an accordion inside it?). I modified the script to suit my website navigation style but I got stuck on how to make the JavaScript find not only ID: accordion but also ID: accordion1 and so on. Thus, when I navigate out of the menu, the accordion that open will automatically hide. Currently, the script can only hide the first panel which is ID: accordion. For this project, I can't use form tag as described in Bootstrap 4: How to create a dropdown menu with an accordion inside it?. Sample in Bootply
Also, how do I make the accordion panels open in multiples.
<div class="collapse navbar-collapse " id="navbarContent">
<ul class="navbar-nav">
<li class="nav-item dropdown dropdown-accordion " data-accordion="#accordion">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ONBOARDING
</a>
<div class="dropdown-menu ">
<div class="accordion" id="accordion">
<div>
<a class="nav-link" href="#" target="_blank">
Item 01
</a>
</div>
<div>
<a class="nav-link" data-toggle="collapse" role="button" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Item 02
</a>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div> <a class="nav-link" href="#" target="_blank">
Item 02A</a>
</div>
<div> <a class="nav-link" href="#" target="_blank">
Item 02B
</a></div>
</div>
</div>
</div>
</div>
</li>
<li class="nav-item dropdown dropdown-accordion " data-accordion="#accordion">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
OFFBOARDING
</a>
<div class="dropdown-menu ">
<div class="accordion" id="accordion1">
<div>
<a class="nav-link" href="#" target="_blank">
Item 01
</a>
</div>
<div>
<a class="nav-link" data-toggle="collapse" role="button" data-parent="#accordion1" href="#collapsetwo" aria-expanded="true" aria-controls="collapsetwo">
Item 02
</a>
<div id="collapsetwo" class="collapse px-3" aria-labelledby="headingOne">
<div> <a class="nav-link" href="#" target="_blank">
Item 02A
</a></div>
<div> <a class="nav-link" href="#" target="_blank">
Item 02B
</a></div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<script>
$('.dropdown-accordion').on('show.bs.dropdown', function(event) {
var accordion = $(this).find($(this).data('accordion'));
accordion.find('.show').collapse('hide');
});
$('.dropdown-accordion').on('click', 'a[data-toggle="collapse"]', function(event) {
event.preventDefault();
event.stopPropagation();
$($(this).data('parent')).find('.collapse.show').collapse('hide');
$($(this).attr('href')).collapse('show');
})
</script>
According to your script, you really are just hiding the div with id='accordion'. If you want to hide them all, you have to know the nr of accordions you have, and iterate through all of them.
<script>
$('.dropdown-accordion').on('show.bs.dropdown', function(event) {
for(var i = 0; i < nrAccordions; i++)
{
var accordion = $(this).find($(this).data('accordion'+i));
accordion.find('.show').collapse('hide');
}
});
</script>
it is my first question in stackoverflow and my first code in HTML/JS. I'm using NodeJS, bootstrap, express and ejs.
I'm trying to shutdown a Raspberry PI from the navigation bar. The code is:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Foot.io</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/Rules">Rules</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/System">System</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-power-off"></i>
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" id="Reboot" href="#">Reboot</a>
<a class="dropdown-item" id="Shutdown" href="#">Shutdown</a>
</div>
</li>
</ul>
</div>
</div>
And the script tag is:
<script>
document.getElementById("Reboot").addEventListener("click", function(){console.log("rebooting...");});
document.getElementById("Shutdown").addEventListener("click", function(){console.log("shuting down...");});</script>
All of this code is included in a partial called "navigation.ejs"
I also try making a blank HTML with a simple button and it doesn't works.
I need two buttons along with the toggle button when the navbar is collapsed. As I down want these buttons to be collapsed with menu items. So I have put the buttons inside the button group with toggle button. now the toggle button is not working anymore.
Here is the code. Please let me know what mistake I'm making. Thank you in advance.
<nav class="navbar navbar-expand-md navbar-dark sticky-top" style="background-color: #0a0a0a; margin-bottom: 0 !important; min-height: 60px;">
<div class="container">
<div class="nav navbar-header">
<img src="images/logo.png" class="logo" alt=""/>
</div>
<div class="collapse navbar-collapse flex-column " id="navbar">
<ul class="navbar-nav w-100 justify-content-center px-3">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Courses
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Classes
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
USP
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Contact
</a>
</li>
</ul>
</div>
<div class="btn-group" role="group" aria-label="Basic example" style="color: white;">
<button type="button" class="btn .btn-primary-outline border-right" style="color: white;">Sigh In</button>
<button type="button" class="btn btn-danger"><i style="color: white;" class="fa fa-search" aria-hidden="true"></i></button>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</nav>
here with navbar id
<button class="navbar-toggler" data-toggle="collapse" data-target="#**navbarNav**">
Must be the same here
<div class="collapse navbar-collapse flex-column " id="**navbar**">
also don't forget to call these js on your page
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
The "data-target" on your navbar-toggler button is set to "navbarNav" this needs to be set to the ID of your navigation which is just "navbar".
<div class="collapse navbar-collapse flex-column" id="navbar"> <!-- NOTE: id="navbar" -->
<!-- Navigation List -->
</div>
<div class="btn-group">
<!-- buttons -->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
<!-- NOTE: data-target = "#navbar" (these should be identical) -->
<span class="navbar-toggler-icon"></span>
</button>
</div>
I am trying to add a navbar to this website, but for some reason it is not functioning how I thought it would. The main problem I am trying to solve is getting the dropdown menu to actually display the list. It visually looks like the menu is already expanded, but I don't know if that has anything to do with why it is not working. Currently, the collapsed version will open from the hamburger menu only because of the CSS I added. Without the CSS, that navbar will expand, but immediately collapse again. Things I have tried:
I have tried to switch the order that I include Bootstrap.js/css and jQuery, but that has no effect on it.
I have also tried to switch versions because I am not sure what is compatible with what, but that has not been successful.
The one thing that did work was using an old version of bootstrap, but I would like to use 4.0 or higher if that is possible.
I would appreciate it is someone could help me figure out why this is not working. Thanks!
.navbar-collapse.collapse.in {
display: block!important;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</body>
</html>
That's because your bootstrap.js is version 3.3.7, and this is not how you implement sub-menu (on bootstrap 3). Although, If you're using bootstrap 4 already, you should consider updating your bootstrap.js to version 4.0.0 (And you should use the same versions of bootstrap.js and bootstrap.css to avoid unexepected bugs (like you just had).
.navbar-collapse.collapse.in {
display: block!important;
}
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="jumbotron">
<h1 class="display-3">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
</body>
</html>