PHP generated menu -> jQuery dropdown menu
Hi!
First of all I wanna say I'm new to this forum.
Anyhow, my problem is that I want a menu, whereas when clicking on a link that has a submenu attached to it, the submenu is rolled out(like the menu is expanding - it's a vertical menu). But there's more to it. Some of the links on the submenu has also a submenu to it, and those I want to be rolled out to the right of the menu, so it's like a second "hovering" menu above the content that is originally to the right of the menu.
I'm not very good at explaining, but hopefully you'll understand. If not, just ask and I'll try to post some images of what I mean.
Anyhow, the problem is the ID's. I don't know how to get that with jQuery in a good way. If you look at my PHP script(an array of links):
As you see, the name of the link is the index in the arrayelement, and the value of the arrayelement is the link to the page.
Each submenu is handled like it got the exact same name as the link that it's attached to, but with a prepend of SUB-. Like this:
Centralantenn is the name of the link, and it points to central.php(for the non-js users). However, it got a submenu attached to it, so when clicking Centralantenn it will show the links in the array of SUB-Centralantenn. Obviously this would also NOT send the user to central.php since that file only exists to output the submenu for the non-js users.
When this is output, it's done like this:
And the sourcecode generated by that, looks like this:
(This is quite long)
Btw, I know you can't have "sub 2", that will be changed later.
Anyway, as you see.. the problem is how can I loop through the ul list of items and then check if the current listitem has a submenu, make it so when you click the current listitem, the submenu is expanded beneath, and then if you click one of those links on the submenu it gets rolled out to the right of the menu "above" the original content that is to the right of the menu(meaning it's not pushing anything to the right)?
Long thread, I apologize for that.
Big thanks to the one(s) that can help me with this! Or possibly show a better way of doing it
First of all I wanna say I'm new to this forum.
Anyhow, my problem is that I want a menu, whereas when clicking on a link that has a submenu attached to it, the submenu is rolled out(like the menu is expanding - it's a vertical menu). But there's more to it. Some of the links on the submenu has also a submenu to it, and those I want to be rolled out to the right of the menu, so it's like a second "hovering" menu above the content that is originally to the right of the menu.
I'm not very good at explaining, but hopefully you'll understand. If not, just ask and I'll try to post some images of what I mean.
Anyhow, the problem is the ID's. I don't know how to get that with jQuery in a good way. If you look at my PHP script(an array of links):
-
<?php
$links = array(
'Senaste nytt' => 'latest.php',
'Medlemmar' => 'members.php',
'Verksamhet' => 'workshop.php',
'SUB-Verksamhet' => array(
'Allmänt' => 'general.php',
'Stadgar' => 'stadgar.php',
'Styrelse' => 'board.php',
'SUB-Styrelse' => array(
'Arbetsbeskrivningar' => 'workdetails.php',
'Vilka ingår' => 'whosincluded.php',
'Mallar och avtal' => 'blueprints.php'
),
'Mötesprotokoll' => 'protocols.php',
'SUB-Mötesprotokoll' => array(
2009 => '2009.php',
2008 => '2008.php',
2007 => '2007.php',
2006 => '2006.php'
),
'Underhålls- och förnyelseplan' => 'plans.php',
'SUB-Underhålls- och förnyelseplan' => array(
'Aktuell version' => 'latest.php',
'Tidigare versioner' => 'earlier.php'
),
'Verksamhetsberättelser' => 'stories.php',
'SUB-Verksamhetsberättelser' => array(
2009 => '2009.php',
2008 => '2008.php',
2007 => '2007.php',
2006 => '2006.php'
),
'Revisionsberättelser' => 'revisions.php',
'SUB-Revisionsberättelser' => array(
2009 => '2009.php',
2008 => '2008.php',
2007 => '2007.php',
2006 => '2006.php'
),
'Motioner' => 'motions.php',
'SUB-Motioners' => array(
'Inskickade' => 'pending.php',
'Avhandlade' => 'dealtwith.php',
'Mejla till styrelsen' => 'email.php'
)
),
'Ekonomi' => 'economy.php',
'SUB-Ekonomi' => array(
'Aktuell avgift' => 'currently.php',
2009 => '2009.php',
2008 => '2008.php',
2007 => '2007.php',
2006 => '2006.php'
),
'Arbetsgrupper' => 'workgroups.php',
'SUB-Arbetsgrupper' => array(
'Byggnadsgruppen' => 'build.php',
'Trädgårdsgruppen' => 'garden.php',
'Lekplatsgruppen' => 'playground.php',
'Väg- och belysningsgruppen' => 'road.php'
),
'Städdag' => 'cleaning.php',
'SUB-Städdag' => array(
'Nästa stadddag' => 'next.php',
'Ansvarsområde' => 'responsibility.php',
'Närvaro' => 'there.php'
),
'Kvartersgården' => 'partyhouse.php',
'SUB-Kvartersgården' => array(
'Regler vid lån' => 'rules.php',
'Bokning' => 'booking.php'
),
'Cetralantenn' => 'central.php',
'SUB-Centralantenn' => array(
'Allmänt samt kanalinformation' => 'general.php',
'Teknisk information' => 'technical.php'
),
'Anslagstavlan' => 'messageboard.php',
'Bildarkiv' => 'imagearchive.php',
'Tidningsinsamling' => 'newspapercollector.php',
'Länkar' => 'links.php'
);
As you see, the name of the link is the index in the arrayelement, and the value of the arrayelement is the link to the page.
Each submenu is handled like it got the exact same name as the link that it's attached to, but with a prepend of SUB-. Like this:
-
'Cetralantenn' => 'central.php',
'SUB-Centralantenn' => array(
Centralantenn is the name of the link, and it points to central.php(for the non-js users). However, it got a submenu attached to it, so when clicking Centralantenn it will show the links in the array of SUB-Centralantenn. Obviously this would also NOT send the user to central.php since that file only exists to output the submenu for the non-js users.
When this is output, it's done like this:
-
<ul id="menu">
<?php foreach($this->links as $name => $value) :
if(!is_array($value)) : ?>
<li><a href="<?php echo $value; ?>"><?php echo $name; ?></a></li>
<?php endif; if(is_array($value)) : ?>
<ul class="sub">
<?php foreach($value as $name => $subvalue) :
if(!is_array($subvalue)) : ?>
<li><a href="<?php echo $subvalue; ?>"><?php echo $name; ?></a></li>
<?php endif; if(is_array($subvalue)) : ?>
<ul class="sub 2">
<?php foreach($subvalue as $name => $sub2value) : ?>
<li><a href="<?php echo $sub2value; ?>"><?php echo $name; ?></a></li>
<?php endforeach; ?>
</ul>
<?php endif; endforeach; ?>
</ul>
<?php endif; endforeach; ?>
</ul>
And the sourcecode generated by that, looks like this:
(This is quite long)
-
<ul id="menu">
<li><a href="latest.php">Senaste nytt</a></li>
<li><a href="members.php">Medlemmar</a></li>
<li><a href="workshop.php">Verksamhet</a></li>
<ul class="sub">
<li><a href="general.php">Allmänt</a></li>
<li><a href="stadgar.php">Stadgar</a></li>
<li><a href="board.php">Styrelse</a></li>
<ul class="sub 2">
<li><a href="workdetails.php">Arbetsbeskrivningar</a></li>
<li><a href="whosincluded.php">Vilka ingår</a></li>
<li><a href="blueprints.php">Mallar och avtal</a></li>
</ul>
<li><a href="protocols.php">Mötesprotokoll</a></li>
<ul class="sub 2">
<li><a href="2009.php">2009</a></li>
<li><a href="2008.php">2008</a></li>
<li><a href="2007.php">2007</a></li>
<li><a href="2006.php">2006</a></li>
</ul>
<li><a href="plans.php">Underhålls- och förnyelseplan</a></li>
<ul class="sub 2">
<li><a href="latest.php">Aktuell version</a></li>
<li><a href="earlier.php">Tidigare versioner</a></li>
</ul>
<li><a href="stories.php">Verksamhetsberättelser</a></li>
<ul class="sub 2">
<li><a href="2009.php">2009</a></li>
<li><a href="2008.php">2008</a></li>
<li><a href="2007.php">2007</a></li>
<li><a href="2006.php">2006</a></li>
</ul>
<li><a href="revisions.php">Revisionsberättelser</a></li>
<ul class="sub 2">
<li><a href="2009.php">2009</a></li>
<li><a href="2008.php">2008</a></li>
<li><a href="2007.php">2007</a></li>
<li><a href="2006.php">2006</a></li>
</ul>
<li><a href="motions.php">Motioner</a></li>
<ul class="sub 2">
<li><a href="pending.php">Inskickade</a></li>
<li><a href="dealtwith.php">Avhandlade</a></li>
<li><a href="email.php">Mejla till styrelsen</a></li>
</ul>
</ul>
<li><a href="economy.php">Ekonomi</a></li>
<ul class="sub">
<li><a href="currently.php">Aktuell avgift</a></li>
<li><a href="2009.php">2009</a></li>
<li><a href="2008.php">2008</a></li>
<li><a href="2007.php">2007</a></li>
<li><a href="2006.php">2006</a></li>
</ul>
<li><a href="workgroups.php">Arbetsgrupper</a></li>
<ul class="sub">
<li><a href="build.php">Byggnadsgruppen</a></li>
<li><a href="garden.php">Trädgårdsgruppen</a></li>
<li><a href="playground.php">Lekplatsgruppen</a></li>
<li><a href="road.php">Väg- och belysningsgruppen</a></li>
</ul>
<li><a href="cleaning.php">Städdag</a></li>
<ul class="sub">
<li><a href="next.php">Nästa stadddag</a></li>
<li><a href="responsibility.php">Ansvarsområde</a></li>
<li><a href="there.php">Närvaro</a></li>
</ul>
<li><a href="partyhouse.php">Kvartersgården</a></li>
<ul class="sub">
<li><a href="rules.php">Regler vid lån</a></li>
<li><a href="booking.php">Bokning</a></li>
</ul>
<li><a href="central.php">Cetralantenn</a></li>
<ul class="sub">
<li><a href="general.php">Allmänt samt kanalinformation</a></li>
<li><a href="technical.php">Teknisk information</a></li>
</ul>
<li><a href="messageboard.php">Anslagstavlan</a></li>
<li><a href="imagearchive.php">Bildarkiv</a></li>
<li><a href="newspapercollector.php">Tidningsinsamling</a></li>
<li><a href="links.php">Länkar</a></li>
</ul>
Btw, I know you can't have "sub 2", that will be changed later.
Anyway, as you see.. the problem is how can I loop through the ul list of items and then check if the current listitem has a submenu, make it so when you click the current listitem, the submenu is expanded beneath, and then if you click one of those links on the submenu it gets rolled out to the right of the menu "above" the original content that is to the right of the menu(meaning it's not pushing anything to the right)?
Long thread, I apologize for that.
Big thanks to the one(s) that can help me with this! Or possibly show a better way of doing it
Topic Participants
tanax.ms
mollamusaoglu