Crear Menú Desplegable

Hay 29 invitados en línea

Bienvenido, por favor ingrese sus datos o regístrese aquí

DWDpa es una comunidad dedicada al desarrollo y optimización de sitios Web | Requiere programaciòn especial para su sitio Web ?, Diseño Gráfico o simplemente crear su propia página Web ?, contáctenos | Posicionamiento Web en Google, el archivo .htaccess y otros temas te ayudarán a optimizar sitios Web

Manuales Posicionamiento Web Términos sobre Posicionamiento Posicionamiento Web en Google .htaccess Parámetros en .htaccess Directivas de .htaccess Joomla Manual de Instalación del Joomla Crear Templates para Joomla Migrar usuarios de Nuke a Joomla PHP-Nuke Instalación del PHP-Nuke en Español Cómo hacer tus propios Módulos Subir mi Portal y no morir en el intento Mis Primeros pasos con PHP-Nuke Configurar y Hacer tus Propios Bloques Base de Datos desde el FTP Tu Nuke Multilingüe Crear un Bloque con Scroll Cómo modificar un Theme Segundo rango para los Foros Cómo Hacer un Theme desde Cero Crear Menú Desplegable Rango en Lista de Miembros Crear un Precargador para Nuke Crear theme con archivos HTML Theme con bloques a la izquierda Theme: contenido con alto fijo Nuketips Adobe Photoshop Rejuvenecer Máscara Rápida Transformar de Foto a Dibujo Firmas con Adobe Photoshop Texto de fuego Desvanecimiento con Photoshop Efecto de Plástico Efecto de Aceite Animación con Image Ready Blast Burbuja Efecto Canica Cemento Mojado

Voy a tratar de explicarles cómo hacer dos tipos de Menú Desplegable en los bloques del Nuke..., primero el más sencillo:

Este es un ejemplo del código...

$content .= "<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>\n";
$content .= "<TR><FORM METHOD=GET ACTION=\"modules.php\">\n";
$content .= "<TD><SELECT NAME=\"name\" CLASS=\"boxcontent\" onChange=\"top.location.href=this.options[this.selectedIndex].value\">\n";
$content .= "<OPTION VALUE=\"\">Otras Secciones";
$content .= "<OPTION VALUE=\"modules.php?name=chat\">Chat\n";
$content .= "<OPTION VALUE=\"modules.php?name=juegos\">Juegos\n";
$content .= "<OPTION VALUE=\"modules.php?name=Your_Account\">Tu Cuenta\n";
$content .= "<OPTION VALUE=\"modules.php?name=Members_List\">Lista de Miembros\n";
$content .= "<OPTION VALUE=\"modules.php?name=Private_Messages\">Mensajes Privados\n";
$content .= "<OPTION VALUE=\"\">-------";
$content .= "<OPTION VALUE=\"modules.php?name=Topics\">Temas\n";
$content .= "<OPTION VALUE=\"modules.php?name=Top\">Top 10\n";
$content .= "<OPTION VALUE=\"modules.php?name=Stories_Archive\">Historial\n";
$content .= "<OPTION VALUE=\"modules.php?name=Surveys\">Encuestas\n";
$content .= "</SELECT></TD></TR></FORM></TABLE></center> ";

