Liado con slider menu y submenu

Juanmaa · #1 (**permalink**) 03/06/2015, 11:11

Hola Gente...
Siempre gracias a muchos post de este foro he logrado resolver muchas dudas o problemas sin contar que he aprendido mogollon.

Os cuento que estoy haciendo una web de mi impresa ya que la que teniamos era fea fea... y arranco desde un boostrap plantilla (biztrap) elejí ese template ya que me parecio muy facil editar y ajustar a las necesidades de mi web.

Con la chorrada que estoy trabado y no logro resolverlo:

Si veis la web http://onsiteit.es/quienes_somos.html tiene el slider menu
About Us

Quienes Somos
Equipo
Colabora con Nosotros

Esa misma pagina base la usaré para productos pero necesitaría hacer que quede:

MENU1
< SUB MENU 1.1
< SUB MENU 1.2
<SUB MENU 1.3
<< SUBMENU1.3.1
<<SUBMENU1.3.2
< SUB MENU 1.4
< SUB MENU 1.5
< SUB MENU 1.6
< SUB MENU 1.7
< SUB MENU 18
MENU 2
< SUB MENU 2.1
< SUB MENU 2.2
< SUB MENU 2.3
< SUB MENU 2.4
< SUB MENU 2.5
MENU3
< SUB MENU 3.1
< SUB MENU 3.2
< SUB MENU 3.3
< SUB MENU 3.4
< SUB MENU 3.5
< SUB MENU 3.6
< SUB MENU 3.7
ETCETC

La idea es que esté solamente activo el menu con submenu activo y los demas submenus cerrados hasta entrar en la categoria...
Os pongo el codigo que tengo para ese menu que hay en la web:

Código HTML:

<div class="side-nav sidebar-block">
                                    <h2>Productos HW</h2>
                                    <ul>                                            
                                        <li class="active"><a href="sect_hosteleria.html">Terminles TPV</a></li>
                                        <li><a href="sect_retail.html">Retail</a></li>
                                        <li><a href="sect_hoteles.html">Hoteles</a></li>
                                            <li><a href="sect_grandessuperficies.html">Grandes Superficies</a></li>
                                            <li><a href="sect_fastfood.html">Fast Foods</a></li>
                                            <li><a href="sect_events.html">Eventos</a></li>
                                            <li><a href="sect_autoventa.html">Autoventa</a></li>
                                            <li><a href="sect_kioscos.html">Kioscos</a></li>
                                            <li><a href="sect_mktdinamico.html">Cartelería Digital</a></li>
                                            
                                    </ul>
                                </div>

Si podeis echarme una mano realmente estaría muy agradecido.
Cualquier otro dato que necesiteis... avisar...
Saludos y gracias por adelantado.

PS/// joba... acabo de ver que llevo casi 5 años registrado... pos mucho me habeis ayudado en estos 5 años...

Juanmaa · #2 (**permalink**) 03/06/2015, 14:33

Hello Again...

Bueno os cuento que logre con un código de una libreria mas o menos lo que quiero...

Código HTML:

 <h2>Productos HW</h2>
                             <div class="container">
                              
    <div class="row">
        <div class="col-sm-3 col-md-3">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title"> 
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-folder-close">
                            </span>Equipos TPV</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                      <div class="panel-body">
                        <table class="table">
                          <tr>
                            <td><span class="glyphicon glyphicon-pencil text-primary"></span><a href="http://www.jquery2dotnet.com">PosBANK</a></td>
                            
                          </tr>
                          <tr>
                            <td><span class="glyphicon glyphicon-flash text-success"></span><a href="http://www.jquery2dotnet.com">IGC</a></td>
                          </tr>
                          <tr>
                            <td><span class="glyphicon glyphicon-file text-info"></span><a href="http://www.jquery2dotnet.com">PosLAB</a></td>
                          </tr>
                          <tr>
                            <td><span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">Posiflex</a></td>
                          </tr>
                           <tr>
                            <td><span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">SINOCAN</a> </td>
                          </tr>
                           <tr>
                            <td><span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">IBM-TOSHIBA</a> </td>
                          </tr>
                           <tr>
                            <td><span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">OKI</a></td>
                          </tr>
                           <tr>
                            <td><span class="glyphicon glyphicon-comment text-success"></span><a href="http://www.jquery2dotnet.com">ONPOS</a></td>
                          </tr>
                        </table>
                      </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><span class="glyphicon glyphicon-th">
                            </span>Modules</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Orders</a> <span class="label label-success">$ 320</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Invoices</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Shipments</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Tex</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><span class="glyphicon glyphicon-user">
                            </span>Account</a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Change Password</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Notifications</a> <span class="label label-info">5</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <a href="http://www.jquery2dotnet.com">Import/Export</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-trash text-danger"></span><a href="http://www.jquery2dotnet.com" class="text-danger">
                                            Delete Account</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><span class="glyphicon glyphicon-file">
                            </span>Reports</a>
                        </h4>
                    </div>
                    <div id="collapseFour" class="panel-collapse collapse">
                        <div class="panel-body">
                            <table class="table">
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-usd"></span><a href="http://www.jquery2dotnet.com">Sales</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-user"></span><a href="http://www.jquery2dotnet.com">Customers</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-tasks"></span><a href="http://www.jquery2dotnet.com">Products</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <span class="glyphicon glyphicon-shopping-cart"></span><a href="http://www.jquery2dotnet.com">Shopping Cart</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>

La idea mas o menos es esa... podeis verlo funcionar aqui: EJEMPLO[URL="http://onpos.es/product_item.html"]http://onpos.es/product_item.html[/URL]

Las pegas... Necesito un submenu mas... osea... un sub-submenu...

A esto hay que sumarle que cuando cambio de MENU1 la MENU2, el MENU2 se abre bien pero el MENU1 no se cierra... La idea es que solo haya una sola seccion activa... lo mismo en el caso de que hubiera un subsubmenu... si cambio de submenu que se contraiga el otro submenu.