[Plugin] Añadir Menu con submenus en el Navbar con varios niveles

**OLMID** · 27/04/2012 12:37

Hola compañeros

Os dejo un plugin muy facil de instalar, lo encontré navegando y lo he modificado para que tenga submenús, un Menú (popup) en el Navbar con varios niveles, muy fácil de instalar y modificar a nuestro gusto, está probado en vb 4.1.11

Imagen de 2 niveles
desplegable.jpg

Imagen 3 niveles
desplegable_3.jpg

Instalación:

1.- Entramos en el panel de admin y pulsamos en Plugins y productos/Agregar nuevo plugin

Producto: vbulletin
Ubicación de enganche: process_templates_complete
Título: el que queráis
Orden de ejecución: 5
Código PHP de Plugin (para 1 nivel):

Código PHP:


$template_hook['navbar_end'] .= ' 

$template_hook['navbar_end'] .= ' 

<li class="popupmenu">

<a href="javascript://" class="popupctrl">Menus</a> 



    <ul class="popupbody popuphover">

    <li><a href="ENLACE SUBMENU 2.1" target="_blank">SUBMENU 2.1</a></li> 

    <li><a href="ENLACE SUBMENU 2.2" target="_blank">SUBMENU 2.2</a></li>

    <li><a href="ENLACE SUBMENU 2.3" target="_blank">SUBMENU 2.3</a></li>

    <li><a href="ENLACE SUBMENU 2.4" target="_blank">SUBMENU 2.4</a></li>

    </ul>';

Código PHP de Plugin (para 2 niveles):

Código PHP:


$template_hook['navbar_end'] .= ' 

<li class="popupmenu">

<a href="javascript://" class="popupctrl">Menus</a> 

 <ul class="popupbody popuphover">



   <li class="navbarList_li_1"><img src="/images/misc/black_right_arrow.png" style="float:right;"><a>MENU 1</a>

<span class="submenu_1">

    <ul class="popupbody popuphover">

    <li><a href="ENLACE SUBMENU 1.1" target="_blank">SUBMENU 1.1</a></li>

    <li><a href="ENLACE SUBMENU 1.2" target="_blank">SUBMENU 1.2</a></li>

    <li><a href="ENLACE SUBMENU 1.3" target="_blank">SUBMENU 1.3</a></li>

    <li><a href="ENLACE SUBMENU 1.4" target="_blank">SUBMENU 1.4</a></li>

    </ul>

</span>

   </li> 



   <li class="navbarList_li_1"><img src="/images/misc/black_right_arrow.png" style="float:right;"><a>MENU 2</a>

<span class="submenu_1">

    <ul class="popupbody popuphover">

    <li><a href="ENLACE SUBMENU 2.1" target="_blank">SUBMENU 2.1</a></li> 

    <li><a href="ENLACE SUBMENU 2.2" target="_blank">SUBMENU 2.2</a></li>

    <li><a href="ENLACE SUBMENU 2.3" target="_blank">SUBMENU 2.3</a></li>

    <li><a href="ENLACE SUBMENU 2.4" target="_blank">SUBMENU 2.4</a></li>

    </ul>

</span>

   </li>

    </ul>';

Código PHP de Plugin (para 3 niveles):

Código PHP:


$template_hook['navbar_end'] .= ' 

<li class="popupmenu">

<a href="javascript://" class="popupctrl">Menus</a> 

 <ul class="popupbody popuphover">



   <li class="navbarList_li_1"><img src="/images/misc/black_right_arrow.png" style="float:right;"><a>MENU 1</a>

    <span class="submenu_1">

    <ul class="popupbody popuphover">

    <li><a href="ENLACE SUBMENU 1.1" target="_blank">SUBMENU 1.1</a></li>

    <li><a href="ENLACE SUBMENU 1.2" target="_blank">SUBMENU 1.2</a></li>

    <li><a href="ENLACE SUBMENU 1.3" target="_blank">SUBMENU 1.3</a></li>

    <li><a href="ENLACE SUBMENU 1.4" target="_blank">SUBMENU 1.4</a></li>

    </ul>

    </span>

    </li> 



    <li class="navbarList_li_1"><img src="/images/misc/black_right_arrow.png" style="float:right;"><a>MENU 2</a>

    <span class="submenu_1">

    <ul class="popupbody popuphover"> 

    <li><a href="ENLACE SUBMENU 2.2" target="_blank">SUBMENU 2.2</a></li>

    <li><a href="ENLACE SUBMENU 2.3" target="_blank">SUBMENU 2.3</a></li>

    <li><a href="ENLACE SUBMENU 2.4" target="_blank">SUBMENU 2.4</a></li>

    <li class="navbarList_li_2"><img src="/images/misc/black_right_arrow.png" style="float:right;"><a>SUBMENU 2.1</a>

       <span class="submenu_2">

       <ul class="popupbody popuphover">

       <li><a href="ENLACE SUBMENU 2.1.1" target="_blank">SUBMENU 2.1.1</a></li>

       <li><a href="ENLACE SUBMENU 2.1.2" target="_blank">SUBMENU 2.1.2</a></li>

       <li><a href="ENLACE SUBMENU 2.1.3" target="_blank">SUBMENU 2.1.3</a></li>

       <li><a href="ENLACE SUBMENU 2.1.4" target="_blank">SUBMENU 2.1.4</a></li>

       </ul>

       </span1> 

    </li>

    </ul>

    </span>

   </li>

 </ul>';

