sideNav - Mixing accordions and links

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: sideNav - Mixing accordions and links

cdenby pro asked 7 years ago

I'm having trouble with getting the side nav to appear correctly if I mix accordions with simple links. On the main MDB page, the sidenav is what I want - Some items have submenus but many are just links. But the examples in the site only show pure accordion lists. When I try to make it happen, I get improper styling on the links (incorrect font size and column and alignment). Is there an example of this somewhere? By the time the MDB Page is loaded, the engine is changing things pretty drastically from the original code, I suspect.

Bartłomiej Malanowski staff pro premium commented 7 years ago

Could you please share your code with us? That would help us a lot!

cdenby pro answered 7 years ago 

<header>
 <!-- Sidebar navigation -->
 <div id="slide-out" class="side-nav sn-bg-4 fixed mdb-sidenav" style="transform: translateX(0px);">
     <ul class="custom-scrollbar list-unstyled ps ps--theme_default" style="max-height:100vh;" data-ps-id="4e2ad490-7a74-98c1-2604-9cbbb60d17f6">
     <!-- Logo -->
     <li>
         <div class="logo-wrapper waves-light">
             <a href="#"><img src="logo.png" class="img-fluid flex-center" style="max-height: 80px;"/></a>
        </div>
     </li>
 <!--/. Logo --> 
 <!-- Side navigation links -->
 <li>
 <ul class="collapsible collapsible-accordion">
 <li>
 <a class="collapsible-header waves-effect arrow-r">
 <i class="fa fa-chevron-right"></i> Taking Stock Setup<i class="fa fa-angle-down rotate-icon"></i>
 </a>
 <div class="collapsible-body">
 <ul>
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockDates" data-functionheader="Taking Stock - Set Submission Dates">
 <i class="fa fa-calendar pl-2"></i> Dates
 </a>
 </li>
 
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockSnapshots" data-functionheader="Taking Stock - Manage Submission Snapshots">
 <i class="fa fa-camera-retro pl-2"></i> Snapshots
 </a>
 </li>
 
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageAtRiskFlags" data-functionheader=" Taking Stock - At Risk Determining Factors for the Submission">
 <i class="fa fa-list-ul pl-2"></i> At Risk Factors
 </a>
 </li>
 
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockDSBInformation" data-functionheader="Taking Stock - Manage DSB Information">
 <i class="fa fa-pencil pl-2"></i> DSB Information
 </a>
 </li>
 
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageShowHideStudentNames" data-functionheader="Show / Hide Student Names (Demo Mode)">
 <i class="fa fa-lock pl-2"></i> Show Student Names
 </a>
 </li>
 
 </ul>
 </div>
 </li>
 
 <li class="pl-4">
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock0708">
 <i class="fa fa-graduation-cap"></i> Gr. 7/8</a>
 </li>
 <li class="pl-4">
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock0910">
 <i class="fa fa-graduation-cap"></i> Gr. 9/10 At Risk</a>
 </li>
 <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock1112">
 <i class="fa fa-graduation-cap"></i> Gr. 11/12 At Risk</a>
 </li>
 <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockReEngagement">
 <i class="fa fa-child"></i> Re-Engagement</a>
 </li>
 <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockIndReEngagement">
 <i class="fa fa-child"></i> Indigenous Re-Engagement</a>
 </li>
 <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockSAL">
 <i class="fa fa-home"></i> SAL Programs</a>
 </li>
 <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockPartTime">
 <i class="fa fa-star-half-o"></i> Part-Time Students</a>
 </li>
 <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockMarkAsSignOf">
 <i class="fa fa-thumbs-o-up"></i> Mark as Signed Off</a>
 </li>
 <li class="pl-4"><a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageImpersonation">
 <i class="fa fa-user-secret"></i> Impersonation</a>
 </li>
 
 </ul>
 
 <!--/. Side navigation links -->
 </li>
 <div class="ps__scrollbar-x-rail" style="left: 0px; bottom: 0px;"><div class="ps__scrollbar-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__scrollbar-y-rail" style="top: 0px; right: 0px;"><div class="ps__scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></ul>
 <div class="sidenav-bg mask-strong"></div>
 </div>
 <!--/. Sidebar navigation -->
 <!-- Navbar -->
 <nav class="navbar navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">
 <!-- SideNav slide-out button -->
 <div class="float-left">
 <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
 </div>
 <!-- Breadcrumb-->
 <div class="breadcrumb-dn mr-auto">
 <h2 class="pl-4">Student Success / Taking Stock</h2>
 </div>
 <ul class="nav navbar-nav nav-flex-icons ml-auto">
 <li class="nav-item">
 <a class="nav-link" onclick="Signout();"><i class="fa fa-sign-out"></i> <span class="clearfix d-none d-sm-inline-block">Signout denbyc</span></a>
 </li>
 </ul>
 </nav>
 <!-- /.Navbar -->
 </header>
 <!--/.Double navigation-->
 
 <!--Main Layout-->
 <main>
 <div class="container-fluid" id="pnlMain">
 <h2>Student Success / Taking Stock Management</h2>
 <hr/>
 
 </div>
 </main>
 <!--Main Layout-->

 

