News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

menu desplegable para el foro

Started by gustavomf, July 06, 2009, 03:12:19 AM

Previous topic - Next topic

gustavomf

amigos les cuento,  me han ayudado en un menu desplegable para el foro.

La verdad ni idea como adaptarlo.  ???

Creo q no es muy dificil por q ya esta todo realizado, pero quiero saber donde poner estas carpetas, o que modificar.  Porfavor!!!!

Si me pueden guiar un poco se los agradesco mucho ya q costo relizarlo !

Dejo el archivo adjunto ...

La direccion del foro para q lo vean es : AQUI

Muchas gracias a los q puedan dar una mano por mas simple q fuera  ;)


gustavomf

gracais sneijder23 por responder, pero yo quiero un menu superior como este.
Ya me han pasa unos archivos, podrias ver si se puede con esto que adjunte?

Gracias

sneijder23

es el mismo menu a diferencia que ese no es desplegable pero la integracion es la misma

maipgeut

Quote from: sneijder23 on July 06, 2009, 03:55:17 PM
es el mismo menu a diferencia que ese no es desplegable pero la integracion es la misma

una consulta sneijder23, los archivos que tienes en el enlace son de java, pero esto lo hice en css y en html por lo tanto quede perdido y realmente no se donde ni  como colocarlo, habra alguna posibilidad de incorporarlo en la cabecera del dilber mc?? somos novatos con gus asi que por favor si puedes ser lo mas explciativo posible.
De antemano gracias por la ayuda
saludos
Ingresa a forosdelvago.com

sneijder23

donde descargaron el script original?

maipgeut

Quote from: sneijder23 on July 07, 2009, 04:36:07 AM
donde descargaron el script original?

me los paso un amigo y yo lo modifique,  su web es http://www.ddsinformaticos.com


Este es el codigo en css
@charset "UTF-8";

/**
* Horizontal CSS Drop-Down Menu Module
*
* @file dropdown.css
* @package Dropdown
* @version 0.7.1
* @type Transitional
* @stacks 597-599
* @browsers Windows: IE6+, Opera7+, Firefox1+
* Mac OS: Safari2+, Firefox2+
*
* @link http://www.lwis.net/
* @copyright 2006-2008 Live Web Institute. All Rights Reserved.
*
*/

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}

ul.dropdown {
position: relative;
z-index: 597;
float: left;
}

ul.dropdown li {
float: left;
line-height: 1.3em;
vertical-align: middle;
zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}

ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}

ul.dropdown ul li {
float: none;
}

ul.dropdown ul ul {
top: 1px;
left: 99%;
}

ul.dropdown li:hover > ul {
visibility: visible;
}





ul.dropdown li.rtl ul {
top: 100%;
right: 0;
left: auto;
}

ul.dropdown li.rtl ul ul {
top: 1px;
right: 99%;
left: auto;
}


y este es el html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--<html>-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <link href="css/dropdown/dropdown.css" media="all" rel="stylesheet" type="text/css" />
  <link href="css/dropdown/themes/nvidia.com/default.advanced.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
  <div class=centro>
   <!-- comienzo prueba menu -->
   <ul class="dropdown dropdown-horizontal">
    <li><a href="http://forosdelvago.com/foro/index.php?action=collapse;c=4;sa=expand#4" class="dir">FOROS DEL VAGO</a>
      <ul>
        <li><a href="http://forosdelvago.com/foro/index.php?board=4.0">Quienes somos</a></li>
        <li><a href="http://forosdelvago.com/foro/index.php?board=21.0">Como hago</a></li>
        <li><a href="http://forosdelvago.com/foro/index.php?board=22.0">Comentarios y sugerencias</a></li>
        <li><a href="http://forosdelvago.com/foro/index.php?board=147.0">Pedidos generales</a></li>
        <li><a href="http://forosdelvago.com/foro/index.php?board=146.0">Papelera</a></li>

      </ul>
    </li>
<li><a href="http://forosdelvago.com/foro/index.php?action=collapse;c=5;sa=expand#5" class="dir">COMUNIDAD</a>
<ul>
<li><a href="http://forosdelvago.com/foro/index.php?board=3.0">Presentate</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=244.0">Haz amigos</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=175.0">Ranking del foro</a></li>
                </ul>
</li>
        <li><a href="http://forosdelvago.com/foro/index.php?action=collapse;c=12;sa=expand#12">SECCION VIP</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?action=collapse;c=1;sa=expand#1" class="dir">OCIO, VIDA SOCIAL Y SALUD</a>
