[PHP] submenu

[bkersten]

Hallo,

Onderstaand script heb ik nu voor het menu en het submenu.

Ik heb een MySQL tabel: pages
met onder andere de velden: id, naam, titel, gegevens, enz.

Ik heb ook een MySQL tabel: submenu
met onder andere de velden: id, page_id, naam, titel, enz.

"page_id" is hetzelfde als "id" in de "pages" tabel.
Dus als er in de "pages" tabel een pagina bestaat met als "id" 4, en er is een submenu voor aangemaakt, dan staat er in de tabel "submenu" een pagina met als "page_id" 4.

Nu wil ik het volgende bereiken:
Als je over een menu item gaat, moet het submenu eronder verschijnen. (Als er tenminste voor dat menu item, submenu's zijn)
Maar aangezien er in de link ook dit staat: onmouseover="javascript:showsubmenu(1)" moet voor elk submenu dat er is, de 1 verhoogt worden. Afhankelijk van hoeveel submenu's er zijn. De submenu's staan onderaan in de code. Nu nog als HTML, maar deze moeten dus ook uit de database gehaald worden per menu item.

Ik krijg dit geheel niet voor elkaar. Ik heb al vanalles geprobeerd.
Kan iemand mij misschien helpen? Of weet iemand een betere of makkelijkere manier voor de submenu's?

Heel erg bedankt alvast!
Ik hoop dat ik het een beetje duidelijk heb uitgelegd.


<script type="text/javascript">

function showsubmenu(id){
submenu=document.getElementById('s'+id);
for(i=1;i<=3;i++){
if(i==id){
submenu.style.display="block";
} else{
document.getElementById('s'+i).style.display="none";
}
}
}

</script>

<style type="text/css">

#s2, #s3{display:none;}

</style>

<div id="navigation">
<ul id="mymenu">

<?php

$getpages = "SELECT * FROM pages WHERE verborgen = '0' AND menu = 'boven' ORDER BY order_id ASC";
$getpages = mysql_query($getpages) or die( mysql_error() );

while( $pages = mysql_fetch_array( $getpages ) )
{

?>

<li><a href="<?php echo $script_url.'index.php?p='.$pages['id']; ?>" onmouseover="javascript:showsubmenu(1)" class="<?php echo ($pages['id'] == mysql_escape_string($_GET['p'])) ? "menuactive" : "menupassive" ?>"><?php echo $pages['naam']; ?></a></li>

<?php

}

?>

</ul>
</div>

<div id="sublinks">
<ul id="s1">
<li><a href="#">General</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">News</a></li>
</ul>
</div>

[Bargok]

Zet ze allemaal in 1 tabel en voeg een parent_id toe. Deze is null indien het een hoofditem is, en anders is het de page_id van de parent ;). Vervolgens kun je deze met een JOIN query ophalen en een array opbouwen.

Zal dit later vanavond even uitbreiden (ivm tijdgebrek). Hopelijk geeft dit alvast een duwtje!

[WernerL]

Ik ben bang dat dit niet met 1 query op te lossen is als je alles in 1 tabel zet. Maar we wachten bargok zijn reactie dan maar af. :-)

Zoals het in mijn CMS gebeurd (ook alles in 1 tabel) doe ik het zo:



$sql = $mysql->prepare("SELECT * FROM menuitems WHERE parentid = NULL");

while($row = $sql->fetch()) {
print $row->titel;

$sql2 = $mysql->prepare("SELECT * FROM menuitems WHERE parentid = " . $row->id);
while($row2 = $sql2->fetch()) {
print $row->titel;
}

}


En dan nog de <li> tags etc erbij maar dit is even heel simpel neergezet.

Verder, als je wil dat de subitems bij een mouseover pas zichtbaar worden kun je je lijst zo opbouwen:


<ul>
<li>item1</li>
<li>item2
<ul>
<li>subitem1</li>
<li>subitem2</li>
</ul>
</li>
</ul>


In je CSS kun je dan display op inline zetten in de ul a {}. en standaard zet je dan il lu {} op none.

Dus:


li a {
display: inline;
}

ul li {
display: none;
}


Ik geloof zoiets.

[bkersten]

Sorry, ik snap niet echt wat jullie bedoelen.
Wat is parentid bijvoorbeeld? En hoe zou ik dit in mijn script kunnen integreren?

[WernerL]

Parentid is de id van de hoofditem.

Dus je tabel gaat er zo uitzien:
menu:
id (primairy key)
titel
parentid (indien dit een subitem is krijgt deze een id die verwijst naar een andere id in deze tabel)

Je tabel zou zo'n inhoud hebben dan:

|id| --- |titel| --- |parentid|
1 hoofditem null
2 subitem1 1
3 subitem3 1

.. etc


Voor verdere uitleg heb ik net mijn vorige post gewijzigd.

[bkersten]

Oke, ik denk dat ik het ongeveer snap.
Ik ga even wat proberen!

[bkersten]

Maar als je nu de menu items wilt ophalen?
Hoe kan ik dit dan het beste doen?

Want hoe kan ik er bijvoorbeeld voor zorgen dat niet de sub-pagina's ook in het hoofdmenu geladen worden. Maar alleen onder het desbetreffende hoofdmenu-item.

[WernerL]

Dan zul je dit stukje code in mijn vorige lange post:


$sql2 = $mysql->prepare("SELECT * FROM menuitems WHERE parentid = " . $row->id);
while($row2 = $sql2->fetch()) {
print $row->titel;
}


moeten verplaatsen naar <div id="sublinks">

