multi level in sidenav items

Topic: multi level in sidenav items

Oscar Bejarano pro asked 7 years ago

hi, how can i make multi levels in sidenav items?

Add comment

Mikołaj Smoleński staff answered 7 years ago

1 0 Best answer

You can try to use this code:

Instruction

Submit listing
- For bloggers
- For author

Registration form

Regards

Please insert min. 20 characters.

You can try to use this code:

<li>
 <ul class="collapsible collapsible-accordion">
 <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li>
 <ul class="collapsible collapsible-accordion">
 <li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Submit listing</a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">For bloggers</a>
 </li>
 <li><a href="#" class="waves-effect">For author</a>
 </li>
 </ul>
 </div>
 </li>
 </ul>
 </li>
 <li><a href="#" class="waves-effect">Registration form</a>
 </li>
 </ul>
 </div>
 </li>
 </ul>
 </li>

Regards

Add comment

Oscar Bejarano pro answered 7 years ago

0 0 Best answer

hi, thanks for the answer, the code that you provided me doesn't work in second level:

<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">For bloggers</a>
 </li>
 <li>
 <a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> For authors<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">Submit listing</a></li>
 <li><a href="#" class="waves-effect">Registration form</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 </li>

Please insert min. 20 characters.

hi, thanks for the answer, the code that you provided me doesn't work in second level:

<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">For bloggers</a>
 </li>
 <li>
 <a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> For authors<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">Submit listing</a></li>
 <li><a href="#" class="waves-effect">Registration form</a></li>
 </ul>
 </div>
 </li>
 </ul>
 </div>
 </li>

Add comment

Mikołaj Smoleński staff answered 7 years ago

0 0 Best answer

Hi,

You can make it by adding <div> inside <li> items, for example:
<pre class="code-toolbar language-markup"><code class=" language-markup"><div class="collapsible-body">
 <ul>
 <li><a href="#" class="waves-effect">Submit listing</a></li>
 <li><a href="#" class="waves-effect">Registration form</a></li>
 </ul>
</div>
</code></pre>
Regards

Hi,You can make it by adding

inside* items, for example: <div class="collapsible-body"> <ul> <li><a href="#" class="waves-effect">Submit listinga>li> <li><a href="#" class="waves-effect">Registration forma></li> ul> div> Regards

Please insert min. 20 characters.

Hi, You can make it by adding <div> inside <li> items, for example:

<div class="collapsible-body">
  <ul>
    <li><a href="#" class="waves-effect">Submit listing</a></li>
    <li><a href="#" class="waves-effect">Registration form</a></li>
  </ul>
</div>

Regards

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Oscar Bejarano

Pro User 22Support score
11Questions 12Answers 0Snippets