Crear Modulo de Navegacion Personalizado con Mouseover

Sax Seguir

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
30 May 2008
Mensajes
227
En este tutorial os enseñare como crear un menu de navegacion, con iconos para cada link, botones, buscados... este modulo que vamos a crear lo sustituiremos por el modulo "» Panel de Navegación" del vBadvanced el cual es muy cutre.

Podreis crear varias categorias dentro del menu por asi decirlo añadiendo tambien iconos a cada categoria y personalizarlo al 100%, las imagenes del fondo es como quedaria segun instalarlo como veis se adapta al estilo, pero no os fijeis en eso ya que son demos, como ya os exlpicare mas adelante podeis modificar, mover, quitar y añadir lo que querais sin limite.

Bueno vamos a empezar:

1. Bajaros esto, es un modulo base por asi decirlo; Navigation module for vBulletin and CMPS 2.0 - vBulletin.org Forum

2. Instalarlo: Admincp ->vBa CMPS -> Exportar/Importar modulo

3. Ir al estilo que quieras Admincp -estilos y plantillas-administrar estilo y expandes las plantillas del estilo que quieras es un boton algo asi como esto :
<< >> a la derecha

4.Entra en la plantilla adv_portal_navbarmenu

5. Toca editar, haber por donde empezamos xD

IMPORTANTE: No useis los codigos base del modulo, localizar su posicion y copiar los codigos que puse yo aqui ya que algunas cosas las modifique para que funcionaran bien, por ejemplo los mouseover y mouseout de MENU- LISTA DE LINKS DEL MENU DE NAVEGACION, o lo del ADMIN del final, con quitar lo que esta entre las etiquetas solo no sirve, si quereis probar y vereis que bonito os queda el portal xD

En los codigos vereis que sepado cada linea/link, da = cuanto los separeis no pasara nada, para crear un salto de linea y por lo tanto una separacion debeis usar <br> yo los separe para que entendiera mejor y no se viera todo el codigo amontonado

Cosas basicas que tienes que saber:

Eso es una linea horizontal hay 3 o 4 yo las quite

Saltos de linea, yo los use por ejemplo para poner espacio entre los tituls de cada bloque y el incio de las opciones / lista, menu o como querais llamarlo de links.

TITULO DEL MODULO

AdminCP -> vBa CMPS -> editar modulos -> Navigation menu

Título del Módulo: XXXXXXXXXX


MENU DESPLEGABLE "ITEMS"

<!-- Items -->
<table class="alt1" height="18" border="1" cellspacing="0" cellpadding="0" width="100%">
<tr onmouseover="this.className='alt1'" onmouseout="this.className='alt2'"><td class="tcat" align="center" ><span id="items">
<script type="text/javascript"> vbmenu_register("items"); </script>&nbsp; <a href="#">NOMBRE A MOSTRAR EN EL BOTON(Por defecto Items)</a> </span></td></tr>
</table>
<!-- / Items -->

<!-- Items Menu -->
<div class="vbmenu_popup" id="items_menu" style="display:none;margin-left:100px;">
<table cellpadding="4" cellspacing="1" border="0">
<tr><td class="thead">TITULO MENU DESPLEGABLE</td></tr>

<tr><td class="vbmenu_option"><a href="URL A LA QUE QUIERES QUE TE DIRIJA">NOMBRE DE LA 1 OPCION</a></td></tr>

<tr><td class="vbmenu_option"><a href="URL A LA QUE QUIERES QUE TE DIRIJA">NOMBRE DE LA 2 OPCION</a></td></tr>

<tr><td class="vbmenu_option"><a href="URL A LA QUE QUIERES QUE TE DIRIJA">NOMBRE DE LA 3 OPCION</a></td></tr>

Y copias y pegas ese codigo tantas veces como quieras.

</table>
</div>
<!-- / Links menu -->


Haber por ejemplo te voy a poner el primer bloque que sale, the comunity para que lo modifiques como quieras.Ves el inicio del codigo: <!-- The Community --> y el final <!-- / The Community --> pues busca eso en la plantilla y pega este codigo

MENU- LISTA DE LINKS DEL MENU DE NAVEGACION


<!-- The Community -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr><td><img src="IMAGEN A LA IZQUIERDA DEL TITULO DEL BLOQUE" alt=""/> <b>TITULO DEL BLOQUE</b></td></tr>




<tr onmouseover="this.className='alt1'" onmouseout="this.className='alt0'"><td><img src="IMAGEN A LA IZQUIERDA DE LA 1 OPCION" alt=""/> <a href="URL DE LA PRIMERA OPCION (ej: http://www.tuforo.com)">NOMBRE DE LA PRIMERA OPCION (EJ: foro)</a></td></tr>


