Menu dinamico a tendina

**samiel** · 30-08-2011, 22:57

Vorrei creare un menu a tendina ricorrendo solo ai CSS.
Per impostare il menu orizzontale sono partito dal codice
di un menu le cuivoci apribano i sottomenu:

codice:

<div id="navlist_wrapper">
<div id="navlist">
<ul>
<?php 	// creo i titoli lunghi del menu orizzontale
$barmenu=array("home"=>"Home","chisiamo"=>"Chi siamo","attività"=>     "Attività","pensiero"=>"amici","Amici"=>"Opere","link"=>     "Link","blog"=>"Blog","contatti"=>"Contatti");
foreach($barmenu as $vocemenu=>$valore) {
echo '[*]' . "| ";
if ( ( $sezione || $sottosezione ) && ( $vocemenu == $pagina ) ) {
$addstyle = "style='color:#AFAFAF; font-weight:none; text-decoration:none;'"; 		
} else
{ 		$addstyle = ""; 		}
if ($vocemenu == "home" ) {
echo "<a href=\".\" $addstyle>";
} else
{
echo "<a href=\"index.php?pagina=$vocemenu\" $addstyle>";
}
echo $valore;
echo '</a>'."\n";
}
?>[/list]
</div>
</div> </div>

Ipotizziamo che il menu "Chi siamo" debba mostrare delle sottovoci
quando ci passa sopra il mouse (nel CSS ricorro a un effetto hover).
Riporto li codice HTML:

codice:

<div id="hormenu">
 <ul>[*]Menu 1
 <ul>
[*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[*]Submenu 1[/list]
 [*]Menu 2
 <ul>[*]Submenu 2[*]Submenu 2[*]Submenu 2[*]Submenu 2[*]Submenu 2[/list]
  </div>

Come posso dire a PHP di recuperare i submenu?

Grazie
M.

**portapipe** · 31-08-2011, 06:55

Recuperare in che senso? Dal database? O in maniera grafica?
Intanto ho trovato un codice che potrebbe andare(qui ):

codice:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" dir="ltr">
    <head>
    <title>menu</title>
    <style type="text/css" media="screen">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            font: 12px/17px Verdana, sans-serif;
            color: #000;
            background-color: #fff;
        }
        #wrap{
            margin: 50px;
        }
        ul{
            list-style: none;
            text-indent: 0;
            margin: 0;
            padding: 0;
        }
        ul#main li.level1{
            float: left;
            margin: 0 10px;
            width: 75px;
        }
        ul#main li.sub ul{
            display: none;
        }
        ul#main li.sub:hover ul{
            display: block;
        }
        ul#main li.sub:hover ul li{
            display: block;
            float: none;
            margin: 10px 0;
        }
    </style>
    </head>
    <body>
    <div id="wrap">
        <ul id="main">
            <li class="level1">link 1
            <li class="sub level1">link 2
            <ul class="thissub">[*]sub link 2.1[*]sub link 2.2[/list]
            <li class="level1">link 3[/list]
    </div>
    </body>
</html>

**samiel** · 31-08-2011, 10:51

Il mio problema non è l'HTML e il CSS.
In HTML il menu l'ho fatto e funziona.
Il mio problema è il PHP. Il menu è scritto
nel codice stesso (non lo recupero da un db
esterno). Inoltre, mi basta un menu a due livelli.
Ho provato una cose del tipo:

codice:

