How is the horizontal nav built on Contao homepage?

I am trying to replicate the kind of horizontal navigation menu that is found on Contao projects home page: http://www.contao.org. There are a couple features of this navigation that I find interesting:

• The top items in the navigation are not linked to pages, but simply act as categories of information (ie Discover, Download etc...).[/*:m:2c9rkq4l]
• Upon hover you get the links to the pages, but those same links are available to the the screen reader user. [/*:m:2c9rkq4l]

I used "Page Source" to get a better idea on how the menu is built, but had limited success. I also looked at the templates that are available for purchase, but did not find any with this kind of menu structure.

I am curious about the following:

• How are the category titles (ie Discover, Download etc) created? Are they separate pages?[/*:m:2c9rkq4l]
• How is the menu itself created? It does not appear that it is using the Suckerfish menu even though it functions similarly.[/*:m:2c9rkq4l]

Thank you!

I don't know 100% for sure how these are done, but I think I can give you a few clues (or at least ideas on how I would recreate them) --

Quote:

---

How are the category titles (ie Discover, Download etc) created? Are they separate pages?

---

My hunch is the categories are top-level pages, and a custom template makes them <span>'s instead of <a>'s. That said, depending on your own use case, there is value in keeping those active links that either redirect to the first sub-link in that section, or creating a landing page with sub-links in the content. This is just for that small percentage that don't have JavaScript activated or are using a NoScript plugin.

Code:

---

How is the menu itself created? It does not appear that it is using the Suckerfish menu even though it functions similarly.

---

It looks like this is using a custom MooTools script contained in contao.js. I didn't look too closely, but I do see code to add/remove a class of "hide" to elements, so I'm assuming that's where it is.

It's actually not too hard to do this -- a Google search of MooTools dropdown code examples will turn up some hints. There are a lot of examples to turn nested UL's into dropdown menus.

Hope this helps a little bit.

Thanks for these tips! They helped me think about how to approach navigation on the site I am working on. I am now leaning towards creating a top level category navigation that is horizontal and then a sub-navigation that is vertical and available after clicking one of the top level items.

Hi,

Just wondering if anyone can shed any light on one of the points made above:

"How are the category titles (ie Discover, Download etc) created? Are they separate pages?"

It would be really helpful to know how to have top-level pages without them needing to link to anything.

Please help :?

Thanks :D

It's like I said -- it's a basic navigation module, except the top level links have been changed to <span> tags instead of <a> tags.

You could either do this by customizing the "nav_default.tpl" template by checking to see which "level" you are on and outputing the proper tag, or you could even do this client-side, if when you initialize your drop-down menu you also run a little bit of JavaScript code that replaces the tags.

You can also make the top level pages internal redirects to the first sub-page item. That will still make them clickable, but they'd just automatically forward to the first sub-item under it (there's even an extension to do this automatically for you).

We experimented with the modification to the navigation template. The modification became somewhat tricky since we wanted to link the Home page, but not the other top level pages. We asked for help from a PHP programmer to make these changes. The result of this can be seen here: http://dev2.oed.umn.edu/oed-home.html . The navigation template that we came up with looks like this:

Code:

---

<ul class="<?php echo $this->level; ?>">
<?php foreach ($this->items as $item): ?>
<?php if ($item['link'] == "Home"): ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><span<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>>"<?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?>
<?php elseif ($this->level == "level_1"): ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><span<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?>
<?php elseif ($item['isActive']): ?>
<li class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><span class="active<?php if ($item['class']): ?> <?php echo $item['class']; ?><?php endif; ?>"><?php echo $item['link']; ?></span><?php echo $item['subitems']; ?>
<?php else: ?>
<li<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?>>"<?php if ($item['class']): ?> class="<?php echo $item['class']; ?>"<?php endif; ?><?php if ($item['accesskey'] != ''): ?> accesskey="<?php echo $item['accesskey']; ?>"<?php endif; ?><?php if ($item['tabindex']): ?> tabindex="<?php echo $item['tabindex']; ?>"<?php endif; ?><?php if ($item['nofollow']): ?> rel="nofollow"<?php endif; ?><?php echo $item['target']; ?>><?php echo $item['link']; ?><?php echo $item['subitems']; ?>
<?php endif; ?>
<?php endforeach; ?>[/list]

---

Thanks very much for this - i've asked our PHP developer to have a look.

:D

Ok, thanks tmikk! That template works really great. Can someone explain me how to change this template if I want to link to one other page beside the Home page in the top level pages. So two clickable links in the top level pages and the other pages are not clickable (they have subitems).

Thanks!

I think it would just be a matter of changing that "if" statement on the 3rd line:

Code:

---

<?php if ($item['link'] == "Home" || $item['link'] == "The Other Link"): ?>

---

For something more generic, it looks like you can check for any link that DOES NOT have sub-items under it, if that's what you're look for...

Code:

---

<?php if (empty($item['subitems'])); ?>

---

Or maybe only do it for the first level items...

Code:

---

<?php if ($this->level == 'l1' && empty($item['subitems'])); ?>

---

Thanks a lot Medianomaly! I prefer your second and third approach. But after adding those lines of code all items with subitems are invisible and only the items (Home and The Other Link) are visible.

By the way: Your first option does work ;)

LOL -- those semicolons at the end are supposed to be colons... My bad!

Cheers Brian, this is exactly what I mean!