<tr onmouseover="this.className='alt1'" onmouseout="this.className='alt0'"><td><img src="IMG IZQ de la 2 OPCION" alt=""/> <a href="URL SEGUNDA OPCION">TITULO 2 OPCION</a></td></tr>


<tr onmouseover="this.className='alt1'" onmouseout="this.className='alt0'"><td><img src="IMG IZQ de la 3 OPCION" alt=""/> <a href="URL 3 OPCION">TITULO 3 OPCION</a></td></tr>

Y ese codigo lo puedes repetir las veces que quieras, los otros bloques son iguales el de media gallery y contact zone, puedes cambiarlos completamente
</table>
<!-- / The Community -->

BOTONES:


Bueno veras unos botones como el de upload images que ademas tienen un mouseover al pasar el raton por encima cambian, su codigo es el sigueinte

<table class="alt2" height="16" border="1" cellpadding="0" cellspacing="0" width="100%"><tr onmouseover="this.className='alt1'" onmouseout="this.className='alt2'"><td align="center"> <a href="URL A LA QUE QUIERES QUE TE LLEVE">TEXTO DEL BOTON</a> <img align="middle" src="IMAGEN DEL BOTON" alt=""/></td></tr>
</table>
Este codigo lo puedes donde quieras, incluso entre 2 opciones de la lista de arriba, al final, al principio, puedes poner todos los botones que quieras, solo copia el codigo y ve poniendo los datos que quieras, eso como veas, copia ese codigo lo modificas y lo pegas donde quieras o quitas los botones o lo que quieras.

BUSCADOR:


<!-- Search -->

<!-- / Search -->
Esas etiquetas delimitan el codigo del buscador si lo quieres dejalo o muevelo, sino simplemente quita esa parte del codigo.

ADMIN:

Como el buscador si lo quieres tener dejalo como esta y si lo quieres quitar pon esto en su lugar.

<!-- Administrators -->
<if condition="$show['admincplink']"> <hr size="1"/>
<table class="alt1" height="18" border="1" cellpadding="0" cellspacing="0" width="100%"><tr onmouseover="this.className='alt2'" onmouseout="this.className='alt1'"><td align="center">

<tr class="alt1">
<td align="center" class="tcat"><span id="other"><strong> <a href="$vboptions[bburl]/$admincpdir/index.php$session[sessionurl_q]" target="_blank"> $vbphrase[admin]</a></strong></span></td></tr>
<!-- / Administrators -->

</td>
</tr>
</table>

</if>

</tr>
Si quereis dejar el boton no toqueis nada.
Si quereis quitar el Codigo de admin debereis de borrar lo que esta en azul, os quedara asi.

</td>
</tr>

</tr>
Bueno con esto deberias de poder crear vuestro propio modulo a medida con cada cosa donde mas os guste.

Si me olvide de algo o para cualquier duda dejar un post :D

A bueno se me olvidaba una imagen:

attachment.php

Todo lo que veis se puede mover o quitar, los iconos como ya os mostre arriba son individuales, las carpetas de los titulos y las lineas de puntos de cada opcion podeis poner la imagen que querais en cada uno.

Evidentemente como se puede ver se adapta a vuestro estilo, quedan mucho mejor que lo que aparece en estas imagenes.
 

Sax

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
30 May 2008
Mensajes
227
Ya me pase y conteste en ese tema moises9633, te lo digo por si no te fijaste. Saludos
 

Carrega

Zeta
Verificación en dos pasos activada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
13 Ago 2008
Mensajes
1.881
podrías agregar una descripción? ya que entras directamente a saco al tuto en si pero no explicas un poco o pones alguna captura de que es lo que se consigue ya que a algunos les puede sonar a chino el titulo (yo he tenido que pensarlo dos veces y ver el tuto para dar con lo que era xD)
 

Sax

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
30 May 2008
Mensajes
227
podrías agregar una descripción? ya que entras directamente a saco al tuto en si pero no explicas un poco o pones alguna captura de que es lo que se consigue ya que a algunos les puede sonar a chino el titulo (yo he tenido que pensarlo dos veces y ver el tuto para dar con lo que era xD)

Bueno ya esta :D

Si teneis cualquier duda o quereis que añada algo, sin problema, dejar un post como hizo Kas_limon y lo añadire, siento haber tardado xD es que estos dias estube con las matriculas de la uni, los creditos de libre conf, mirar si son compatibles con mi carrera.... vamos un rollo.
 
Arriba