Salve ragazzi,
mi sono recentemente imbattuto in un semplice problema : come poter realizzare un menu con categorie e sottocategorie in maniera dinamica.
Navigando nella rete, ho trovato molte soluzioni, alcune da scartare, altre molto complesse.
Ne ho trovata tuttavia una, che mi è parsa molto semplice e allo stesso tempo funzionale.
Di conseguenza, me la sono studiata e apportando alcune modifiche , sono riuscito a sistemarla in un modo quasi standard per cio che riguarda la realizzazione di un menu multilevel.
Allora, andiamo a cominciare.Il test viene effettuato in locale tramite l'utilizzo di wamp server.
Se preferite, potete utilizzare easyphp.Io personalmente preferisco wamp.
1 . Creazione databaseAttiviamo wamp server ed accediamo alla pagina :
http://localhost/phpmyadmin/;
Creiamo il nostro database : menu_categorie1 ;
Clicchiamo sulla linguetta : SQL ;
Copiamo il seguente codice e lo incolliamo nella text area dove inserire la query :
Codice:
-- --------------------------------------------------------
--
-- Struttura della tabella `categories`
--
CREATE TABLE IF NOT EXISTS `categories` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(100) NOT NULL,
`parent` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=17 ;
--
-- Dump dei dati per la tabella `categories`
--
2 . Inserimento dati nel databaseUna volta eseguita la creazione della tabella categories, procediamo all'inserimento di alcuni dati, che ci serviranno come esempio concreto nella visualizzazione finale del risultato.
Sempre da phpmyadmin, riandate sulla linguetta SQL.
Copiate ed incollate il codice qui di seguito.
Codice:
--
-- Dump dei dati per la tabella `categories`
--
INSERT INTO `categories` (`id`, `name`, `parent`) VALUES
(1, 'Web development', 0),
(2, 'Application development', 0),
(3, 'Linux', 0),
(4, 'Misc', 0),
(5, 'Php', 1),
(6, 'Mysql', 1),
(7, 'Javascript', 1),
(8, 'CSS', 1),
(9, 'C plus plus', 2),
(10, 'wxWidgets', 2),
(11, 'Tutorials', 3),
(12, 'My scripts', 4),
(13, 'semplici scripts', 9),
(14, 'ciclo if', 13),
(16, 'ajax', 0);
Per quanto riguarda il database, abbiamo finito.
L'esempio è molto semplice.Andiamo avanti.
3 . Creazione file config.inc.phpNella cartella WWW di wampserver, creaiamo questa altra directory : menu_categorie1.
Al suo interno, creiamo un nuovo file : config.inc.php.
Copiate ed incollate il seguente codice :
Codice:
<?php
$db_host = "localhost";
$db_user = "root";
$db_password = "";
$db_database ="menu_categorie1";
$db_tabella ="menu";
$connessione = mysql_connect($db_host, $db_user,$db_password);
if(!$connessione)
{
echo"Impossibile connettersi al database:".mysql_error();
exit;
}
if(!mysql_select_db($db_database))
{
echo"Impossibile accedere al database selezionato $db_database:".mysql_error();
exit;
}
?>
Salvate e chiudete il file.
4 . Creazione file function.inc.phpAdesso andiamo a creare un secondo file : funcition.inc.php, nella stessa cartella : menu_cateogire1.
Copiate ed incollate il seguente codice :
Codice:
<?php
function generate_menu($parent)
{
global $menu_array;
if($parent == 0)
{
$ul_value ='<ul class="root_menu">';
$ul_value .="\n";
}
else
{
$ul_value='<ul class="testulnested">';
$ul_value.="\n";
}
$has_childs = false;
foreach($menu_array as $key => $value)
{
if ($value['parent'] == $parent)
{
if ($has_childs == false)
{
$has_childs = true;
echo $ul_value;
}
$valore = check_child($key);
if($valore >=1)
{
echo '<li><a class="image" href="#'.$value['name'] . '/">' . $value['name'].'</a>';
echo"\n\n";
}
else
{
echo '<li class="no_image"><a href="#'.$value['name'] . '/">' . $value['name'].'</a>';
echo"\n\n";
}
generate_menu($key);
//call function again to generate nested list for subcategories belonging to this category
echo '</li>';
echo"\n";
}
}
if ($has_childs == true)
{
echo'</ul>';
}
}
function check_child($index){
$query = mysql_query("SELECT count(id) as quanti FROM categories where parent='$index'");
$data = mysql_fetch_array($query);
$valore = $data['quanti'];
return $valore;
}
?>
Salviamo il file e chiudiamo.
Abbiamo quasi finito.....
5 . Creazione file style.cssSempre nella cartella menu_categorie1, creiamo il foglio di stile.
Copiare ed incollare il seguente codice :
Codice:
ul.root_menu ul.testulnested{
border:0px solid #990000;
list-style: none;
position:absolute;
left: 170px;
top: 0;
display: none;
width: 180px;
margin-top: 0px;
padding:0px 2px 2px 0px;
}
ul.testulnested li ul.testulnested
{
list-style: none;
position:absolute;
left: 170px;
top: 0;
display: none;
width: 170px;
margin-top: 0px;
padding:0px 2px 2px 0px;
}
ul.root_menu li:hover>ul{display:block}
ul.root_menu ul{position: absolute;left:-1px;top:98%;}
ul.root_menu ul ul{position: absolute;left:98%;top:-2px;}
ul.root_menu,ul.root_menu ul {
margin:0px;
list-style:none;
padding:0px 0px 0px 0px;
background: #369;
background-repeat:repeat;
border:0px solid #000000;
}
ul.root_menu {
display:block;
zoom:1;
width:180px;
margin: 20px 0 0 8px;
}
ul.root_menu ul{
width:180px;
}
ul.root_menu li{
display:block;
margin:0px 0px 0px 0px;
width:170px;
font-size:0px;
}
ul.root_menu li a.image {
background-image:url(images/freccia.gif);
background-position:right center;
background-repeat: no-repeat;
}
ul.root_menu li a.image:hover {
background-image:url(images/freccia.gif);
background-position:right center;
background-repeat: no-repeat;
}
ul.root_menu a{
display:block;
vertical-align:middle;
margin:0;
background: #369;
border:0px solid #6655ff;
text-align:left;
text-decoration:none;
padding-left:8px;
height:15px;
font:normal 11px Verdana;
color: #ffffff;
text-decoration:none;
padding-top: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #467bbe;
}
ul.root_menu ul a {
text-align:left;
white-space:nowrap;
}
ul.root_menu li:hover{
position:relative;
}
ul.root_menu li a:hover{
position:relative;
background-color:#4792E6;
border:0px solid #665500
font:normal 11px Verdana;
color: #000000;
text-decoration:none;
}
6 . Creazione file index.phpCreiamo adesso il nostro file index.php.
Copiare ed incollare il seguente codice:
Codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Menu multilivello dinamico con css, php e mysql</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php
include "config.inc.php";
include "function.inc.php";
$query = mysql_query('SELECT * FROM categories');
while ( $row = mysql_fetch_assoc($query) )
{
$menu_array[$row['id']] = array('name' => $row['name'],'parent' => $row['parent']);
}
generate_menu(0);
?>
</body>
</html>
Salviamo e chiudiamo il file.
A questo punto non rimane che andare su
http://localhost/menu_categorie1/index.phpe guardare il risultato.
NOTA: Sempre nella cartella menu_categorie1, va inserita una directory: images che contiene una gif nominata freccia.gif. Se cercate nella rete o ne avete gia una, le dimensioni sono 11x11.
Questo è il risultato finale:
Un saluto a tutto lo staff ed agli utenti di questo forum.
A presto.
Forum
Login
Iscriviti
FAQ
Cerca
