Sample menu code with top/subs

Squiz Matrix Support
1

I know this has been discussed before, but I don't think anyone has posted any code. This is what I'm looking to do:


Top 1

Top 2

Top 3

Top 4



Then, as someone clicks on Top 2, the menu would change as follows:



<Top 2> (highlighted)

  • sub 1
  • sub 2
  • sub 3
  • sub 4



    Then, as someone clicks on sub 2, the menu would change as follows:



    Top 2
  • sub 1

    <sub 2> (highlighted)
  • sub 3
  • sub 4



    Can someone share some code that will accomplish this? I have created various menus to no avail.



    Thanks,

    Jason
2

I just use simple jquery code to achieve this:

    
    var path = location.pathname.substring(1);
       if ( path )
     $('#nav a[href$="' + path + '"]').attr('class', 'active');


If you want both the parent and child link highlighted, you can apply design customization to each of the parent links to add custom class and use the above script for the sub navigation highlight.


This way is little ghetto but it works :D
3

[quote]
I just use simple jquery code to achieve this:


    
    var path = location.pathname.substring(1);
       if ( path )
     $('#nav a[href$="' + path + '"]').attr('class', 'active');


If you want both the parent and child link highlighted, you can apply design customization to each of the parent links to add custom class and use the above script for the sub navigation highlight.


This way is little ghetto but it works :D
[/quote]


Hmmmm.....I don't mind ghetto. However, I'm a little new to this whole Matrix CMS stuff. To make this happen, what do you have in your parse file?
I've seen a site that does what I want, http://www.aut.ac.nz/student-life, but I don't know what the code looks like behind it. And, so far, none
of the combinations I've tried using the menu system seem to work.
4

The script works by comparing the href of the links inside #nav (or any ID you specificied) against the URL path of the current page, and if they both match it adds the class attribute called active.




With a simple CSS you can give different style to the a.active link.


    
    
    #nav a {color: #fff;}
    #nav a.active {color: #000;}




This is the example HTML file.


I hope it helps.
5

Thanks tbaatar! I'll try this out this weekend. Does this mean that no one uses the built-in menu system? I would not think what I'm wanting to do is out of the ordinary.