Hola a todos.
Como les prometí, les traería a ustedes, el tutorial 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://windowsconfig.0adz.com
Secciones: Comunidad, Foro, Herramientas.
Submenús: Ayuda, Calendario, Portal, Reglas, etc.
Incluiré una pequeña página HTML para ver el resultado final al seguir este Tutorial:
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.
Como han visto: eso que dice "submenu1" puede ser cambiado por cualquier nombre que ustedes quieran, recomiendo organizar cada menú cambiando esos nombres.
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.
NUEVO: Agregado el 12/Ene/2010 - Al estar viendo actualizaciones de este increíble modificación encontre la manera de poder hacer desplegar el menu sólo con dar un click en el toplink.
Se hace así:
El cambio en este codigo, es simplemente indicar el [click] dentro del 'rel'.
Esto permite que se pueda desplegar el menu solo con hacer click en el toplink, pero con la excepcion de hacer que el submenu sea desplegable hasta dejar el mouse de allí.
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í.
+REP Por favor.
Como les prometí, les traería a ustedes, el tutorial 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://windowsconfig.0adz.com
Secciones: Comunidad, Foro, Herramientas.
Submenús: Ayuda, Calendario, Portal, Reglas, etc.
Incluiré una pequeña página HTML para ver el resultado final al seguir este Tutorial:
[attachment=142] [Descarga Opcional]
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.
[attachment=141]
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:
Código:
<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.
Código:
<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>Como han visto: eso que dice "submenu1" puede ser cambiado por cualquier nombre que ustedes quieran, recomiendo organizar cada menú cambiando esos nombres.
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í:
Código:
<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.
NUEVO: Agregado el 12/Ene/2010 - Al estar viendo actualizaciones de este increíble modificación encontre la manera de poder hacer desplegar el menu sólo con dar un click en el toplink.
Se hace así:
Código:
<li><a href="#" class="anchorclass" rel="submenu1[click]"><img src="url-imagen" /> Sección 1</a></li>El cambio en este codigo, es simplemente indicar el [click] dentro del 'rel'.
Esto permite que se pueda desplegar el menu solo con hacer click en el toplink, pero con la excepcion de hacer que el submenu sea desplegable hasta dejar el mouse de allí.
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í.
+REP Por favor.
Esto que estas haciendo es una personalización de los Menús o en en Panel Admin?
O... estás modificando la plantilla Admin para que solo tú puedas ver el resultado?
EDIT: Intenta con esta plantilla:
Así te debe de funcionar (creo).
O... estás modificando la plantilla Admin para que solo tú puedas ver el resultado?
EDIT: Intenta con esta plantilla:
Código:
<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>
<a href="#" class="anchorclass" rel="submenu1"><img src="/icons/admincp.gif"/> Admincp</a>
<div id="submenu1" class="anylinkcss">
<ul>
<li><a href="{$mybb->settings['bburl']}/{$config['admin_dir']}/index.php" class="admincp"> {$lang->welcome_admin}</a></li>
<li><a href="http://xadmind=17" class="plantilla"> Plantilla</a></li>
<li><a href="http://xg=18" class="themes"> Themes</a></li>
<li><a href="httONFIG"> Configuracion</a></li>
<li><a href="hugins" class="plugin"> Plugins</a></li>
<li><a href="http:/m" class="forum"> Foros</a></li>
<li><a href="http://er" class="user"> Usuarios</a></li>
</ul>
</div>Así te debe de funcionar (creo).
Usé el tutorial y todo me va perfectamente, pero quería saber si se podría hacer una pequeña modificación que consistiría en una de estas dos opciones:
- O poder hacer que en uno de los toplinks, en vez de desaparecer cuando quites el cursor, que solo desaparezca si haces click encima del topink.
- O poder hacer todos los toplinks que haya que hacer click para que aparezca el desplegable.
- O poder hacer que en uno de los toplinks, en vez de desaparecer cuando quites el cursor, que solo desaparezca si haces click encima del topink.
- O poder hacer todos los toplinks que haya que hacer click para que aparezca el desplegable.
(10 Jan, 2010, 3:03 pm)nodba escribió: Usé el tutorial y todo me va perfectamente, pero quería saber si se podría hacer una pequeña modificación que consistiría en una de estas dos opciones:
- O poder hacer que en uno de los toplinks, en vez de desaparecer cuando quites el cursor, que solo desaparezca si haces click encima del topink.
- O poder hacer todos los toplinks que haya que hacer click para que aparezca el desplegable.
No, no se puede hacer, eso creo
Buscaré en la fuente oficial (donde lo encontré no es de MyBB), y veré si esta disponible eso, ya sabemos que se actualiza cualquier cosa. xD
(10 Jan, 2010, 6:55 pm)Angelbg escribió:(10 Jan, 2010, 3:03 pm)nodba escribió: Usé el tutorial y todo me va perfectamente, pero quería saber si se podría hacer una pequeña modificación que consistiría en una de estas dos opciones:
- O poder hacer que en uno de los toplinks, en vez de desaparecer cuando quites el cursor, que solo desaparezca si haces click encima del topink.
- O poder hacer todos los toplinks que haya que hacer click para que aparezca el desplegable.
No, no se puede hacer, eso creo
Buscaré en la fuente oficial (donde lo encontré no es de MyBB), y veré si esta disponible eso, ya sabemos que se actualiza cualquier cosa. xD
Me sería de graan utilidad cualquiera de las dos opciones. Gracias de antemano!
(11 Jan, 2010, 3:01 pm)dark51 escribió: yo tengo un topink o como lo llameis yo lo llamo menu despeglable xP que solo se habre al hazer click y esta en navegacion.
si te gusta are un tutorial de como ponerlo me costo una tarde pillarle el truco xP
Al margen de que me gustaría poder editar algo en este tutorial para que funcione como yo digo, porque ya lo tengo todo configurado, haz ese tutorial por favor.