cdenby pro commented 7 years ago

I've been having troubles with the top accordion acting flakey now. If I reload the page, the accordion stops responding and is locked closed. The waves effect happens but it doesn't expand. I'm thinking it may be because I have links in the accordion that don't control the accordion itself? Any ideas?

cdenby pro commented 7 years ago

Weird - when I load the page into a new tab, it usually works. Most of the times that I reload the page, it fails. Sometimes when I load the page initially, it fails. I've done a comparison of the whole DOM between initial loading and reloading and it appears that the Ps.initialize might be messing things up. When I compare the two versions of the DOM, the reload of the page has re-initialized PS and it now has a new data-ps-id. I've added a link to run siadeNav and the ps.initialize on-demand, but it's not working reliably either.

Mikołaj Smoleński staff answered 7 years ago

Hi cdenby, I've corrected Your example. Please try the following code: 
<!-- Side navigation links -->
 <li>
 <ul class="collapsible collapsible-accordion">
 <li>
 <a class="collapsible-header waves-effect arrow-r">
 <i class="fa fa-chevron-right"></i> Taking Stock Setup
 <i class="fa fa-angle-down rotate-icon"></i>
 </a>
 <div class="collapsible-body">
 <ul>
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockDates" data-functionheader="Taking Stock - Set Submission Dates">
 <i class="fa fa-calendar pl-2"></i> Dates
 </a>
 </li>

<li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockSnapshots" data-functionheader="Taking Stock - Manage Submission Snapshots">
 <i class="fa fa-camera-retro pl-2"></i> Snapshots
 </a>
 </li>

<li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageAtRiskFlags" data-functionheader=" Taking Stock - At Risk Determining Factors for the Submission">
 <i class="fa fa-list-ul pl-2"></i> At Risk Factors
 </a>
 </li>

<li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockDSBInformation" data-functionheader="Taking Stock - Manage DSB Information">
 <i class="fa fa-pencil pl-2"></i> DSB Information
 </a>
 </li>

<li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageShowHideStudentNames" data-functionheader="Show / Hide Student Names (Demo Mode)">
 <i class="fa fa-lock pl-2"></i> Show Student Names
 </a>
 </li>

</ul>
 </div>
 <ul>
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock0708">
 <i class="fa fa-graduation-cap"></i>Gr. 7/8</a>
 </li>
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock0910">
 <i class="fa fa-graduation-cap"></i>Gr. 9/10 At Risk</a>
 </li>
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStock1112">
 <i class="fa fa-graduation-cap"></i>Gr. 11/12 At Risk</a>
 </li>
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockReEngagement">
 <i class="fa fa-child"></i> Re-Engagement</a>
 </li>
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockIndReEngagement">
 <i class="fa fa-child"></i> Indigenous Re-Engagement</a>
 </li>
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockSAL">
 <i class="fa fa-home"></i> SAL Programs</a>
 </li>
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockPartTime">
 <i class="fa fa-star-half-o"></i> Part-Time Students</a>
 </li>
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageTakingStockMarkAsSignOf">
 <i class="fa fa-thumbs-o-up"></i> Mark as Signed Off</a>
 </li>
 <li>
 <a href="#" class="waves-effect" onclick="HandleSideBarLink(this);" data-function="ManageImpersonation">
 <i class="fa fa-user-secret"></i> Impersonation</a>
 </li>
 </ul>
 </li>
 </ul>
 <!--/. Side navigation links -->
 </li>
Regards

cdenby pro commented 7 years ago

OK - that works to do the clean up of the accordion and navbar appearance, except that the accordion doesn't expand. see here: https://drive.google.com/open?id=1COxNA42q9PoZ0Sxqq_3s-YVOJN1CUvdI In the production App, I've had to remove the accordion altogether because I can't have it fail.

Mikołaj Smoleński staff commented 7 years ago

In the example I sent You the accordion is working correct. Can You look for any error in Your console (F12)? Maybe Your js scripts are not imported correctly?
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
cdenby
Pro User
515Support score
56Questions 50Answers
0Snippets likes 20Snippets