how to mark active menu in Master page ?..

@Mohsin Arif,

I just tried Your code but wont work because i have used li.So i shared my code if you can to suggest ,help me out in this

Menu Design Code :

<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav flex-column">
<li class="nav-divider">
Menu
li>
<li class="nav-item ">
<a class="nav-link active" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1" aria-controls="submenu-1"><i class="fa fa-fw fa-user-circle">i>Dashboard <span class="badge badge-success">6span>a>
<div id="submenu-1" class="collapse submenu">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="Dashboard.aspx">Dashboarda>
li>
ul>
div>
li>
<li class="nav-divider">
REPORT SECTION
li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-6" aria-controls="submenu-6"><i class="fas fa-fw fa-file">i> Report Pages a>
<div id="submenu-6" class="collapse submenu">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="SummaryReport.aspx">Summary Salesa>
li>
<li class="nav-item" id="lnkItem">
<a class="nav-link" href="ItemSale.aspx">Item Salea>
li>
<li class="nav-item">
<a class="nav-link" href="TaxAnalysis.aspx"> Tax Analysis a>
li>
<li class="nav-item">
<a class="nav-link" href="TopSale.aspx">Top Sale a>
li>
<li class="nav-item">
<a class="nav-link" href="MonthlySale.aspx">Monthly Salea>
li>
<li class="nav-item">
<a class="nav-link" href="HourlySale.aspx">Hourly Sale a>
li>
<li class="nav-item">
<a class="nav-link" href="GroupSale.aspx">Group Sale a>
li>
ul>
div>
li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-7" aria-controls="submenu-7"><i class="fas fa-fw fa-inbox">i> Inventory <span class="badge badge-secondary">span>a>
<div id="submenu-7" class="collapse submenu">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="InventoryView.aspx">Inventory a>
li>
ul>
div>
li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-8" aria-controls="submenu-8"><i class="fas fa-fw fa-inbox">i> Stock Transfer <span class="badge badge-secondary">span>a>
<div id="submenu-8" class="collapse submenu">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="Stocktransfer.aspx">Stock Transfera>
li>
ul>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="StockReceiving.aspx">Stock Receivinga>
li>
ul>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="StockReport.aspx">Stock Tranfer Reportsa>
li>
ul>
div>
li>
ul>
div>

Thanks in Advance,

Karthik K

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Karthik K7y ago
@Mohsin Arif,

I just tried Your code but wont work because i have used li.So i shared my code if you can to suggest ,help me out in this

Menu Design Code :
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav flex-column">
<li class="nav-divider">
Menu
li>
<li class="nav-item ">
<a class="nav-link active" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-1" aria-controls="submenu-1"><i class="fa fa-fw fa-user-circle">i>Dashboard <span class="badge badge-success">6span>a>
<div id="submenu-1" class="collapse submenu">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="Dashboard.aspx">Dashboarda>
li>
ul>
div>
li>
<li class="nav-divider">
REPORT SECTION
li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-6" aria-controls="submenu-6"><i class="fas fa-fw fa-file">i> Report Pages a>
<div id="submenu-6" class="collapse submenu">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="SummaryReport.aspx">Summary Salesa>
li>
<li class="nav-item" id="lnkItem">
<a class="nav-link" href="ItemSale.aspx">Item Salea>
li>
<li class="nav-item">
<a class="nav-link" href="TaxAnalysis.aspx"> Tax Analysis a>
li>
<li class="nav-item">
<a class="nav-link" href="TopSale.aspx">Top Sale a>
li>
<li class="nav-item">
<a class="nav-link" href="MonthlySale.aspx">Monthly Salea>
li>
<li class="nav-item">
<a class="nav-link" href="HourlySale.aspx">Hourly Sale a>
li>
<li class="nav-item">
<a class="nav-link" href="GroupSale.aspx">Group Sale a>
li>
ul>
div>
li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-7" aria-controls="submenu-7"><i class="fas fa-fw fa-inbox">i> Inventory <span class="badge badge-secondary">span>a>
<div id="submenu-7" class="collapse submenu">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="InventoryView.aspx">Inventory a>
li>
ul>
div>
li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" aria-expanded="false" data-target="#submenu-8" aria-controls="submenu-8"><i class="fas fa-fw fa-inbox">i> Stock Transfer <span class="badge badge-secondary">span>a>
<div id="submenu-8" class="collapse submenu">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="Stocktransfer.aspx">Stock Transfera>
li>
ul>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="StockReceiving.aspx">Stock Receivinga>
li>
ul>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="StockReport.aspx">Stock Tranfer Reportsa>
li>
ul>
div>
li>
ul>
div>
Thanks in Advance,
Karthik K
0
Mohsin Arif7y ago
hi
your menu are in the form of table i think.
menu1
menu2
right so you have to add and remove class when you click
$(this).addClass('active').siblings('.active').removeClass('active');
try this ohterwise can you share youe master page html code
0