Como véis es muy sencillo añadir niveles

2.- (Solo para 2 o más niveles). Buscamos la plantilla Additional.css y agregamos esto:

Para 2 niveles:

Código PHP:


.navbarList_li_1 .submenu_1 {display:none;}

.navbarList_li_1:hover .submenu_1 {display:block; position:absolute; top:-30px; left:200px;}

Para 3 niveles:

Código PHP:


.navbarList_li_1 .submenu_1 {display:none;}

.navbarList_li_1:hover .submenu_1 {display:block; position:absolute; top:-30px; left:200px;}

.navbarList_li_2 .submenu_2 {display:none;}

.navbarList_li_2:hover .submenu_2 {display:block; position:absolute; top:-30px; left:200px;}

Si añadimos otro nivel, también tenemos que añadir dos lineas más en Additional.css con sus distintas clases

3.- Subimos la imagen de la flechita a images/misc

black_right_arrow.png

Detalles para colocar el menú en el sitio deseado:

$template_hook['navbar_end'] --> Lo colocará al final de todos
$template_hook['navbar_start'] --> Lo colocará al principio
$template_hook['navbar_after_getnew'] --> Lo colocará después de Nuevos mensajes
$template_hook['navbar_after_pm'] --> Lo colocará después de Mensajes privados
$template_hook['navbar_after_faq'] --> Lo colocará después de Ayuda
$template_hook['navbar_after_calendar'] --> Lo colocará después de Calendario
$template_hook['navbar_after_community'] --> Lo colocará después de Comunidad

Espero que os sea de utilidad

Un saludo

**OLMID** · 29/04/2012 13:53

He seguido trabajando en él y he añadido más niveles

saludos

**ZEL** · 29/04/2012 23:14

Exelente muy bien gracias gente como tu hace falta en este foro

**vBLuis** · 30/04/2012 03:56

Gracias por el tutorial

**Cesarionis** · 17/11/2012 03:45

He intentado adaptar tu plugin en vez de al navbar al navtab, pero los submenus aparecen desplegados, en vez de mostrarse cuando pulso sobre el enlace. ¿Alguna idea de como puedo solucionarlo?

Código:

if ($show['member'] OR $allowguests){
	global $vbphrase, $vbulletin, $stylevar;


	$sess = $vbulletin->session->vars['sessionurl_q'];
		$template_hook[navtab_end] .= '
		<li class="popupmenu">
			<a href="javascript://" class="popupctrl navtab">
				' . Modelos . '<img src="' . vB_Template_Runtime::fetchStyleVar('imgdir_misc') . '/arrow.png" align="' . vB_Template_Runtime::fetchStyleVar('right') . '" />
			</a>
			<ul class="popupbody popuphover" style="color:' . vB_Template_Runtime::fetchStyleVar('navbar_tab_linkhover_color') . ';font:' . vB_Template_Runtime::fetchStyleVar('navbar_tab_font') . '">
			<li class="navbarList_li_1"><img src="/images/misc/black_right_arrow.png" style="float:right;"><a>MENU 1</a> 
<span class="submenu_1">
<ul class="popupbody popuphover">
				<li><a href="ENLACE SUBMENU 2.1" target="_blank">SUBMENU 2.1</a></li>  
    <li><a href="ENLACE SUBMENU 2.2" target="_blank">SUBMENU 2.2</a></li> 
    <li><a href="ENLACE SUBMENU 2.3" target="_blank">SUBMENU 2.3</a></li> 
    <li><a href="ENLACE SUBMENU 2.4" target="_blank">SUBMENU 2.4</a></li> 
			</ul>
</span>
		</li>


<li class="navbarList_li_1"><img src="/images/misc/black_right_arrow.png" style="float:right;"><a>MENU 1</a> 
<span class="submenu_1">
<ul class="popupbody popuphover">
				<li><a href="ENLACE SUBMENU 2.1" target="_blank">SUBMENU 2.1</a></li>  
    <li><a href="ENLACE SUBMENU 2.2" target="_blank">SUBMENU 2.2</a></li> 
    <li><a href="ENLACE SUBMENU 2.3" target="_blank">SUBMENU 2.3</a></li> 
    <li><a href="ENLACE SUBMENU 2.4" target="_blank">SUBMENU 2.4</a></li> 
			</ul>
</span>
		</li>


</li>
</ul>';
}

