Forums

Header Navigation multi-level show/hide menu

Permalink
Hi,

I've currently trying to build my employer's new website using Concrete5 (the first time i've attempted to use it) but having done the flat HTML design before really getting into the nitty-gritty of Concrete5 I'm a bit a stumped how to achieve my navigation design in such a way so that my editors can add pages that update the main navigation.

How i've designed it, I have 4 top-level sections that, when clicked use a JS show/hide function to alter the CSS display property of the appropriate DIV and display the sub navigation for that section. I have attached a Jpeg screengrab to demonstrate.

What I assume I need to do is make my main nav items the Header Nav stack and then each sub navigation DIV an auto-nav stack with all of them set to Global Areas? But I have no idea how to set that up and retain all of my CSS and javascript functionality. If anyone can point me in the right direction for any tutorials/help docs that would be really useful as I can't find any examples at the moment that are making things any clearer.

thanks
PW

1 Attachment

 
cubewebsites replied on at Permalink Best Answer Reply
Looks like quite a simple navigation to be honest.

1. Create an autonav that displays all the top level pages and 1 level of subchildren.
2. Style the navigation as you need. If you've used divs instead of nested lists then you can easily update the autonav template markup, or alternatively, change your CSS to target <li> and <ul> instead of divs.
3. Write your jQuery code to toggle the submenu e.g.
$(document).ready(function(){
    // Hide the submenu items
    $('.nav > li > ul').hide();
   // Handle the click event
    $('.nav > li').click(function(e){
        // Prevent default click
        e.preventDefault();
        // Show / hide the submenu
        $(this).find('> ul').stop().slideToggle();
    });
});


The 4 top level pages can exist in your Sitemap, but exclude them from pagelist, search and sitemap.xml. The click handler will ensure that no-one will end up on them unless your JavaScript is broken.
If you're worried about people still somehow landing on them just add .htaccess 301 rewrites which takes a person to the first subpage, or to your website homepage.
pwallace81 replied on at Permalink Reply
Thanks for your reply, it doesn't quite solve the full extent of my problem though - not your fault though I didn't give the best example.

The problem I have is that there are multiple 'sections' of navigation under each top level heading. So...

Home
Showcase
Case studies
Clients
Testimonials
Services
Service 1
Detail 1-1
Detail 1-2
Service 2
Detail 2-1
Detail 2-2
Company
Blog

So when the nav expands downwards I need separate <ul> containing Service 1 and Service 2 to be displayed alongside each other (float: left;), and the Service 1 and Service 2 text ideally needs to not link to a page, just be a heading for that particular list.

As far as I can see with Concrete5 this isn't necessarily possible - because everything in a nav has to be a link to a page?