Horizontaal drop-out menu
ik heb zelf een script geschreven waarmee door middel van php een menu wordt opgebouwd. Er wordt gebruikt gemaakt van een array waarin je je menu opties kunt zetten. Dit script zorgt er voor dat er een net menu wordt gemaakt zoals onderstaand voorbeeld:
Code (php)
1
2
3
4
5
2
3
4
5
<ul>
<li><a href="Websiteurl">Item1</a></li>
<li><a href="Websiteurl">Item2</a></li>
<li><a href="Websiteurl">Item3</a></li>
</ul>
<li><a href="Websiteurl">Item1</a></li>
<li><a href="Websiteurl">Item2</a></li>
<li><a href="Websiteurl">Item3</a></li>
</ul>
De php code hiervoor is:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<ul class="menu">
<?php
$aPages = array('Item1', 'Item2', 'Item3'); // De pagina's in die in het menu moeten verschijnen
foreach($aPages as $page){
$current = ((!empty($_GET['pagina']) && in_array($_GET['pagina'], $aPages) && $_GET['pagina'] == $page) || (!isset($_GET['pagina']) && $page == 'Home'))? ' class="current"':'';
echo '<li'.$current.'><a href="?pagina='.$page.'">'.$page.'</a></li>'.PHP_EOL;
}
?>
</ul>
<?php
$aPages = array('Item1', 'Item2', 'Item3'); // De pagina's in die in het menu moeten verschijnen
foreach($aPages as $page){
$current = ((!empty($_GET['pagina']) && in_array($_GET['pagina'], $aPages) && $_GET['pagina'] == $page) || (!isset($_GET['pagina']) && $page == 'Home'))? ' class="current"':'';
echo '<li'.$current.'><a href="?pagina='.$page.'">'.$page.'</a></li>'.PHP_EOL;
}
?>
</ul>
Nu wil ik dit menu echter uitbreiden. Wat ik dus extra wil maken zijn submenu's in deze menu structuur. Kan iemand mij een stuk opweg helpen? Je zult ergens moeten invoeren welke hoofdmenu-opties er zijn en welke opties een submenu zijn, en waarbij deze submenu's horen, denk ik.
(Ik bedoel een menu zoals hier bovenaan bij phphulp.nl ook gebruikt wordt.) Alvast hartstikke bedankt.
Gewijzigd op 01/01/1970 01:00:00 door Tom
zodra ik een voorbeeld heb post ik heb even voor je.
edit: Dit is 1. jQeury:
http://be.twixt.us/jquery/suckerFish.php
Mischien heb je er wat aan: wpQeury
http://nettuts.com/javascript-ajax/tabbed-content-using-jquery-and-wp_query/
Gewijzigd op 01/01/1970 01:00:00 door Bart Tuma
Ik denk dat hij meer bedoeld hoe hij kan zorgen dat dat op de juiste manier opgebouwd wordt. Daarvoor kan hij zoeken op recursief of recursieve array. (in het nederlands dan, maar het kan ook handig zijn om op de engelse variant te zoeken)
door Recursief uitlezen maakt het niet uit hoe diep een array is.
Ik dacht bijv zoiets:
Code (php)
1
2
3
2
3
$aPages = array('Item1', 'Item2', 'Item3'); // De pagina's in die in het menu moeten verschijnen
$aSubs = array('sub1', 'sub2', 'sub3'); // Hier de sub-items
$aSubs = array('sub1', 'sub2', 'sub3'); // Hier de sub-items
Alleen moet je dus deze aan elkaar linken of iets dergelijks en dan dus in een volgende lus laten bekijken waar het menu moet worden aangepast.
daarom wees ik je naar een recursieve functie. Voor het werken met een submenu kan je ook prima met multidimensionale arrays werken:
Code (php)
1
$aPages= array('Item1' => array('sub1','sub2'),'Item2');
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<?php
/**
* @author Robert Deiman
* @copyright 2008
*/
function generate_menu($array_items)
{
if(!isset($return_string)){
$return_string = '<ul>';
}
foreach($array_items AS $key => $value)
{
if(!is_array($value))
{
$return_string .= '<li>'.$value.'</li>';
}
if(is_array($value))
{
$return_string .= '<li>'.$key.'</li>';
$return_string .= generate_menu($value);
}
}
$return_string.= '</ul>';
return $return_string;
}
$menu = array('home','nieuws'=>array('archief','laatste','recent'=>array('vandaag','gisteren')),'contact');
echo generate_menu($menu);
?>
/**
* @author Robert Deiman
* @copyright 2008
*/
function generate_menu($array_items)
{
if(!isset($return_string)){
$return_string = '<ul>';
}
foreach($array_items AS $key => $value)
{
if(!is_array($value))
{
$return_string .= '<li>'.$value.'</li>';
}
if(is_array($value))
{
$return_string .= '<li>'.$key.'</li>';
$return_string .= generate_menu($value);
}
}
$return_string.= '</ul>';
return $return_string;
}
$menu = array('home','nieuws'=>array('archief','laatste','recent'=>array('vandaag','gisteren')),'contact');
echo generate_menu($menu);
?>
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
In ieder geval bedankt dat je met me meedenkt !! toppie!
http://www.phpinsider.com/smarty-forum/viewtopic.php?t=11686
ps. voor degene met css oplossingen. Dit is niet wat ik zoek. Dit heb ik al onder de knie, en ook al werkend. Maar een menu maken en helemaal uittypen in html kost meer tijd. Wanneer je een php script hebt scheelt dit tijd :) En werkt het fijner.
Mag ik vragen wat er nog niet werkt? ;) Ben wel benieuwd eigenlijk want wat ik net heb bekeken in de bron die die genereert klopt helemaal. Als er nog een foutje in zit, wil ik die er natuurlijk ook wel uithalen. :)
Code (php)
1
$menu = array('home','nieuws'=>array('archief','laatste', array('vandaag','gisteren')),'contact');
moet zijn
Code (php)
1
$menu = array('home','nieuws'=>array('archief','laatste'=>array('vandaag','gisteren')),'contact');
Bij de eerste code komt er nog "2" te staan (dus de hoeveelheid in de 2e geneste array. Nu is hij goed. Ik zal hem nog wel uitbreiden en dan het complete script hier posten (inclusief css). Zodat mensen hem kunnen gebruiken. Ik wil hem zo uitbreiden dat elke sub-items de volgende url krijgen:
?pagina=item1§ion=subitem1 . Maar daar kom ik wel uit denk.
Complete code nu dus:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?
function generate_menu($array_items)
{
if(!isset($return_string)){
$return_string = '<ul>';
}
foreach($array_items AS $key => $value)
{
if(!is_array($value))
{
$return_string .= '<li><a href="?pagina='.$value.'">'.$value.'</li>';
}
if(is_array($value))
{
$return_string .= '<li><a href="?pagina='.$key.'">'.$key.'</li>';
$return_string .= generate_menu($value);
}
}
$return_string .= '</ul>';
return $return_string;
}
$menu = array('home','nieuws'=>array('archief','laatste'=>array('vandaag','gisteren')),'contact');
echo generate_menu($menu);
?>
function generate_menu($array_items)
{
if(!isset($return_string)){
$return_string = '<ul>';
}
foreach($array_items AS $key => $value)
{
if(!is_array($value))
{
$return_string .= '<li><a href="?pagina='.$value.'">'.$value.'</li>';
}
if(is_array($value))
{
$return_string .= '<li><a href="?pagina='.$key.'">'.$key.'</li>';
$return_string .= generate_menu($value);
}
}
$return_string .= '</ul>';
return $return_string;
}
$menu = array('home','nieuws'=>array('archief','laatste'=>array('vandaag','gisteren')),'contact');
echo generate_menu($menu);
?>
Altijd handig :)
In ieder geval bedankt voor je zetje Robert, ik stel het erg op prijs!
Gewijzigd op 01/01/1970 01:00:00 door Tom
Het volgende zou ik graag willen: ?pagina=item1§ion=subitem1
Ook werkt het niet helemaal met css, het eerst item waar subitems onder hangen moet de class: top-parent krijgen. De items die een subitem van een subitem zijn moeten echter de class: parent krijgen.
Heb het geprobeerd met de code om het zo aan de praat te krijgen, maar dit was niet zo heel eenvoudig. Is er misschien een oplossing om dit met een javascript toe te voegen oid?
Alvast bedankt
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<?php
$menu = array('home','nieuws'=>array('archief','laatste'=>array('vandaag','gisteren')),'contact');
function generate_menu($array_items)
{
if(!isset($return_string)){
$return_string = '<ul>';
}
foreach($array_items AS $key => $value)
{
if(!is_array($value))
{
$return_string .= '<li><a href="?pagina='.$value.'">'.$value.'</li>';
}
if(is_array($value))
{
$return_string .= '<li><a href="?pagina='.$key.'">'.$key.'</li>';
$return_string .= generate_menu($value);
}
}
$return_string .= '</ul>';
return $return_string;
}
$menu = array('home','nieuws'=>array('archief','laatste'=>array('vandaag','gisteren')),'contact');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="mootools/mootools.js"></script>
<script type="text/javascript">
window.addEvent ('domready', function () {
$$('ul ul ul li a').each (function (item) {
item.setStyle ('color', 'red');
});
$$('ul ul li a').each (function (item) {
if (item.getStyle ('color') != 'red') {
item.setStyle ('color', 'green');
}
});
});
</script>
</head>
<body>
<?php
echo generate_menu($menu);
?>
</body>
</html>
$menu = array('home','nieuws'=>array('archief','laatste'=>array('vandaag','gisteren')),'contact');
function generate_menu($array_items)
{
if(!isset($return_string)){
$return_string = '<ul>';
}
foreach($array_items AS $key => $value)
{
if(!is_array($value))
{
$return_string .= '<li><a href="?pagina='.$value.'">'.$value.'</li>';
}
if(is_array($value))
{
$return_string .= '<li><a href="?pagina='.$key.'">'.$key.'</li>';
$return_string .= generate_menu($value);
}
}
$return_string .= '</ul>';
return $return_string;
}
$menu = array('home','nieuws'=>array('archief','laatste'=>array('vandaag','gisteren')),'contact');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="mootools/mootools.js"></script>
<script type="text/javascript">
window.addEvent ('domready', function () {
$$('ul ul ul li a').each (function (item) {
item.setStyle ('color', 'red');
});
$$('ul ul li a').each (function (item) {
if (item.getStyle ('color') != 'red') {
item.setStyle ('color', 'green');
}
});
});
</script>
</head>
<body>
<?php
echo generate_menu($menu);
?>
</body>
</html>