**OLMID** · 18/11/2012 13:41

Hola

Para que los submenús queden ocultos y aparezcan cuando se pone el puntero encima, debes colocar en la plantilla additional.css lo que indico en el paso 2

Para 2 niveles:

Código PHP:


.navbarList_li_1 .submenu_1 {display:none;}
.navbarList_li_1:hover .submenu_1 {display:block; position:absolute; top:-30px; left:200px;}

Saludos

**Cesarionis** · 18/11/2012 16:10

Iniciado por OLMID

Hola

Para que los submenús queden ocultos y aparezcan cuando se pone el puntero encima, debes colocar en la plantilla additional.css lo que indico en el paso 2

Para 2 niveles:

Código PHP:


.navbarList_li_1 .submenu_1 {display:none;}
.navbarList_li_1:hover .submenu_1 {display:block; position:absolute; top:-30px; left:200px;}

Saludos

¡Muchas gracias! Tengo otro problema. Quiero colocar el botón después del de Inicio/Artículos, pero con el nuevo editor del menú no encuentro la forma de hacerlo. ¿Se te ocurre alguna solución?

**OLMID** · 19/11/2012 02:38

Este plugin se hizo para vB 4.1.xx, si usas vB 4.2.xx ya no es necesario, las pestañas y menús se crean desde el Administrador de Navegación
Yo ya no lo uso por que tengo vB4.2, así que no puedo hacerle pruebas

Puedes cambiar $template_hook['navtab_end'] por $template_hook['navtab_start'] y comprobar

Saludos

**toni22** · 20/01/2013 05:42

Iniciado por OLMID

Este plugin se hizo para vB 4.1.xx, si usas vB 4.2.xx ya no es necesario, las pestañas y menús se crean desde el Administrador de Navegación
Yo ya no lo uso por que tengo vB4.2, así que no puedo hacerle pruebas

Puedes cambiar $template_hook['navtab_end'] por $template_hook['navtab_start'] y comprobar

Saludos

y como se hace? porque en el administrador de navegacion yo solo veo para crear pestañas no menus.

saludos.

**OLMID** · 20/01/2013 10:23

Hola toni22

Cuando ya tienes una pestaña creada, desde el desplegable que hay a su derecha, puedes elegir "Añadir enlace" o "Añadir menú", a eso me refiero

Saludos

**toni22** · 20/01/2013 10:39

si pero no queda igual que este menu que nos has puesto aqui y es una putada que no sirva para vb 4.2

**OLMID** · 21/01/2013 09:51

El plugin sí sirve para vb 4.2 y funciona casi igual, solo has de cambiar $template_hook['navbar_end'] por $template_hook['navbar_after_links']

Saludos

**toni22** · 21/01/2013 18:40

muchas gracias crack funciona perfecto

.

saludos.

LinkBack

Herramientas

Califica este tema

Visualizar

[Plugin] Añadir Menu con submenus en el Navbar con varios niveles

Re: [Plugin] Añadir Menu con submenus en el Navbar

Re: [Plugin] Añadir Menu con submenus en el Navbar

Re: [Plugin] Añadir Menu con submenus en el Navbar

Re: [Plugin] Añadir Menu con submenus en el Navbar

Re: [Plugin] Añadir Menu con submenus en el Navbar

Re: [Plugin] Añadir Menu con submenus en el Navbar

Re: [Plugin] Añadir Menu con submenus en el Navbar

Re: [Plugin] Añadir Menu con submenus en el Navbar

Re: [Plugin] Añadir Menu con submenus en el Navbar

Re: [Plugin] Añadir Menu con submenus en el Navbar

Re: [Plugin] Añadir Menu con submenus en el Navbar

Re: [Plugin] Añadir Menu con submenus en el Navbar

Sobre vBHispano

Links

Patrocinadores