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

imported_OLMID · 27 Abr 2012

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

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
Ver el archivo adjunto 5468

Imagen 3 niveles
Ver el archivo adjunto 5470

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):

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):

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):

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:

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:

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

Ver el archivo adjunto 5469

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

imported_OLMID · 29 Abr 2012

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

saludos

ZEL · 29 Abr 2012

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

vbluis · 30 Abr 2012

Gracias por el tutorial

Cesarionis · 17 Nov 2012

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?

Insertar CODE, HTML o PHP:

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>';
}

imported_OLMID · 18 Nov 2012

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:

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 Nov 2012

OLMID dijo:
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:

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?

imported_OLMID · 19 Nov 2012

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 Ene 2013

OLMID dijo:
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.

imported_OLMID · 20 Ene 2013

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 Ene 2013

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

imported_OLMID · 21 Ene 2013

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 Ene 2013

muchas gracias crack funciona perfecto

.

saludos.