I have a collapse class applied on navbar but it is not working well. The button gets clicked but menu is not displayed.
Following is the code for the complete navbar:
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#"><span class="glyphicon glyphicon-fire"></span>Responsive Design</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="#" style="text-decoration:none;">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" style="text-decoration:none;">Link</a>
</li>
<li class="nav-item dropdown">
<a style="text-decoration:none;" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
<li><a class="dropdown-item" href="#">Web Design</a></li>
<li><a class="dropdown-item" href="#">IOS Development</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">SEO</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="navbar-form navbar-right d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
Bootstrap 5 contains data-bs-toggle instead of data-toggle.
Related
I am working with Angular8 and want to use Bootstrap4 navbar.
But Dropdown-Menu not working
Here is Angular.json code
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
Here is my navbar.component.html code
<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="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
Here is my output in Browser
Anything am I missing ?
Change your navbar.component.html to this:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown" [class.show]="navbarOpen">
<a class="nav-link dropdown-toggle" (click)="toggleNavbar()">
Dropdown Menu
</a>
<div class="dropdown-menu" [class.show]="navbarOpen" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
And in your navbar.component.ts write above the constructor:
public navbarOpen: boolean = false;
and under your constructor write:
public toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}
Please NEVER use jQuery in Angular2+ Projects.
1. You don't need it
2. In my opinion it would be anti-pattern
If you do it like that, it should work. Give me some feedback whether it helped you.
enter image description here and check it
This code works fine
import {
Directive,
ElementRef,
HostBinding,
HostListener,
, Renderer2
} from '#angular/core';
#Directive({
selector: '[appToggleMenu]'
})
export class ToggleMenuDirective {
#HostBinding('class.show') isToggle: boolean = false;
constructor(
private el: ElementRef,
private render: Renderer2
) { }
#HostListener('click') toggleClick() {
this.isToggle = !this.isToggle;
const ui = this.el.nativeElement.querySelector('.dropdown-menu');
if (ui) {
if (this.isToggle) {
this.render.addClass(ui, 'show')
} else {
this.render.removeClass(ui, 'show');
}
}
}
}
html:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid ">
<a class="navbar-brand" href="#">Navbar</a>
<div>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav" appToggleMenu>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" role="button">
Dropdown link
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
I want to create nav-bar under nested Dropdowns in Aurelia using Materialize.I tried very much.
<span repeat.for="item of menuItems">
<ul id="${item.target}" data-beloworigin="true" class='dropdown-content nested' if.bind="item.type==3" role="menu">
<li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class.bind="item.class"role="button" aria-haspopup="true" aria-expanded="false" href='#' data-target="${item.target}" data-hover="hover" data-alignment="left" > Secondary ${item.label}
<span class="caret"></span>
</a>
<a if.bind="item.type==0" href.bind="item.url"> ${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</li>
</ul>
<ul if.bind="item.type==3" id="${item.target}" class='dropdown-content' >
<li repeat.for="item of item.items" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" role="button" aria-haspopup="true" aria-expanded="false"> ${item.label}
<span class="caret"></span>
</a>
<a if.bind="item.type==0" href.bind="item.url" > Third ${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</li>
</ul>
</span>
<nav class="navbar-default d-flex align-items-center">
<div class="nav-wrapper">
<ul class="right hide-on-med-and-down" >
<li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class='dropdown-button btn' beloworigin="true" data-target="${item.target}" role="button"
aria-haspopup="true" aria-expanded="false" >${item.label}
</a>
</li>
</ul>
</div>
</nav>
menuItems is getting menus from Menu.ts file.
Type 3 is using for Parents Menu
Type 0 is menus which will be executed to URL by click dropdown Menu
I want when this code run then menu bar should create in which I click on the dropdown then related sub-menu should be open.
After Some modification My code is working now.
<span repeat.for="item of menuItems">
<ul id="${item.target}" class='dropdown-content' if.bind="item.type==3" class.bind="item.class">
<li repeat.for="item of item.items" class.bind="item.class">
<a if.bind="item.type==3" href="#" class='dropdown-button' data-hover="hover" data-alignment="left"
data-target="${item.target}" href='#'> Secondary ${item.label}
<a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</a>
<ul id="${item.target}" class='dropdown-content' class.bind="item.class">
<li repeat.for="item of item.items" class.bind="item.class">
<a if.bind="item.type==0" href.bind="item.url">${item.label}</a>
<a if.bind="item.type==1" href="#" click.delegate="menu(item.param)"> ${item.label}</a>
</a>
</li>
</ul>
</li>
</ul>
</span>
<nav class="navbar-default row mb-0 d-flex align-items-center">
<div class="nav-wrapper col s12">
<i class="icon icon-propriete"></i>
<ul class="right hide-on-med-and-down">
<li repeat.for="item of menuItems" class.bind="item.class" role.bind="item.role">
<a if.bind="item.type==3" href="#" class="dropdown-trigger" data-target="${item.target}">${item.label}
</a>
</li>
</ul>
</div>
</nav>
I am new to mean stack. I have used a template for nav bar from https://frontendfunn.com/bootstrap-4/admin-dashboard-template-development-tutorial/. Whenever I log in it takes me to the page with nav bar but the problem is when I click collapse bar nothing happens. When I refresh the page it works but clicking on another option in the sidebar, collapse bar option doesn't work. Please help me out.
Screenshot of navigation bar
login.component.ts:
ngOnInit() {
if (this.loginService.isLoggedIn()) {
this.router.navigateByUrl('/addcandidates');
}
}
onSubmit(form: NgForm) {
this.loginService.login(form.value).subscribe(
res => {
// tslint:disable-next-line:no-string-literal
this.loginService.setToken(res['token']);
// this.successful = 'Successfully logged in';
this.router.navigate(['addcandidates']);
},
err => {
this.serverErrorMessages = err.error.message;
}
);
}
main.component.ts:
ngOnInit() {
this.isLoggedIn = this.loginService.isLoggedIn;
}
onLogout() {
this.loginService.deleteToken();
this.router.navigate(['/login']);
}
main.component.html:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler sideMenuToggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<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 ml-auto">
<a class="nav-link px-2" (click)="onLogout()">
<span class="text">Logout</span>
</a>
<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">DropDown</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>
</ul>
</div>
</nav>
<div class="wrapper d-flex">
<div class="sideMenu bg-mattBlackLight">
<div class="sidebar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/']">
<i class="material-icons icon">dashboard</i>
<span class="text">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/addcandidates']">
<i class="material-icons icon">person</i>
<span class="text">Create New Test</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/qb_dept']">
<i class="material-icons icon">insert_chart</i>
<span class="text">Add Question Bank</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/currentexam']">
<i class="material-icons icon">insert_chart</i>
<span class="text">Current Tests</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2" [routerLink]="['/previousexam']">
<i class="material-icons icon">settings</i>
<span class="text">Previous Tests</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link px-2 sideMenuToggler">
<i class="material-icons icon expandView ">view_list</i>
<span class="text">Collapse Side Bar</span>
</a>
</li>
</ul>
</div>
</div>
</div>
I am not sure how is this happening. On my landing page, I've got a simple statement that returns the user information by using the method "Auth::user()" and alas, it works.
Nevertheless, when applying a layout to my file, I get the "Trying to get property of non-object" exception. I've been playing with it a little then I made it so I can keep the session, but after reloading or moving to another page (which use the same layout, by the way), the session immediately closes itself.
What could be the issue behind this behaviour?
Update: I've found the problem. It seems to be this layout in particular which sets a navbar; it has an iframe that I thought was the problem, but when removing the iframe content (which is inside a modal, that I remove as well), the error keeps hapening - It closes the user's session and throws the exception.
#yield('nav')
<nav class="navbar navbar-dark bg-dark navbar-expand-lg sticky-top">
<a class="navbar-brand" href="/">Printed</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="#">Conóce</a>
</li>
<li class="nav-item">
<a class="nav-link" href="" data-toggle="modal" data-target="#contacto">Contacto</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">
Catálogo
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/productos">Productos</a>
<a class="dropdown-item" href="/servicios">Servicios</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Promociones</a>
</div>
</li>
<li class="nav-item">
Portafolio de Proyectos
</li>
</ul>
#if(Auth::check() == false)
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Ingresar</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="{{route('login')}}">Iniciar Sesión</a>
<a class="dropdown-item" href="{{route('register')}}">Registrarse</a>
</div>
</li>
#endif
#if(Auth::check())
<li class="nav-item">
Hello, {{Auth::user()->email}} !
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Opciones</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="">Panel de Usuario</a>
<a class="dropdown-item" href="{{Auth::logout()}}">Cerrar Sesión</a>
</div>
</li>
#endif
</div>
</nav>
Edit: Good news, I've discovered my issue. It seems to be this part in particular that somehow "triggers" itself. Could it be that I'm missing a closure on the tags somewhere?
<a class="dropdown-item" href="{{Auth::logout()}}">Cerrar Sesión</a>
I'd like to make a split button dropdown with Bootstrap 3. I didn't find any working snippet.
My navbar looks like:
<header class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
Example
</li>
<li>
Example
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</header>
You can place it inside the nav li and add navbar-btn to the btn-group..
<li>
<div class="btn-group navbar-btn">
<button class="btn btn-danger">Action</button>
<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</li>
Demo: http://bootply.com/100070