Foros del Web » Creando para Internet » Diseño web »

Liado con slider menu y submenu

 Estas en el tema de Liado con slider menu y submenu en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/06/2015, 11:11
 
Fecha de Ingreso: julio-2010
Mensajes: 8
Antigüedad: 14 años, 4 meses
Puntos: 0
Liado con slider menu y submenu
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...
Última edición por Juanmaa; 03/06/2015 a las 11:19
  #2 (permalink)  
Antiguo 03/06/2015, 14:33
 
Fecha de Ingreso: julio-2010
Mensajes: 8
Antigüedad: 14 años, 4 meses
Puntos: 0
Respuesta: Liado con slider menu y submenu
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.

Etiquetas: html, slider, submenu, usar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:08.