Nav DropDown 2 Niveis, quero 3 Niveis.

[marcelocardoso 6]

Pessoal!

Tenho um script que utiliza Jquery + CSS, desmontei meu exemplo atual, e fiz um pequeno exemplo para postar.
É um código q cria um menu com 2 níveis, porém, preciso de um terceiro, porém, não tenho ideia de como acrescentar um novo nível.

TIPO:

1

2

( 3 ) aqui.....

Codigo:

<style>
    nav {
        background-image: url('../images/menu_background2.png');
        /*padding-right: 25px;*/
        position: absolute;
        left: -30em;
        top: 0;
        padding-top: 100px;
        box-sizing: border-box;
        z-index: 20;
        height: 100%;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        height: auto;
        width: 310px;
    }
    
    .nav-background3 {
        background-image: url('../images/menu_background3.png');
        position: absolute;
        width: 310px;
        height: 100px;
    }
    
    nav.active {
        left: 0;
        font-family: sans-serif;
    }
    
    nav:hover {
        left: 30;
    }
    
    #nav li {
        list-style: none;
        padding-left: -30px;
    }
    /*Configura as fontes do menu - titulo*/
    
    #nav > li > a {
        display: block;
        font-size: 1.3em;
        text-decoration: none;
        color: #000000;
        font-size: 12px;
        padding-bottom: 6px;
        padding-top: 6px;
        font-weight: bolder;
        text-transform: uppercase;
        font-family: 'Roboto', serif;
        font-size: 11px;
    }
    /*Configura as fontes do menu - titulo*/
    
    #nav > li > a:hover,
    #nav > li > a.open {
        color: #000000;
    }
    
    #nav li ul {
        display: none;
        color: #ffffff;
    }
    /*Configura as fontes do menu - subtitulo*/
    
    #nav li ul li a {
        display: block;
        padding: 3px;
        text-decoration: none;
        color: #6c6c6c;
        padding: 6px;
        font-family: 'Roboto', serif;
        font-size: 10px;
        /*  font-family: 'Noto Sans', serif; font-size: 10px;*/
    }
    /*Configura as fontes do menu - subtitulo*/
    
    #nav li ul li a:hover {
        background: #b0deff;
        width: 100%;
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        color: black;
        padding: 6px;
    }
</style>

<script>
    $(document).ready(function() {
        $("#nav > li > a").on("click", function(e) {
            if ($(this).parent().has("ul")) {
                e.preventDefault();
            }

            if (!$(this).hasClass("open")) {
                // hide any open menus and remove all other classes
                $("#nav li ul").slideUp(150);
                $("#nav li a").removeClass("open");

                // open our new menu and add the open class
                $(this).next("ul").slideDown(150);
                $(this).addClass("open");
            } else if ($(this).hasClass("open")) {
                $(this).removeClass("open");
                $(this).next("ul").slideUp(150);
            }
        });
    });
</script>

<!-- MENU DE ACESSO  -->
<div id="nav-ponteiro"><i class="fa fa-bars" aria-hidden="true"></i></div>
<nav style="position: fixed;">

    <ul id="nav">
        <li>
            <a href="#" id="nav-titulo">
                <i class="fa fa-plus-square-o" aria-hidden="true"></i>    FINANCEIRO
            </a>
            <ul>

                <li style="left: -80px;">
                    <a href="#">
                        <i class="fa fa-minus-square-o" aria-hidden="true"></i>    Contas a Pagar
                    </a>
                </li>

                <li style="left: -80px;">
                    <a href="#">
                        <i class="fa fa-minus-square-o" aria-hidden="true"></i>    Tesouraria
                    </a>
                </li>

                <li style="left: -80px;">
                    <a href="#">
                        <i class="fa fa-minus-square-o" aria-hidden="true"></i>    Cobranca
                    </a>
                </li>

            </ul>
        </li>
    </ul>


    <script>
        $('#nav-ponteiro').click(function(event) {
            $('nav').toggleClass('active');
        });
    </script>

ou seja, ao clicar no item COBRANÇA, abrir um submenu, após ele, um terceiro nível.
estou pesquisando aqui tmb, mas se quiserem contribuir, agradeço.

Até...

[L. Henrique 179]

Você pode acrescentar o terceiro nível da mesma forma que o segundo é adicionado.

