html - how to populate a nevigation bar from a data base -
i tried populate dynamic navigation bar using data base.there maintab , subtab tables.
i tried code did not work :
<nav id="bb" class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">home</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <c:if test="${not empty subtabslist}"> <c:foreach var="maintab" items="${maintabslist}"> <li><a href="#">${maintab.description}</a></li> <ul class="dropdown-menu" role="menu"> <c:foreach var="subtab" items="${subtabslist}"> <c:if test="${subtab.maintab.maitabid eq maintab.maitabid}"> <li><a href="#">${subtab.description}</a></li> </c:if> </ul> </c:foreach> </c:foreach> </c:if> </ul> </div> </div> </nav>
the sample reffering nevigation bar follows : want auto generate nevigation bar data base.but unable include <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">dropdown <span class="caret"></span></a>
in proper place.
<!-- <nav id="bb" class="navbar navbar-default"> --> <!-- <div class="container-fluid"> --> <!-- brand , toggle grouped better mobile display --> <!-- <div class="navbar-header"> --> <!-- <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> --> <!-- <span class="sr-only">toggle navigation</span> --> <!-- <span class="icon-bar"></span> --> <!-- <span class="icon-bar"></span> --> <!-- <span class="icon-bar"></span> --> <!-- </button> --> <!-- <a class="navbar-brand" href="#">brand</a> --> <!-- </div> --> <!-- collect nav links, forms, , other content toggling --> <!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> --> <!-- <ul class="nav navbar-nav"> --> <!-- <li class="active"><a href="#">link <span class="sr-only">(current)</span></a></li> --> <!-- <li><a href="#">link</a></li> --> <!-- <li class="dropdown"> --> <!-- <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">dropdown <span class="caret"></span></a> --> <!-- <ul class="dropdown-menu" role="menu"> --> <!-- <li><a href="#">action</a></li> --> <!-- <li><a href="#">another action</a></li> --> <!-- <li><a href="#">something else here</a></li> --> <!-- <li class="divider"></li> --> <!-- <li><a href="#">separated link</a></li> --> <!-- <li class="divider"></li> --> <!-- <li><a href="#">one more separated link</a></li> --> <!-- </ul> --> <!-- </li> --> <!-- </ul> --> <!-- </div>/.navbar-collapse --> <!-- </div>/.container-fluid --> <!-- </nav> -->
<nav id="bb" class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">home</a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <c:if test="${not empty subtabslist}"> <c:foreach var="maintab" items="${maintabslist}"> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">${maintab.description} <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu"> <c:foreach var="subtab" items="${subtabslist}"> <c:if test="${subtab.maintab.maitabid == maintab.maitabid}"> <li><a href="${subtab.ref}">${subtab.description}</a></li> </c:if> </c:foreach> </ul></li> </c:foreach> </c:if> </ul> </div> </div> </nav>
Comments
Post a Comment