2009-10-20, 11:02 PM
Hola a todos.
EsteTutorial es con el que podrán agregar submenús que aparecen al dejar el cusror en un toplink, por lo que aparecerán más opciones, es recomendado si tienes pensado organizar todos tus toplinks en secciónes.
El nombre de este proyecto/archivo JavaScript es llamado "AnyLink CSS Menu".
DEMO: http://zonaworms.icr38.net
Secciónes: Comunidad, Foro, Herramientas.
Submenús: Ayuda, Calendario, Portal, Reglas, etc.
Nota importante: En caso de tener algunos fallos al instalar los submenús organizados en secciónes en los toplinks, hacer una copia de seguridad de las plantillas editadas "Cabecera" (header, welcomeblock_guest, welcomeblock_member).
ok, para comenzar con el Tutorial, necesitamos lo siguiente:
Obvio que esta aplicación parece un Plugin, pero... NO lo es.
Así que, deberán de descargar el archivo Java, pues así es como funcionan estos submenús, sin necesidad de instalar un plugin.
Este paquete contiene el archivo Java que funciona para aparecer los menús cuando ya esté todo listo, incluyendo a la Hoja de Estilo CSS que funciona para indicar los estilos y colores mientras se navega en un submenú.
Todo el contenido de este paquete deben de subirlo a su servidor por medio de FTP, a las carpetas correspondientes del foro.
Ahora que tenemos los archivos subidos, debemos de empezar a complementar e idearnos nuestro contenido en secciónes para los submenús en los toplinks. Para eso... debemos de empezar a crear las imágenes que se mostrarán en las secciónes y los submenús.
Más información sobre las imágenes en el archivo "Leame.txt" incluído en el paquete de archivos AnyLink CSS.
Lo siguiente, es empezar a hacer los cambios en nuestras plantillas de Cabecera, especialmente header.
Nota: En los foros con estilos "Afresh" deben de tener modificaciónes de plantillas diferentes, cuya información está ubicada más abajo.
Para evitarnos problemas, editaremos las plantillas del estilo que tiene el foro por defecto (Default).
Empezaremos principalmente a editar la plantilla "header", ubicada en la sección "Cabecera".
Al inicio de esta plantilla, debemos de agregar lo siguiente, lo que indicará que debe de iniciar allí nuestra hoja de estilo junto con el archivo Java:
Lo siguiente será... empezar a crear la serie de códigos que integrarán los submenús.
Agregar lo siguiente debajo del script:
Recuerden que este código es para indicar lo que puede contener un submenú dentro de una sola sección, puedes ustedes pueden personalizar el título, la URL y la imágen completamente por ustedes. Tambien podrán agregar más submenús, recomiendo no hacer más de 10.
Al agregar más menús, recuerden que la que van a crear debe de estar abajo del último "</div>" que indican los submenús del último.
Lo siguiente es demasiado fácil... ahora debemos de reemplazar el contenido que se contiene en "<div class="menu">" para indicar y crear las secciónes para mostrar los menús.
En este caso, para agregar la de arriba, debe de ser así:
Los carácteres en el nombre de la sección y de los submenús [ ]indica que debe de haber un espacio para serparar la imágen del nombre, puede quitarlo si ustedes prefieren. ^^
Al combinar todas estas acciónes, la sección sería "Sección 1", cuyos submenús contiene serán: MyBB-Es, MyBBoard, MyBB Source y ZonaWorms.
Información sobre cambios de Toplinks en estilos "Afresh":
La mayoría de los cambios que se hacen dentro de un estilo "Afresh" creados por Justin S. de http://mybboard.net son iguales, pero con algunas excepxiónes, que son las siguientes:
Espero el Tutorial esté completo, me llevó más de 4 horas terminarlo. D:
Favor de Reportar cualquier error aquí mismo.
Saludos!
Tutorial creado 100% por mí.
EsteTutorial es con el que podrán agregar submenús que aparecen al dejar el cusror en un toplink, por lo que aparecerán más opciones, es recomendado si tienes pensado organizar todos tus toplinks en secciónes.
El nombre de este proyecto/archivo JavaScript es llamado "AnyLink CSS Menu".
DEMO: http://zonaworms.icr38.net
Secciónes: Comunidad, Foro, Herramientas.
Submenús: Ayuda, Calendario, Portal, Reglas, etc.
Nota importante: En caso de tener algunos fallos al instalar los submenús organizados en secciónes en los toplinks, hacer una copia de seguridad de las plantillas editadas "Cabecera" (header, welcomeblock_guest, welcomeblock_member).
ok, para comenzar con el Tutorial, necesitamos lo siguiente:
Obvio que esta aplicación parece un Plugin, pero... NO lo es.
Así que, deberán de descargar el archivo Java, pues así es como funcionan estos submenús, sin necesidad de instalar un plugin.
Este paquete contiene el archivo Java que funciona para aparecer los menús cuando ya esté todo listo, incluyendo a la Hoja de Estilo CSS que funciona para indicar los estilos y colores mientras se navega en un submenú.
Todo el contenido de este paquete deben de subirlo a su servidor por medio de FTP, a las carpetas correspondientes del foro.
Ahora que tenemos los archivos subidos, debemos de empezar a complementar e idearnos nuestro contenido en secciónes para los submenús en los toplinks. Para eso... debemos de empezar a crear las imágenes que se mostrarán en las secciónes y los submenús.
Más información sobre las imágenes en el archivo "Leame.txt" incluído en el paquete de archivos AnyLink CSS.
Lo siguiente, es empezar a hacer los cambios en nuestras plantillas de Cabecera, especialmente header.
Nota: En los foros con estilos "Afresh" deben de tener modificaciónes de plantillas diferentes, cuya información está ubicada más abajo.
Para evitarnos problemas, editaremos las plantillas del estilo que tiene el foro por defecto (Default).
Empezaremos principalmente a editar la plantilla "header", ubicada en la sección "Cabecera".
Al inicio de esta plantilla, debemos de agregar lo siguiente, lo que indicará que debe de iniciar allí nuestra hoja de estilo junto con el archivo Java:
<link rel="stylesheet" type="text/css" href="{$mybb->settings['bburl']}/css/anylinkcssmenu.css" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/anylinkcssmenu.js">
/***********************************************
* AnyLink CSS Menu script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/
</script>
<script type="text/javascript">
//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
</script>
Lo siguiente será... empezar a crear la serie de códigos que integrarán los submenús.
Agregar lo siguiente debajo del script:
Recuerden que este código es para indicar lo que puede contener un submenú dentro de una sola sección, puedes ustedes pueden personalizar el título, la URL y la imágen completamente por ustedes. Tambien podrán agregar más submenús, recomiendo no hacer más de 10.
<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="http://www.mybb-es.com/"><img src="url-imagen" /> MyBB-Es</a></li>
<li><a href="http://www.mybboard.net"><img src="url-imagen" /> MyBBoard</a></li>
<li><a href="http://www.mybbsource.com"><img src="url-imagen" /> MyBB Source</a></li>
<li><a href="http://www.zonaworms.icr38.net"><img src="url-imagen" /> ZonaWorms</a></li>
</ul>
</div>
Al agregar más menús, recuerden que la que van a crear debe de estar abajo del último "</div>" que indican los submenús del último.
Lo siguiente es demasiado fácil... ahora debemos de reemplazar el contenido que se contiene en "<div class="menu">" para indicar y crear las secciónes para mostrar los menús.
En este caso, para agregar la de arriba, debe de ser así:
<li><a href="#" class="anchorclass" rel="submenu1"><img src="url-imagen" /> Sección 1</a></li>
Los carácteres en el nombre de la sección y de los submenús [ ]indica que debe de haber un espacio para serparar la imágen del nombre, puede quitarlo si ustedes prefieren. ^^
Al combinar todas estas acciónes, la sección sería "Sección 1", cuyos submenús contiene serán: MyBB-Es, MyBBoard, MyBB Source y ZonaWorms.
Información sobre cambios de Toplinks en estilos "Afresh":
La mayoría de los cambios que se hacen dentro de un estilo "Afresh" creados por Justin S. de http://mybboard.net son iguales, pero con algunas excepxiónes, que son las siguientes:
- Los cambios que se insertan dentro del "<span class="float_right"> - </span>", deben de ser insertadas en las plantillas welcomeblock_guest y welcomeblock_member, con la excepción de insertar sólo el vínculo, sin insertarlo en modo lista "<ul> <li> </li> </ul>".
Espero el Tutorial esté completo, me llevó más de 4 horas terminarlo. D:
Favor de Reportar cualquier error aquí mismo.
Saludos!
Tutorial creado 100% por mí.