Navigation menu W/ Child

  

Hi,

How can i apply html code to make a custom navigation menu with child and child inside child.

Im planning to apply below code :

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <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="#">Tutorials</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="https://www.jquery-az.com/php-tutorials/" target="_blank">PHP</a></li>
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Web <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="https://www.jquery-az.com/jquery-tips/">jQuery</a></li>
                                <li><a href="https://www.jquery-az.com/html-tutorials/">HTML</a></li>
                                <li><a href="https://www.jquery-az.com/css-tutorials/">CSS</a></li>
                                <li class="divider"></li>
                                <li>
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Bootstrap <b class="caret caret-right"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="https://www.jquery-az.com/bootstrap-carousel-5-single-multiple-horizontal-and-vertical-sliding-demos/">Carousel</a></li>
                                        <li><a href="https://www.jquery-az.com/bootstrap-tabs-with-default-and-customized-css-4-online-demos/">Bootstrap Tabs</a></li>
                                        <li><a href="https://www.jquery-az.com/bootstrap-alert-with-5-online-demos/">Alerts</a></li>
                                        <li>
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Free Themes <b class="caret caret-right"></b></a>
                                            <ul class="dropdown-menu">
                                                        <li><a href="https://www.jquery-az.com/choco-bar-free-bootstrap-landing-page-theme/">Choco bar</a></li>
                                                        <li><a href="https://www.jquery-az.com/a-free-one-page-bootstrap-website-halwa/">HALWA</a></li>
                                                    </ul>
                                         </li>
                                      </ul>
                                  </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div><!--/.nav-collapse -->
            </div>
        </div>


Thanks,

Tams

Hi Tams,

Let me make some of the translation between your html and OutSystems:

  • div - is a Container
  • ul and li - you can achieve that with a ListRecords with the property LineSeparator set to Bullets
  • To have lists inside lists, the inner list must be in a Web block
  • a - is a Link
  • The html classes, you can set them in the property Style Classes
  • Extra html attributes, you can set them in the Extended Properties of the elements

Let me know how far can you go with the above information.

Cheers,

José