<ul>
<li><a href="http://forosdelvago.com/foro/index.php?board=36.0">General</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=40.0">Humor y entretenimiento</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=215.0">Preguntas y respuestas</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=2.0">Estilo de vida</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=179.0">Mujer</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=1.0">Mundo motor</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=32.0">Deportes</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=41.0">Salud</a></li>
</ul>
</li>
       
<li><a href="http://forosdelvago.com/foro/index.php?action=collapse;c=6;sa=expand#6" class="dir">INTERESES</a>
<ul>
<li><a href="http://forosdelvago.com/foro/index.php?board=247.0">Zona paranormal</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=252.0">Zona Artes</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=246.0">Zona belica</a></li>
</ul>
</li>
<li><a href="http://forosdelvago.com/foro/index.php?action=collapse;c=13;sa=expand#13" class="dir">DESCARGAS</a>
<ul>
<li><a href="http://forosdelvago.com/foro/index.php?board=201.0">Software</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=62.0">Juegos</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=71.0">Peliculas</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=81.0">Series de tv</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=82.0">Series animadas</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=90.0">Musica</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=103.0">Videos musicales</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=152.0">Telefonia celular</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=116.0">Biblioteca</a></li>
                        <li><a href="http://forosdelvago.com/foro/index.php?board=193.0">P2P</a></li>
</ul>
</li>
<li><a href="http://forosdelvago.com/foro/index.php?action=collapse;c=9;sa=expand#9" class="dir">AYUDA Y SOPORTE</a>
<ul>
<li><a href="http://forosdelvago.com/foro/index.php?board=12.0">Tutoriales y manuales</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=14.0">Sistemas operativos</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=15.0">Programacion</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=162.0">Webmaster</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=150.0">Diseño grafico y fotografia</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=16.0">Trucos y seguridad informatica</a></li>
</ul>
</li>
        <li><a href="http://forosdelvago.com/foro/index.php?action=collapse;c=15;sa=expand#15" class="dir">DINERO EN LA WEB</a>
<ul>
<li><a href="http://forosdelvago.com/foro/index.php?board=123.0">Clasificados</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=127.0">Mundo PTC</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=134.0">Inversiones en la web</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=157.0">Otras propuestas</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=136.0">Cadena de favores</a></li>
</ul>
</li>
        <li><a href="http://forosdelvago.com/foro/index.php?action=collapse;c=11;sa=expand#11" class="dir">ADULTOS (+18)</a>
<ul>
<li><a href="http://forosdelvago.com/foro/index.php?board=169.0">Normas</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=151.0">Sexualidad y drogas</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=44.0">Material propio y amateur</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=45.0">Relatos eroticos</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=46.0">Famosas desnudas</a></li>
        <li><a href="http://forosdelvago.com/foro/index.php?board=47.0">Erotico softcore</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=48.0">Hardcore</a></li>
<li><a href="http://forosdelvago.com/foro/index.php?board=54.0">Hentai</a></li>
 
</ul>
</li>

</ul>

<div id="wmfg"></div>


<!-- fin prueba menu -->

<br><br><br><br>
<h1>Foros del vago</h1>
</div>




</div>

</div>



</body>
</html>

Estos son los codigos que tenemos, habria que crear un archivo en java?

y dentro del cuadro rojo es donde queremos colocar el menu



Sera posible colocarlo ahi?? como se puede colocar ahi?? nuevamente gracias sneijder23 y cualquier ayuda se agradece

saludos

Ingresa a forosdelvago.com

sneijder23

Creo que inicialmente entendi mal tu consulta,es la funcion de este mod lo que deseas?

http://custom.simplemachines.org/mods/index.php?mod=1508

gustavomf

Quote from: sneijder23 on July 08, 2009, 03:57:41 AM
Creo que inicialmente entendi mal tu consulta,es la funcion de este mod lo que deseas?

http://custom.simplemachines.org/mods/index.php?mod=1508

Gracias sneijder23

Pero es solo para la version 2.0 no? porq tenemos la 1.9 y si es asi tendriamos q actualizarlo no ?

sneijder23

eso pone pero prueba de instalarlo,si no da ningun error en la instalacion adelante,segun he visto el parse no deberia dar problemas sino esta como hacerlo manualmente.

./Themes/default/style.css
Quote?>

añadir despues
Quote

/* DropDownMenu */

div#menu {
   left: 40px;
   z-index: 11;
   height: 22px;
   background: url('images/sep_black.png') no-repeat 0 0;; padding-left:1px; padding-right:0px; padding-top:0px; padding-bottom:0px
}