En vervolgens $row->id moeten vervangen met $id;
En nog dit boven de query zetten:
$id = intval($_GET['id'];

En dan alle hoofditems laten verwijzen naar $_SERVER['PHP_SELF'] . "?id=" . $row->id
In de code die in de hoofditems div staat. :-)

Hoop dat dit duidelijk is, moet nml zo gaan eten dus even geen tijd om uitgebreid uit te gaan leggen. Straks zal ik nog even meer uitleg geven als je er niet uit komt.

En als je niet wilt dat de pagina refresht zul je met AJAX aan de gang moeten.

Tenminste, als ik goed begrijp wat jij nu exact wil.

[Bargok]

Werner, schaam jezelf voor zulke onefficiente nutteloze queries! ;).

Voorbeeld van de tabel:

PageId, PageName, ParentId
1 Hoofditem NULL
2 Subitem1 1
3 Subitem2 2

Voorbeeld code voor een ENKEL diepte menu (hoofdmenu / submenu):


$rResult = mysql_query("SELECT * FROM pages");
$aMenu = array();
while($aRow = mysql_fetch_array($rResult))
{
if ($aRow['ParentId'] === null)
{
$aMenu[$aRow['PageId']]['MainName'] = $aRow['PageName'];
}
else
{
$aMenu[$aRow['ParentId']]['Subs'][$aRow['PageId']]['Name'] = $aRow['PageName'];
}
}


Vervolgens heb je een array met menu/submenu uit een enkele tabel met 1 query.
Fouten zijn overigens daargelaten aangezien ik soep aan het eten ben ;). Het gaat om het idee.

Voor een "onbekende" diepte (menu -> sub -> sub -> ? -> ?) heb ik ook een algoritme, maar dat heb ik thuis niet bij de hand.

[bkersten]

Oke, heb nu onderstaand script, maar nu komt er niets meer te staan :S
En nu snap ik er eerlijk gezegd niet meer veel van... :P

<style type="text/css">

li a {
display: inline;
}

ul li {
display: none;
}

</style>

<div id="navigation">
<ul id="mymenu">

<?php

$getpages = "SELECT * FROM pages WHERE verborgen = '0' AND menu = 'boven' AND parentid = 'NULL'";
$getpages = mysql_query($getpages) or die( mysql_error() );

while( $pages = mysql_fetch_array( $getpages ) )
{

?>

<li>
<a href="<?php echo $_SERVER['PHP_SELF'] . "?id=" . $pages['id']; ?>" class="<?php echo ($pages['id'] == mysql_escape_string($_GET['p'])) ? "menuactive" : "menupassive" ?>"><?php echo $pages['naam']; ?></a>
</li>

<?php

}

?>

</ul>
</div>

<div id="sublinks">

<?php

$id = intval($_GET['id'];

$sql2 = $mysql->prepare("SELECT * FROM pages WHERE parentid = " . $id);
while($row2 = $sql2->fetch()) {
print $row->titel;
}
?>

</div>

[bkersten]

@Bargok:

Even een paar vragen:

Wat betekend ['Subs'] en ['MainName'] in dit script?

En hoe krijg ik het menu te zien op mijn scherm?:P
Ik snap de code achter $aMenu niet echt...

[WernerL]

Werner, schaam jezelf voor zulke onefficiente nutteloze queries! ;).

Voorbeeld van de tabel:

PageId, PageName, ParentId
1 Hoofditem NULL
2 Subitem1 1
3 Subitem2 2

Voorbeeld code voor een ENKEL diepte menu (hoofdmenu / submenu):


$rResult = mysql_query("SELECT * FROM pages");
$aMenu = array();
while($aRow = mysql_fetch_array($rResult))
{
if ($aRow['ParentId'] === null)
{
$aMenu[$aRow['PageId']]['MainName'] = $aRow['PageName'];
}
else
{
$aMenu[$aRow['ParentId']]['Subs'][$aRow['PageId']]['Name'] = $aRow['PageName'];
}
}


Vervolgens heb je een array met menu/submenu uit een enkele tabel met 1 query.
Fouten zijn overigens daargelaten aangezien ik soep aan het eten ben ;). Het gaat om het idee.

Voor een "onbekende" diepte (menu -> sub -> sub -> ? -> ?) heb ik ook een algoritme, maar dat heb ik thuis niet bij de hand.

Damz ! Waarom heb ik hier niet aan gedacht? *smilley die zichzelf slaat*

briljant. :D Ja zo is idd beter.

@TS: bargok maakt daar een 3d array aan. Wat betekend, een array in een array. :-)

[bkersten]

"3d array aan" ?

Sorry dat ik dit niet echt snap, maar zou iemand dat stukje code even kunnen uitleggen en hoe ik het menu dan uiteindelijk op mijn scherm kan krijgen?? Ik snap het stukje code niet helemaal namelijk.

[mech7]

Als er meerdere submenu items komen.. kan je het beste MPTT gebruiken:

Infp: http://www.sitepoint.com/article/hierarchical-data-database/2

[bkersten]

Ik hoef maar 1 'laag' submenu's te hebben.

Dus: hoofdpagina - subitem.

Kan iemand mij uitleggen hoe dit script werkt en hoe ik ervoor kan zorgen dat het menu ook daadwerkelijk om mijn scherm komt?

$rResult = mysql_query("SELECT * FROM pages");
$aMenu = array();
while($aRow = mysql_fetch_array($rResult))
{
if ($aRow['ParentId'] === null)
{
$aMenu[$aRow['PageId']]['MainName'] = $aRow['PageName'];
}
else
{
$aMenu[$aRow['ParentId']]['Subs'][$aRow['PageId']]['Name'] = $aRow['PageName'];
}
}