Tutorial: Agregar un submenu flotante o solapa en la parte del navbar

M

martinssj4

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 21 Ene 2012

• #1

​

Bueno este tutorial se lo dedico a todos aquellos usuarios que como yo, se hallaban desesperados por informarse sobre como crear esto y no tuvieron una respuesta coherente, tanto aqui como en otras webs.

Despues de navegar y ver como funciona esto lo pude hacer funcionar en mi web de manera facil y rapida.


Antes de empezar voy a recordarles que esto funciona con el vbulletin 4x, yo uso vbulletin 4.1.5.


Es muy simple.

Primero: Vamos al AdminCP>Buscar dentro de plantillas> y ahi buscan "Navbar"

Segudo: Abrimos la plantilla Navbar y vamos a buscar esta linea de codigo:

PHP:

{vb:raw template_hook.navbar_end}

Debajo de esa linea de codigo ponemos esto:

PHP:

<li class="popupmenu"> <a href="javascript://" class="popupctrl navtab" accesskey="6">Eventos</a> <ul class="popupbody popuphover"> <li></li>           <li><a href="#">editame</a></li>           <li><a href="#">editame</a></li>           <li><a href="#">EDITAME</a></li>

En donde dice "accesskey="6">aca ponen el nombre del submenu</a>

Ejemplo:

Si tu foro es www.myforo.com y queres agregar una seccion de premios de tal modo que los dirija a esta direccion "www.myforo.com/premios.php" en el sub menu ponen asi:

PHP:

<li class="popupmenu"> <a href="javascript://" class="popupctrl navtab" accesskey="6">Nombre del submenu</a> <ul class="popupbody popuphover"> <li></li>
<li><a href="">/premios.php</a>Seccion de premios</li>           <li><a href="#">EDITAME</a></li>
          </ul>

Guardan y listo.

 

U

usuyusu

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 22 Ene 2012

• #2

Muchas gracias por el tuto 🙂

 

M

martinssj4

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 22 Ene 2012

• #3

Disculpen, olvide agregar un detalle, ahora esta correcto el tutorial.

 

I

imported_isispe

Gamma

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 24 Ene 2012

• #4

muchas gracias esto sirve para 4.1.7??

 

M

martinssj4

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 24 Ene 2012

• #5

isispe dijo:

muchas gracias esto sirve para 4.1.7??

Hacer clic para expandir...

no conozco esa version, pero supongo que si, fijate.

 

I

imported_isispe

Gamma

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 25 Ene 2012

• #6

Gracias cuando tenga un tiempo probare que tal :$

 

C

Cesarionis

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 1 Feb 2012

• #7

¿Se puede añadir un submenu al submenu?

 

M

martinssj4

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 2 Feb 2012

• #8

no comprendo tu pregunta

 

C

Cesarionis

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 2 Feb 2012

• #9

martinssj4 dijo:

no comprendo tu pregunta

Hacer clic para expandir...

Cuando se despliega el submenu aparecen varias opciones para seleccionar. Lo que yo quiero es que cuando pase por encima de una de ellas se abra otro submenu paralelo a este donde se muestren mas opciones.

 

C

carlosa789

• 6 Feb 2012

• #10

Gracias por mostrar una gran preocupación por todos nosotros.

--
Carlos Almanzar
CEO de camisas hombre

 

M

martinssj4

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 6 Feb 2012

• #11

Cesarionis dijo:

Cuando se despliega el submenu aparecen varias opciones para seleccionar. Lo que yo quiero es que cuando pase por encima de una de ellas se abra otro submenu paralelo a este donde se muestren mas opciones.

Hacer clic para expandir...

ahh eso tenes que hablar con un diseñador porque es poco comun en websites eso que decis.

 

I

imported_luigi

Curioso

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 9 Mar 2012

• #12

martinssj4 dijo:

......

Primero: Vamos al AdminCP>Buscar dentro de plantillas> y ahi buscan "Navbar"

Segudo: Abrimos la plantilla Navbar y vamos a buscar esta linea de codigo:

PHP:

{vb:raw template_hook.navbar_end}

Debajo de esa linea de codigo ponemos esto:

PHP:

<li class="popupmenu"> <a href="javascript://" class="popupctrl navtab" accesskey="6">Eventos</a> <ul class="popupbody popuphover"> <li></li>           <li><a href="#">editame</a></li>           <li><a href="#">editame</a></li>           <li><a href="#">EDITAME</a></li>

En donde dice "accesskey="6">aca ponen el nombre del submenu</a>

Ejemplo:

Si tu foro es www.myforo.com y queres agregar una seccion de premios de tal modo que los dirija a esta direccion "www.myforo.com/premios.php" en el sub menu ponen asi:

PHP:

<li class="popupmenu"> <a href="javascript://" class="popupctrl navtab" accesskey="6">Nombre del submenu</a> <ul class="popupbody popuphover"> <li></li>
<li><a href="">/premios.php</a>Seccion de premios</li>           <li><a href="#">EDITAME</a></li>
          </ul>

.....

Hacer clic para expandir...

El código de este tutorial es necesario arreglarlo un poco ya que no es correcto y no trabajará de forma eficiente o idónea. No está escrito correctamente y falta el cierre de algunas etiquetas.
Se corrigen los códigos, basados en el ejemplo.

PHP:

    <li class="popupmenu">
        <a href="javascript://" class="popupctrl" accesskey="6">Eventos</a>
        <ul class="popupbody popuphover">          
            <li><a href="#">Editame</a></li>
        </ul>
    </li>

PHP:

    <li class="popupmenu">
        <a href="javascript://" class="popupctrl" accesskey="6">Nombre del submenu</a>
        <ul class="popupbody popuphover">
            <li><a href="premios.php">Seccion de premios</a></li>           
            <li><a href="#">Editame</a></li>
            <li><a href="#">Editame 2</a></li>
        </ul>
    </li>

Ojo el código no está probado, simplemente se ha limpiado y corregido.

 

M

martinssj4

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 12 Mar 2012

• #13

yo copie el codigo tal y como lo tengo en mi web y anda bien, pero esta bueno que me lo hayas corregido si habia algo mal, gracias 😀

 

I

imported_luigi

Curioso

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 12 Mar 2012

• #14

Has probado el corregido o comparado?

 

M

martinssj4

Beta

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 13 Mar 2012

• #15

luigi dijo:

Has probado el corregido o comparado?

Hacer clic para expandir...

Como dije.. me anda bien el codigo que puse primero, asi que ni me molesto en editarlo j3j3

 

J

juit

Curioso

¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!

• 18 Mar 2012

• #16

yo no pude 🙁 teng la ver mas reciente