En color azul las URL`s y en rojo el texto visible en el menú. Estas dos partes con colores es lo único que tienes que modificar de acuerdo a lo que necesites. Puedes agregar más opciones o eliminar, sólo ten en cuenta que deben estar sobre la última línea que dice $content .= "</SELECT></TD></TR></FORM></TABLE></center> ";

Ahora vamos con el que todos se preguntan "Cómo se hace" (y el causante de este Manual).

Primero deben descargar en Utilidades los Assesorios para Scripts, descomprimen, abren la carpeta Efectos en el Nuke y verán el archivo swap.js. Pongan el archivo swap.js en la carpeta includes de su Nuke. Busquen también los archivos barra-L.gif, barra-T.gif y los ponen en la carpeta images del Nuke.

Ahora les copio parte del código que utilizo...

$content = "<script type=\"text/javascript\" language=\"JavaScript1.2\" src=\"includes/swap.js\"></script>";

$content .= "<img id=\"yourmenusign\" src=\"modules/Forums/images/ranks/esp.gif\" valign=\"middle\"> Galería ";
$content .= " ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=ecard\" ;return true\" onmouseout=\"self.status='';return true\">Enviar Postales</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?name=My_eGallery\" ;return true\" onmouseout=\"self.status='';return true\">Principal</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?op=modload&name=My_eGallery&file=index&do=showgall&gid=2\" ;return true\" onmouseout=\"self.status='';return true\">Themes</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?op=modload&name=My_eGallery&file=index&do=showgall&gid=15\" ;return true\" onmouseout=\"self.status='';return true\">Fotos de Miembros</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?op=modload&name=My_eGallery&file=index&do=upload\" ;return true\" onmouseout=\"self.status='';return true\">Subir tu Foto</a> ";
$content .= "\n";

$content .= "<img src=\"modules/Forums/images/ranks/esp.gif\"> <a href=\"modules.php?name=Sections\">NukeTips</a> ";

$content .= "<img id=\"yourmenusign\" src=\"modules/Forums/images/ranks/esp.gif\" valign=\"middle\"> ScriptCity ";
$content .= " ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?name=scriptcity\" ;return true\" onmouseout=\"self.status='';return true\">Principal</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=asp\" ;return true\" onmouseout=\"self.status='';return true\">ASP</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=flash\" ;return true\" onmouseout=\"self.status='';return true\">Flash</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=java\" ;return true\" onmouseout=\"self.status='';return true\">Java</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=php\" ;return true\" onmouseout=\"self.status='';return true\">PHP</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?name=vb\" ;return true\" onmouseout=\"self.status='';return true\">VB</a> ";
$content .= "\n";

En naranja está la parte del código donde se llama al archivo swap.js (esto no lo modificas).

En azul están los menús desplegables (esto es la parte que debes modificar)

En rojo está un link normal entre los dos menús. Lo agregué para que tengan en cuenta esa opción.

Ok... vamos al asunto..., este es el inicio del primer menú:

En rojo está donde defines el "nombre del menú", por ejemplo en este caso es el menú que se despliega al presionar Galería en PC, yo le puse gal.

En azul la imagen que está a la izquiera de la palabra Galería que puedes modificar a tu gusto, y luego la palabra Galería que es visible en el bloque. Ves que lo he encerrado entre ... .., esto es para que tenga el mismo color que los links, ya que por defecto el color no es el mismo.

Ahora abre el archivo swap.js y debes cambiar donde dice modules/Forums/images/ranks/esp.gif por la URL de la imagen que vas a utilizar, es decir la misma que definiste anteriormente (en color azul).

Seguimos:

$content .= "<img id=\"yourmenusign\" src=\"modules/Forums/images/ranks/esp.gif\" valign=\"middle\"> Galería ";
$content .= " ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=ecard\" ;return true\" onmouseout=\"self.status='';return true\">Enviar Postales</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?name=My_eGallery\" ;return true\" onmouseout=\"self.status='';return true\">Principal</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?op=modload&name=My_eGallery&file=index&do=showgall&gid=2\" ;return true\" onmouseout=\"self.status='';return true\">Themes</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?op=modload&name=My_eGallery&file=index&do=showgall&gid=15\" ;return true\" onmouseout=\"self.status='';return true\">Fotos de Miembros</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?op=modload&name=My_eGallery&file=index&do=upload\" ;return true\" onmouseout=\"self.status='';return true\">Subir tu Foto</a> ";
$content .= "\n";

En rojo ven donde defino que el grupo de links a continuación se despliegan al presionar la palabra Galería. Recuerden que antes ya definí la palabra gal.

En naranja ven los espacios en blanco que tengo que dejar para que los links aparezcan más a la derecha (HTML básico).

En azul, las imágenes barra-T.gif y barra-L.gif que utilizo según el caso. Si es el último link uso la imagen barra-L.gif, si es uno intermedio uso barra-T.gif. También en azul está la URL del vínculo que como todos saben, define a donde serás dirigido al presionar el texto del vínculo (que es lo que aparece en Negrita).

Ya tienes lo más importante, ahora un recuento de los puntos que debes tomar en cuenta:

1. Recuerda agregar al inicio del bloque la llamada al archivo swap.js.

2. Cada uno de los menús comienza y termina con la etiqueta span.

3. Para cada uno de los menús del bloque debes definir un "nombre", este nombre los colocas en onClick=\"showhide(NOMBRE,yourmenusign)\" y luego al inicio de los diferentes links que se despliegan en id=\"NOMBRE\"

4. Recuerda agregar los espacios en blanco ( ) que necesites para que los links se corran hacia la derecha.

5. No olvides colocar el archivo swap.js en la carpeta includes y las imágenes que utilices en la carpeta images.

6. Puedes modificar las imágenes a tu gusto y conveniencia. La imagen que aparece a la izquierda del menú la configuras en el bloque y en el archivo swap.js

7. Lo demás no lo modifiques.

Ahora les dejo el código fuente completo del bloque para que les sirva de guía.

<?php

#####################################
# PHP-NUKE: Web Portal System #
# =========================== #
# #
# Block Menú Principal #
# by Psico #
# URL: www.psicoconsultas.net #
#####################################

if (eregi("block-Menu.php", $_SERVER['SCRIPT_NAME'])) {
Header("Location: index.php");
die();
}

$content = "<script type=\"text/javascript\" language=\"JavaScript1.2\" src=\"includes/swap.js\"></script>";

$content .= "<img src=\"modules/Forums/images/ranks/esp.gif\"> <a href=\"index.php\">".Inicio."</a> ";

$content .= "<img id=\"yourmenusign\" src=\"modules/Forums/images/ranks/esp.gif\" valign=\"middle\"> Foros ";
$content .= " ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums\" ;return true\" onmouseout=\"self.status='';return true\">Principal</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=1&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">General</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=2&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Programas</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=3&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Internet</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=4&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Windows</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=5&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Linux</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=19&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Hardware</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=6&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Cine</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=7&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Televisión</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=8&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Anime/Manga</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=9&sid=1e1f3d63903337751324aef6c2c3843a\" ;return true\" onmouseout=\"self.status='';return true\">VideoJuegos</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=10&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Photoshop</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=11&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Dreamweaver MX</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=12&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Swish</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=13&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">HTML</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=14&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">PHP-Nuke</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=15&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">WebMasters</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=17&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Intercambios</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?name=Forums&file=viewforum&f=18&sid=b0ae5d9fef95b200db12d17c1b32ed9d\" ;return true\" onmouseout=\"self.status='';return true\">Promociona tu web</a> ";
$content .= "\n";

$content .= "<img src=\"modules/Forums/images/ranks/esp.gif\"> <a href=\"modules.php?name=Sections\">NukeTips</a> ";

$content .= "<img src=\"modules/Forums/images/ranks/esp.gif\"> <a href=\"modules.php?name=indicedemanuales\">Manuales</a> ";
$content .= "<img src=\"modules/Forums/images/ranks/esp.gif\"> <a target=\"_blank\" href=\"http://usuarios.lycos.es/anarknuke\">AnarkNuke</a> ";

$content .= "<img id=\"yourmenusign\" src=\"modules/Forums/images/ranks/esp.gif\" valign=\"middle\"> Descargas ";
$content .= " ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?name=Downloads\" ;return true\" onmouseout=\"self.status='';return true\">Principal</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Downloads&d_op=viewdownload&cid=2\" ;return true\" onmouseout=\"self.status='';return true\">PHP-Nuke</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Downloads&d_op=viewdownload&cid=7\" ;return true\" onmouseout=\"self.status='';return true\">Arreglos</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Downloads&d_op=viewdownload&cid=4\" ;return true\" onmouseout=\"self.status='';return true\">Bloques</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Downloads&d_op=viewdownload&cid=8\" ;return true\" onmouseout=\"self.status='';return true\">Gráficos</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Downloads&d_op=viewdownload&cid=3\" ;return true\" onmouseout=\"self.status='';return true\">Módulos</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?name=Downloads&d_op=viewdownload&cid=10\" ;return true\" onmouseout=\"self.status='';return true\">Themes</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Downloads&d_op=viewdownload&cid=1\" ;return true\" onmouseout=\"self.status='';return true\">Utilidades</a> ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Downloads&d_op=viewdownload&cid=11\" ;return true\" onmouseout=\"self.status='';return true\">Libros</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?name=Downloads&d_op=viewdownload&cid=6\" ;return true\" onmouseout=\"self.status='';return true\">Legion</a> ";
$content .= "\n";

$content .= "<img id=\"yourmenusign\" src=\"modules/Forums/images/ranks/esp.gif\" valign=\"middle\"> Edonkey links ";
$content .= " ";
$content .= " <img src=\"images/barra-T.gif\" align=\"middle\"> <a href=\"modules.php?name=Edonkey&d_op=AddDownload\" ;return true\" onmouseout=\"self.status='';return true\">Añadir E-link</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?name=Edonkey\" ;return true\" onmouseout=\"self.status='';return true\">Principal</a> ";
$content .= " <img src=\"images/barra-L.gif\" align=\"middle\"> <a href=\"modules.php?name=Edonkey&d_op=viewdownload&cid=13\" ;return true\" onmouseout=\"self.status='';return true\">Software</a> ";
$content .= "\n";

$content .= "<img src=\"modules/Forums/images/ranks/esp.gif\"> <a href=\"modules.php?name=clinica\">Clínica On-Line</a> ";
$content .= "<img src=\"modules/Forums/images/ranks/esp.gif\"> <a href=\"modules.php?name=cursohtml\">Curso de HTML</a> ";
$content .= "<img src=\"modules/Forums/images/ranks/esp.gif\"> <a href=\"modules.php?name=PHP-Nuke_Tools\">Herramientas PC</a> ";
$content .= "<img src=\"modules/Forums/images/ranks/esp.gif\"> <a href=\"modules.php?name=efectos\">Efectos en el Nuke</a> ";
$content .= "<img src=\"modules/Forums/images/ranks/esp.gif\"> <a href=\"modules.php?name=Tips_Comunidad\">Tips de la Comunidad</a> ";

Psico
dwdpa.com

[ subir ]

Prohibido Reproducir este Manual en otro Sitio Web

Sea el primero en comentar el artículo

Solo los usuarios registrados pueden agregar sus comentarios.
Por favor, vaya a login, o regístrese.

[Volver]