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

  • Autor Autor imported_OLMID
  • Fecha de inicio Fecha de inicio
I

imported_OLMID

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
[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
 
He seguido trabajando en él y he añadido más niveles 🙂

saludos
 
Exelente muy bien gracias gente como tu hace falta en este foro
 
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>';
}
 
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
 
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
Hacer clic para expandir...

¡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?
 
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
 
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
Hacer clic para expandir...


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


saludos.
 
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
 
si pero no queda igual que este menu que nos has puesto aqui y es una putada que no sirva para vb 4.2
 
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 🙂
 
muchas gracias crack funciona perfecto 😉.


saludos.
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

M
Tutorial: Agregar un submenu flotante o solapa en la parte del navbar
Respuestas
15
Visitas
5K
juit
J
Atrás
Arriba