Foros del Web - Ver Mensaje Individual

-Defero- · #10 (**permalink**) 01/08/2007, 09:41

Bueno, aquí os traigo lo que he hecho hasta ahora. Aún falta por pulir algunos detalles, mejorar la estética, y lo más importante, falta añadirle un formulario para poder añadir cómodamente nuevas entradas al menú, pero en este momento ya es operativo. El código:

Código PHP:

 
<html>
<head>
<script type="text/javascript">
<!--
function desplegar(menu)
{
obj = document.getElementById(menu);
if( obj.style.display != '' ) obj.style.display='';
else obj.style.display='none';
}
-->
</script>
<style type="text/css" media="all">
body 
    {
    background-color: #ddd;
/*    margin-left: 20px;
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 10px;
*/
    }
p,font,th,td
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #000;
    font-size: 10pt;
    text-align: justify;
    margin-left:1em;
    margin-right:1em;
    }
ul, li
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: white;
    background-color: black;
    font-size: 9pt;
    list-style: none;
    margin: 0;
    padding: 2px;
    }
ul ul li
    {
    padding-left: 10px;
    border: 1px solid black;
    background-color: #aaa;
    color: #000;
    margin-left: 10px;
    }
ul ul li:hover
    {
    background-color: #888;
    }

ul ul ul li
    {
    padding-left: 10px;
    border: 1px solid black;
    background-color: white;
    color: #000;
    margin-left: 20px;
    }
ul ul ul li:hover
    {
    background-color: #ccc;
    }

ul.trucos
    {
    background-color: transparent;
    }
ul.trucos li
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: black;
    background-color: white;
    font-size: 11pt;
    list-style: none;
    margin: 10px;
    padding: 5px;
    }
a:link,a:active,a:visited
    {
    color: #688fdd;
    text-decoration: none;
/*    font-weight: bold; */
    }
a:hover
    {
    color: #357bf4;
    text-decoration: underline;
    }
</style>
</head>
<body>

<?
    function geraMenuAuto($id = 0)
    {
        $sql = "SELECT * FROM menu WHERE id_menu_pai = '" . $id . "' ORDER BY id_menu";
        $conexao = mysql_connect("servidor", "usuario", "clave"); //MODIFIQUE ESTA LINHA COM OS DADOS DO SEU SERVIDOR
        $bd = mysql_select_db("menu", $conexao); //MODIFIQUE ESTA LINHA COM O NOME DO SEU BANCO DE DADOS
        $query = mysql_query($sql);
        mysql_close($conexao);
        $numLinhas = mysql_num_rows($query);
        for($i = 0; $i < $numLinhas; $i++)
        {
            list($id_menu, $id_menu_pai, $titulo, $link) = mysql_fetch_row($query);

          
            if (existeFilho($id_menu) > 0)
                {
                  $var .= "    <li style=\"cursor: pointer;\" onclick=\"desplegar('$titulo');\">$titulo ";
                $var .= "<span style=\"position: absolute; right: 15px;\"><img src=\"dot.png\"></span></li>\n\n    <ul id=\"$titulo\" style=\"display: none\">\n" . geraMenuAuto($id_menu) . "    </ul>\n\n";
                }
            else
                    $var .= "    <li style=\"cursor: pointer;\" onclick=\"desplegar('$titulo');\"><a href=\"$link\" target=\"_blank\">$titulo</a> ";
            if ($i != $numLinhas -1)
                $var .= "</li>\n";
            else
                $var .= "";
        }
        if (strlen($var) > 0)
            return $var;
        else
            return false;
    }
    function existeFilho($id)
    {
        $sql = "SELECT * FROM menu WHERE id_menu_pai = '" . $id . "' ORDER BY id_menu_pai";
        $conexao = mysql_connect("localhost", "foroepj", "clave"); //MODIFIQUE ESTA LINHA COM OS DADOS DO SEU SERVIDOR
        $bd = mysql_select_db("menu", $conexao); //MODIFIQUE ESTA LINHA COM O NOME DO SEU BANCO DE DADOS
        $query = mysql_query($sql);
        mysql_close($conexao);
        return mysql_num_rows($query);
    }
?>

<ul style="width: 300px; position: absolute; left: 10px;">
<?

echo geraMenuAuto();

?>
</ul>
</body>
</html>

De momento podéis probar metiendo esto en la base de datos:

Código:

CREATE TABLE `menu` (
  `id_menu` int(11) NOT NULL auto_increment,
  `id_menu_pai` int(11) NOT NULL default '0',
  `titulo` varchar(100) NOT NULL,
  `link` varchar(200) NOT NULL,
  PRIMARY KEY  (`id_menu`)
) ENGINE=MyISAM AUTO_INCREMENT=19 DEFAULT CHARSET=latin1 AUTO_INCREMENT=19 ;

-- 
-- Volcar la base de datos para la tabla `menu`
-- 

INSERT INTO `menu` VALUES (4, 1, 'foro Photoshop', 'http://cursophotoshop.foro.st');
INSERT INTO `menu` VALUES (3, 1, 'Forosdelweb (GNU/Linux)', 'http://www.forosdelweb.com/forumdisplay.php?forumid=41');
INSERT INTO `menu` VALUES (2, 1, 'Barrapunto', 'http://www.barrapunto.com');
INSERT INTO `menu` VALUES (1, 0, 'Comunidades y visitas diarias', '');
INSERT INTO `menu` VALUES (5, 1, 'apocalipsis', 'http://mundocadaver.livejournal.com/');
INSERT INTO `menu` VALUES (6, 0, 'Buscadores y fuentes de información', '');
INSERT INTO `menu` VALUES (7, 6, 'Google', '');
INSERT INTO `menu` VALUES (8, 7, 'Google-es', 'http://www.google.es');
INSERT INTO `menu` VALUES (9, 7, 'GoogleMaps', 'http://maps.google.es');
INSERT INTO `menu` VALUES (10, 7, 'GoogleImages', 'http://images.google.es');
INSERT INTO `menu` VALUES (11, 7, 'GoogleNews', 'http://news.google.es');
INSERT INTO `menu` VALUES (12, 6, 'Wikipedia', '');
INSERT INTO `menu` VALUES (13, 12, 'Wikipedia-es', 'http://es.wikipedia.org');
INSERT INTO `menu` VALUES (14, 12, 'Wikipedia-eu', 'http://eu.wikipedia.org');
INSERT INTO `menu` VALUES (15, 6, 'RAE', '');
INSERT INTO `menu` VALUES (16, 15, 'RAE', 'http://www.rae.es');
INSERT INTO `menu` VALUES (17, 15, 'RAE2', 'http://www.rae2.es');
INSERT INTO `menu` VALUES (18, 6, 'Tirantonline', 'http://www.tirantonline.com');

Añadidle un icono "dot.png" para que el usuario sepa qué elementos del menú son desplegables.