Exemplo:

<ul class="nivel-1">
   <li>Item 1</li>
   <li>Item 1</li>
   <li>Item 1
      <ul class="nivel-2">
          <li>Item 2</li>
          <li>Item 2</li>
          <li>Item 2
             <ul class="nivel-3">
                <li>Item 3</li>
                <li>Item 3</li>
                <li>Item 3</li>
             </ul>
          </li>
      </ul>
   </li>
</ul>

Depois é só utilizar as classes do segundo nível + script e atribuir ao terceiro nível.

Abraços!

[marcelocardoso 6]

olá henrique, havia feito isso, mas acredito q devido meu script js, deve estar acontecendo algo q não abre, consegue me dar uma luz oq ACRESCENTAR para abrir a 3 categoria....

$(document).ready(function() {
    $("#nav > li > a").on("click", function(e) {
        if ($(this).parent().has("ul")) {
            e.preventDefault();
        }

        if (!$(this).hasClass("open")) {
            // hide any open menus and remove all other classes
            $("#nav li ul").slideUp(150);
            $("#nav li a").removeClass("open");

            // open our new menu and add the open class
            $(this).next("ul").slideDown(150);
            $(this).addClass("open");
        } else if ($(this).hasClass("open")) {
            $(this).removeClass("open");
            $(this).next("ul").slideUp(150);
        }
    });
});

codigo do menu:

<!-- MENU DE ACESSO  -->
<div id="nav-ponteiro"><i class="fa fa-bars" aria-hidden="true"></i></div>
<nav style="position: fixed;">
    <% 
                       SET strMenuA = Server.CreateObject("ADODB.Recordset")
                               SQL1 = "SELECT * FROM cockpit_categoriasA"
                           strMenuA.Open SQL1, conexao, 3, 3
              DO WHILE NOT strMenuA.EOF
        %>
        <ul id="nav">
            <li>
                <a href="#" id="nav-titulo">
                    <i class="fa fa-plus-square-o" aria-hidden="true"></i>   
                    <%= strMenuA("categorias_nome") %>
                </a>



                <!--//NÍVEL 2 - SUBCATEGORIA-->
                <ul>
                    <% 
                                SET strMenuB = Server.CreateObject("ADODB.Recordset")
                                        SQL2 = "SELECT * FROM cockpit_categoriasB WHERE categorias_id = '"& strMenuA("id") &"'"
                                    strMenuB.Open SQL2, conexao, 3, 3
                       DO WHILE NOT strMenuB.EOF
                    %>
                        <li>
                            <a href="#" class="open">
                                <i class="fa fa-minus-square-o" aria-hidden="true"></i>   
                                <%= strMenuB("subcategorias_nome") %>
                            </a>


                                
                                <!--//NÍVEL 3 - SUBCATEGORIASUB-->
                                <ul  class="open" style="display: block;">
                                    <% 
                                       SET strMenuC = Server.CreateObject("ADODB.Recordset")
                                               SQL2 = "SELECT * FROM cockpit_categoriasC WHERE subcategorias_id = '"& strMenuB("categorias_id") &"'"
                                           strMenuC.Open SQL2, conexao, 3, 3
                                       DO WHILE NOT strMenuC.EOF
                                       %>
                                        <li>
                                            <a href="#">
                                                <i class="fa fa-minus-square-o" aria-hidden="true"></i>   
                                                <%= strMenuC("subcategoriassub_titulo") %>
                                            </a>
                                        </li>
                                        <%
                                        strMenuC.MOVENEXT 
                                                 LOOP
                                    %>
                                </ul>
                                <!--//NÍVEL 3 - SUBCATEGORIASUB-->



                        </li>
                        <%
                       strMenuB.MOVENEXT 
                           LOOP
                    %>
                </ul>
                <!--//NÍVEL 2 - SUBCATEGORIA-->





            </li>
        </ul>
        <%
           strMenuA.MOVENEXT
               LOOP  
       SET strMenuC = Nothing
       SET strMenuB = Nothing
       SET strMenuA = Nothing
    %>
    <div class="nav-background3"></div>
</nav>

                                
<script>
    $('#nav-ponteiro').click(function(event) {
        $('nav').toggleClass('active');
    });
</script>

<!-- MENU DE ACESSO  -->