Will accept any javascript solution but best answer might be one using angular2
I am trying to create my nav bar dynamically based on a api call.
The issue is I want the parent li to have an active class if another li (child) is active.
The below code works to what I want it to do but doesn't load it dynamically
<nav>
<ul>
<li>
<a (click)="togglePatientSideSearch()"><i class="fa fa-lg fa-fw fa-search"></i> <span class="menu-item-parent">Patient Search</span></a>
</li>
<li data-nav-target="1" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: false }">
<a (click)="toggleNavMenuParentSelected(1)" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">Payroll</span>
<b class="collapse-sign">
<em class="fa fa-plus-square-o"></em>
</b>
</a>
<ul>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/payroll/summary']" title="Payroll Summary"><span class="menu-item-parent">Summary</span></a>
</li>
<li [routerLinkActive]="['active']">
<a [routerLink]="['/payroll/daily']" title="Payroll Daily"><span class="menu-item-parent">Daily</span></a>
</li>
</ul>
</li>
</nav>
The below code is what doesn't work that I am trying to fix!
<nav>
<ul *ngIf="navigationMenu">
<li *ngFor="let nav of navigationMenu; let i = index;" [attr.data-nav-target]="nav.logo && !nav.children ? null : i" [attr.routerLinkActiveOptions]="nav.logo && !nav.children ? null : { exact: false }" [attr.routerLinkActive]="nav.logo && !nav.children ? null : ['active']" >
<a *ngIf="nav.logo && !nav.children" (click)="navigationClicked(nav)"><i class="{{nav.logo}}"></i> <span class="menu-item-parent">{{nav.name}}</span></a>
<a *ngIf="nav.logo && nav.children" (click)="toggleNavMenuParentSelected(i)" title="Dashboard">
<i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">{{nav.name}}</span>
<b class="collapse-sign">
<em class="fa fa-plus-square-o"></em>
</b>
</a>
<ul *ngIf="nav.children">
<li [routerLinkActive]="['active']" *ngFor="let child of nav.children;">
<a [routerLink]="['/home']" title="Home"><span class="menu-item-parent">{{child.name}}</span></a>
</li>
</ul>
</li>
</ul>
</nav>
I am loading the whole nav bar at the same time in one object called navigationMenu. Below is what I want it to look like vs what it is when dynamically loaded! (ignore different names)
You can use:
[routerLinkActiveOptions]="{ exact: true }"
with your:
routerLinkActive="active"
I found the solution that worked for me here:
https://github.com/angular/angular/issues/8397
Related
I am facing problem while setting active class on nav item.
Here is my code on template
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a href="{{ url('/dashboard') }}" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/dashboard/logo') }}" class="nav-link">
<i class="nav-icon fab fa-bandcamp"></i>
<p>
Add/Change Logo
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-image"></i>
<p>
Banner
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ url('/dashboard/banner') }}" class="nav-link">
<i class="nav-icon fas fa-plus"></i>
<p>Add Banner</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('/dashboard/banner/edit')}}" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>Edit Banner</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
I tried
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var url = window.location;
$('ul.nav li.nav-item a[href="' + url + '"]').parent().addClass('active');
$('ul.nav li.nav-item a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
});
</script>
But this code setting the "active" class on list tag but not in anchor tag.
Instead of using .parent(), try using .closest('a').
closest() will traverse UP the DOM tree until it finds the specified selector - in the above example, the first <a> tag above the element.
Virtually all of your .parent() can be replaced with .closest() - but use as desired. There is no "right" or "wrong", just what works or is easiest for you.
You can use any normal css/jQuery selector with closest() - from a tagName:
.closest('a')
to a className:
.closest('a.nav-item')
etc.
Reference:
https://api.jquery.com/closest/
I have installed AminLte v3 using npm in my Laravel + vue project ad evrything is working great but when i click on the Side navbar main menu which is tagged as
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Members
<i class="fas fa-angle-left right"></i>
<span class="badge badge-warning right">new:2</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link :to="{name : 'members'}" class="nav-link">
<i class="fas fa-user-check nav-icon"></i>
<p>All</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersLatest'}" class="nav-link">
<i class="fas fa-user-plus nav-icon"></i>
<span class="badge badge-danger right">2</span>
<p>Latest</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersPending'}" class="nav-link">
<i class="fas fa-user-clock nav-icon"></i>
<p>Pending</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersSuspended'}" class="nav-link">
<i class="fas fa-user-lock"></i>
<span class="badge badge-danger right">2</span>
<p>Suspended</p>
</router-link>
</li>
</ul>
</li>
It is redirecting me to # router path which is coming from
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Members
<i class="fas fa-angle-left right"></i>
<span class="badge badge-warning right">new:2</span>
</p>
</a>
This part and it is not opening sub-menus inside the main-menu and I am including the navBar from a another vue component.
Can anybody give an idea how am I going to solve this?
When you are hitting on another route instead of admitlte routes, the treeview selector is unable to find the element. When you push the url to redirect into adminlte , the treeview won't work because the selector is defined before element mounted.
To fix this problem define a mounted hook in the sidebar component.
mounted(){
$('[data-widget="treeview"]').Treeview('init');
}
in the bootstrap.js file put require('admin-lte') below
require('bootstrap')
I am trying to make a responsive web app with a side menu that hide and shows via a button when the screen is small. However, I am finding that when the menu shows, it shows "behind" my main component (As shown in the images below). I am using angular 2 with with with some javascript/css from responsive website code
My main app.component.html looks like
<header class="header clearfix">
<button type="button" id="toggleMenu" class="toggle_menu">
<i class="fa fa-bars"></i>
</button>
<h1>Timesheet</h1>
</header>
<nav class="vertical_nav">
<ul id="js-menu" class="menu">
<li class="menu--item">
<a [routerLink]="['/a']" class="menu--link" title="a">
<i class="menu--icon fa fa-fw fa-user"></i>
<span class="menu--label">a</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/b']" class="menu--link" title="b">
<i class="menu--icon fa fa-fw fa-briefcase"></i>
<span class="menu--label">b</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/c']" class="menu--link" title="c">
<i class="menu--icon fa fa-fw fa-cog"></i>
<span class="menu--label">c</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/d']" class="menu--link" title="d">
<i class="menu--icon fa fa-fw fa-database"></i>
<span class="menu--label">d</span>
</a>
</li>
<li class="menu--item">
<a [routerLink]="['/e-csv']" class="menu--link" title="e">
<i class="menu--icon fa fa-fw fa-globe"></i>
<span class="menu--label">e</span>
</a>
</li>
</ul>
</nav>
<div class="wrapper">
<section>
<router-outlet></router-outlet>
</section>
</div>
Just add a CSS style, or do it inline.
CSS
nav.vertical_nav {
z-index: 9;
}
Inline
<nav class="vertical_nav" style="z-index: 9;">
Bootstrap navbar Active State is not working.
I have bootstrap v3.
I use the class="active" on mynavbar on its submenu when I collapse none work.
Here is my code with js/css/bootstrap files I have included:
<li class="active">
<a href="javascript:;" data-toggle="collapse" data-target="#demoadmin">
<i class="fa fa-fw fa-wrench"></i>Administrator Menu <i class="fa fa-fw fa-caret-down"></i>
</a>
<ul id="demoadmin" class="collapse in">
<li class="active">
Links Editor
</li>
<li>
News Editor
</li>
<li>
Main Category Editor
</li>
<li>
Sub Category Editor
</li>
<li>
Profile Team Editor
</li>
</ul>
</li>
You didn't show us enough HTML to see exactly what you are doing wrong, but it looks like you're trying to get the active class to work on a bootstrap dropdown-menu.
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-wrench"></i>Administrator Menu <i class="fa fa-fw fa-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li class="active">
Links Editor
</li>
<li>
News Editor
</li>
<li>
Main Category Editor
</li>
<li>
Sub Category Editor
</li>
<li>
Profile Team Editor
</li>
</ul>
</li>
DEMO
Try this
$(document).ready(function(){
$(".active").removeClass("active");
$(".dropdown-menu li").addClass("active");
});
I have an unordered list with various tab items:
<nav class="navigation-area">
<ul>
<li>
<a href="#home"><i class="fa fa-home"></i>
Home</a>
</li>
<li>
<i class="fa fa-pencil"></i>Blog
</li>
<li>
<a href="#profile"><i class="fa fa-user"></i>
Profile</a>
</li>
<li>
<a href="#portfolio"><i class=
"fa fa-briefcase"></i> Portfolio</a>
</li>
<li>
<a href="#resume"><i class=
"fa fa-file-text"></i> Resume</a>
</li>
<li>
<a href="#contact"><i class=
"fa fa-envelope"></i> Contact</a>
</li>
</ul>
</nav>
I am trying to get the "Blog" element to link to a site instead of be used as a tab. however the easytabs is breaking the page as it is unable to find the referenced element in the code. How can I skip including this element in the easy tabs? The way I am initializing easytabs is like so:
$('#tab-container').easytabs({
updateHash: false
});
http://jsfiddle.net/6dqc6r4j/1/
the element LI in which is url change in SPAN tag
<span>
<i class="fa fa-pencil"></i>Blog
</span>