PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
T

Horizontaal drop-out menu

Door Tom op 21-07-2008 17:03
1.592 views
Beste mede-scripter,

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:


<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:

          <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>


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.
T
Tom
29-07-2008 19:23
Ik kom er niet uit om de nette url te krijgen bij een genest item. Iemand die mij hierbij kan helpen?

Het volgende zou ik graag willen: ?pagina=item1&section=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
Jan Koehoorn
29-07-2008 19:55
Check even dit voorbeeld. Ik heb het eerste niveau van je menu geen style gegeven, en het tweede en het derde niveau elk zijn eigen style:

<?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>

Reageren

Inloggen om te reageren