TalkPHP

TalkPHP (http://www.talkphp.com/forums.php)
-   Javascript, AJAX, E4X (http://www.talkphp.com/javascript-ajax-e4x/)
-   -   jQuery help (http://www.talkphp.com/javascript-ajax-e4x/4790-jquery-help.html)

Tanax 07-28-2009 02:19 PM

jQuery help
 
Heya!

I'm trying to make a menusystem that supports up to 2 submenus.
The PHP code looks like this:

php Code:
<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="sub2">
               
                <?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>

I've set classes sub and sub2 to display: none in CSS.
What I want is that when the user clicks a link, the submenu that belongs to that link is rolled out.

The $links variable is an array with all the menus, and it's quite long, but here it is:
php Code:
<?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'
   
    );

I didn't know any better way of marking the submenus than by putting the index to SUB-<nameoflinkitbelongsto>.

Don't know how I would proceed from here though to make the JS part work. Any tips or ideas would be appreciated!

codefreek 07-28-2009 06:03 PM

@tanax jQuery, has a forum for jQuery support ;) just thought i should share that info.. :)


-Cf

JaoudeStudios 07-28-2009 07:50 PM

jQuery is really easy. I dont have time to look through your code in details, but as an example...on hovering the div with id submenu, submenu layer will display and on mouse out will be hidden again. Also using animation functions like slideDown & slideUp you can animate the display of the drop down menu
$('#submenu').hover(
function()
{
// show menu
},
function()
{
// hide menu
}
);

Tanax 07-29-2009 12:38 PM

Quote:

Originally Posted by codefreek (Post 27380)
@tanax jQuery, has a forum for jQuery support ;) just thought i should share that info.. :)


-Cf

Really? I can't find that on their website? :-/:-/

Quote:

Originally Posted by JaoudeStudios (Post 27381)
jQuery is really easy. I dont have time to look through your code in details, but as an example...on hovering the div with id submenu, submenu layer will display and on mouse out will be hidden again. Also using animation functions like slideDown & slideUp you can animate the display of the drop down menu
$('#submenu').hover(
function()
{
// show menu
},
function()
{
// hide menu
}
);

Yea, I know. If the ID's are good, then it's easy. The thing is though that the ID's are quite complicated in my case as the $links array is perhaps badly constructed.

What I need help with first is how I can solve the array format so I can create nice ID's to output :-)

codefreek 07-29-2009 12:50 PM

@tanax, must have mixed up with something else, but i still know a jquery forum but, i see that you are already a new member of just that forum so all is well :)


-Cf

Tanax 07-29-2009 01:07 PM

Quote:

Originally Posted by codefreek (Post 27396)
@tanax, must have mixed up with something else, but i still know a jquery forum but, i see that you are already a new member of just that forum so all is well :)


-Cf

Haha yea, after you posted that I googled jquery support forum, and found that one :-) Thanks

codefreek 07-29-2009 02:31 PM

you are welcome :)


All times are GMT. The time now is 01:31 AM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0