<div id="container">
<div id="header">
<h1>Circolo Culturale </h1>
<div id="navlist_wrapper">
<div id="hormenu">
<ul>
<?php
$menus = array('main_menu' => array('home' => 'Home',
'chisiamo' => 'Chi Siamo'),
'chisiamo_menu' => array('subLink1' => 'SubLink 1',
'subLink2' => 'SubLink 2')
);
foreach ($menus['main_menu'] as $key => $menu) { //scorre il menu principale
echo $menu."
"; // mostra menu
if (isset($menus[$key."_menu"])) // se esiste una chiave formata
// da nomevoceprincipale_menu allora esiste un submenu
foreach ($menus[$key."_menu"] as $subKey => $submenu) { //scorre il submenu
echo '-->'.$submenu."
"; // mostra il submenu
}
?>[/list]
</div>
</div>
</div>
<?php
if($pagina!="home") include("moduli/submenu.php");
?>

<?php
if(file_exists("$folder/$pagina.php")) include("$folder/$pagina.php");
else include("moduli/nondisp.php");
?>
</div>

ma non funziona :-(

M:

**portapipe** · 31-08-2011, 11:40

Innanzitutto mettiamo il codice tra quadre PHP, NON CODE!

Codice PHP:


<div id="container">

<div id="header">

<h1>Circolo Culturale </h1>

<div id="navlist_wrapper">

<div id="hormenu">

<ul>

<?php

$menus = array('main_menu' => array('home' => 'Home',

'chisiamo' => 'Chi Siamo'),

'chisiamo_menu' => array('subLink1' => 'SubLink 1',

'subLink2' => 'SubLink 2')

);

foreach ($menus['main_menu'] as $key => $menu) { //scorre il menu principale

echo $menu."
"; // mostra menu

if (isset($menus[$key."_menu"])) // se esiste una chiave formata

// da nomevoceprincipale_menu allora esiste un submenu

foreach ($menus[$key."_menu"] as $subKey => $submenu) { //scorre il submenu

echo '-->'.$submenu."
"; // mostra il submenu

}

?>[/list]

</div>

</div>

</div>

<?php

if($pagina!="home") include("moduli/submenu.php");

?>



<?php

if(file_exists("$folder/$pagina.php")) include("$folder/$pagina.php");

else include("moduli/nondisp.php");

?>

</div>

Dopodiché togli la parte in php e scrivi la struttura html base, come ad esempio:

codice:

<ul id="main">
            <li class="level1">link 1
            <li class="sub level1">link 2
            <ul class="thissub">[*]sub link 2.1[*]sub link 2.2[/list]
            <li class="level1">link 3[/list]

Fatto ciò posta il tutto che vediamo il da farsi.

Così com'è viene creato dentro un <ul> un a capo per ogni voce, non una lista, per quello devi prima fare la struttura e poi ci metti in mezzo il codice.

**samiel** · 31-08-2011, 12:05

l'HTML è questo:

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">

<head>

<title><?php echo $titles["$pagina"] ?></title>

<meta name="generator" content="Quanta Plus" />

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="layout.css" />

</head>



<body>



<div id="hormenu"> 

<ul> [*][url="#"]Menu 1[/url] 

<ul> [*][url="#"]Submenu 1[/url][*][url="#"]Submenu 1[/url][*][url="#"]Submenu 1[/url][*][url="#"]Submenu 1[/url][*][url="#"]Submenu 1[/url][/list]

 [*][url="#"]Menu 2[/url] 

<ul> [*][url="#"]Submenu 2[/url][*][url="#"]Submenu 2[/url][*][url="#"]Submenu 2[/url][*][url="#"]Submenu 2[/url][*][url="#"]Submenu 2[/url][/list]

 

</div>



</body>

</html>

e il relativo CSS è questo:

codice:

div#hormenu {
width: 100%;
float: left;
margin: 0;
padding: 0;
border-top: 1px solid black;
background: red;
}

div#hormenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}

div#hormenu li {
width:100px;
float:left;
margin: 0;
padding: 0;
border-right: 1px solid black;
color:black;
}

div#hormenu a {
display: block;
padding: 5px;
color: #000;
text-decoration: none;
}
div#hormenu a:hover {
background-color: #000033;
color: #FFFFFF;
text-decoration: none;
}

div#hormenu li ul {display: none}

div#hormenu li:hover ul {
display: block;
position: absolute;
z-index:1;
width:150px;
padding: 0;
margin: 0 0 0 -1px;
border:1px solid black;
background: white;
}

div#hormenu li li {border: none; width: 150px;}
div#hormenu li li a {padding: 2px 2px 2px 10px;}

Il mio problema è far sì che i sottomenu
risultino come[*] all'interno di una <ul>
a sua volta interna alla <ul> che crea
dinamicamente il menu orizzontale princioale
e che si attivano al passaggio del nouce
(un utilizzo dell'effetto :hover)

M.

Discussione: Menu dinamico a tendina

Strumenti discussione

Ricerca discussione

Visualizza

Menu dinamico a tendina

Permessi di invio