Main menu like typolight.org

[Vascom]

Hi everybody,

How can I make the main menu the same as the main menu of www.typolight.org? (Discover, Download, Understand, ....)
So the first item is not a link (clickable)!

Kind Regards,
Bart

[Tru]

I think it is possible to make it via jQuery or MooTools, something like:

 $(document).ready(function(){
   $(".level_1 a").click(function(event){
     return false;
   });
 });

Though I'm not sure if this code gonna work. But you get the idea.

[Vera]

A safer way would to be to change the template. You do not need javascript to do this. typolight.org also solved this without js.

[vinchenzison]

Hi,

I think it's not clickable because it's not an a href link!
Install firebug on firefox and you can inspect elements. Very good for development.

Also, they have used mootools to display the submenu.
Have a look in the source and you'll see that the link is actually a Span with a submenu class on it.
Then within the typolight.js code (see source again) you can see some mootools morph effects to fade in the sub menu.
It's right near the top, something like

$('mainmenu').getElements('span.submenu').each(function(el) {
    var ul = el.getParent().getElement('ul.level_2');
    el.addEvent('mouseenter', function() {
      new Fx.Morph(ul, {'duration':300}).start({'opacity':1});
    });
    el.addEvent('mouseout', function() {
      setTimeout(function() {
        if (ul.getStyle('left').toInt() < 0) {
          ul.set({'opacity':0});
        }
      }, 50);

Hope that helps