div#menu ul {
   margin: 0px;
   padding: 0px;
   list-style: none;
   float: left;
}

div#menu li {
   position: relative;
   margin: 0px;
   padding: 0px;
   display: block;
   float: left;
   z-index: 5;
   font-weight: bold;
}

div#menu li a, #menu li span.separator {
   height: 22px;
   display: block;
   float: left;
   line-height: 18px;
   text-decoration: none;
   color: #FFFFFF;
}

div#menu li span {
   display: block;
}

div#menu li span {
   background-repeat: no-repeat;
   background-position: 95% 0px;
}

div#menu a:hover, div#menu span.separator:hover, div#menu span.sfhover {
   color: #D2D2D2;
}

div#menu li.active {
   font-weight: bold;
}

div#menu li.active ul {
   font-weight: normal;
}

div#menu li.parent span.separator {
   cursor: pointer;
}


div#menu ul.menu {
   padding-right: 1px;
   background: url(images/catbg.jpg) #88A6C0 repeat-x; /* Change your mainmenu background color/image here */
}

div#menu li.level1 {
   background: url('images/sep_white.png') no-repeat 0 0;
}

div#menu a.level1, div#menu span.level1 {
   background: url('images/sep_black.png') no-repeat 100% 0;
   color: #FFFFFF; /*Change your menu link color in here*/
   font-size: 80%; /*Change your menu font size in here*/
     
}

div#menu a.level1 span, div#menu span.level1 span {
   padding: 3px 6px 0px 6px;
}

div#menu li:hover a.level1, div#menu li.sfhover a.level1, div#menu li:hover span.level1, div#menu li.sfhover span.level1 {
   color: #CFD7DE;
}

div#menu li.active a.level1, div#menu li.active span.level1 {
   color: #aa1428;  /*Change your menu link hover color in here*/
   font-weight: bold;
}


div#menu a.level1 span.title, div#menu span.level1 span.title{
   padding: 0px;
}


div#menu a.level1 span.sub, div#menu span.level1 span.sub {
   padding: 0px;
   font-size: 60%;
   font-weight: normal;
   color: #969696;
   margin-top: -6px;
   line-height: 10px;
}


div#menu li:hover a.level1 span.sub, div#menu li:hover span.level1 span.sub, div#menu li.sfhover a.level1 span.sub, div#menu li.sfhover span.level1 span.sub {
   color: #ffffff;
}


div#menu ul.menu ul {
   position: absolute;
   top: 22px;
   left: -999em;
   width: 165px;
        font-size: 88%;
}

div#menu li:hover ul, div#menu li.sfhover ul {
   left: 0px;
   z-index: 100;
}

div#menu li.level1 li {
      width: 100%;
   text-indent: 15px;
}


div#menu li.level1 li a, div#menu li.level1 li span.separator{
   height: 25px;
   padding: 0px;
   margin: 0px 1px;;
   background: #89A7C1; /*Change your submenu background color in here*/
   float: none;
   display: block;
   line-height: 25px
}

./Themes/default/index.template.php
Quote
<div id="main_menu">
      <ul class="clearfix">';

   foreach ($context['menu_buttons'] as $act => $button)
   {
      echo '
         <li id="button_', $act, '">
            <a', $button['active_button'] ? ' class="active"' : '', ' title="', $act , '" href="', $button['href'], '">
               <span', isset($button['is_last']) ? ' class="last"' : '', '>', ($button['active_button'] ? '<em>' : ''), $button['title'], ($button['active_button'] ? '</em>' : ''), '</span>
            </a>
         </li>';
   }

   echo '
      </ul>
   </div>';

reemplazar por
Quote
<div id="menu">
        <ul class="menu">';

    //    Go through each of the main menu buttons.
    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
            <li class="level1"><a href="', $button['href'], '" class="level1"><span><span class="title">' , $button['title'] , '</span></span></a>';
          //    Does this button have any subbuttons?
        if(!empty($button['sub_buttons']))
        {
            echo '
            <ul class="level2">';
            foreach($button['sub_buttons'] as $sub_button)
                    echo '
                <li class="level2"><a href="', $sub_button['href'], '" class="level2"><span>' , $sub_button['title'] , '</span></a></li>';
            echo '
            </ul>';
        }
        echo '
            </li>';
    }
   
    echo '
        </ul>
    </div>';

subir a la carpeta ./Themes/default/images las 2 imagenes adjuntas y listo.

Advertisement: