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

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -