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

imported_OLMID Seguir

Gamma
Verificación en dos pasos desactivada
Desde
14 Oct 2009
Mensajes
218
[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
 

Cesarionis

Beta
Verificación en dos pasos desactivada
Desde
29 Sep 2009
Mensajes
80
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

Gamma
Verificación en dos pasos desactivada
Desde
14 Oct 2009
Mensajes
218
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

Beta
Verificación en dos pasos desactivada
Desde
29 Sep 2009
Mensajes
80
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

Gamma
Verificación en dos pasos desactivada
Desde
14 Oct 2009
Mensajes
218
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

Gamma
Verificación en dos pasos desactivada
Desde
11 Ago 2011
Mensajes
247
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

Gamma
Verificación en dos pasos desactivada
Desde
14 Oct 2009
Mensajes
218
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

Gamma
Verificación en dos pasos desactivada
Desde
11 Ago 2011
Mensajes
247
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

Gamma
Verificación en dos pasos desactivada
Desde
14 Oct 2009
Mensajes
218
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 :)
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba