What would be the best way to implement mega menu style global navigation?

tarpley's Avatar

tarpley

19 Nov, 2015 05:35 PM

What would be the best way to implement mega menu style global navigation?

I'm planning to implement mega-menu style global navigation on several of my larger sites to make it possible for my users to get to major parts of each site from any page without having to drill through the hierarchy of the site. For example, something like the global navigation used by starbucks.com, Nike, UC Berkley.

For most sites, I plan to have audience based options running horizontally across the header of the page, each would expose a menu of links and in some cases a bit of content for that audience. I see these being manually curated.

Finally, I would like to be able to edit and publish changes quickly without having to republish an entire site each time there is a change so I'd like for this to publish out in a way that can be consumed by a php include on each page.

What would be the best way to implement something like this in Cascade? Has anyone else done this? Should I just use a file asset type in the cms and edit the html directly? If I go that route, how can the menu show up in both the preview in Cascade and the live site? Or is there a better way using some sort of custom page or system of blocks or something?

Thanks in advance for the help!

Jeremy

  1. 1 Posted by Penny on 24 Nov, 2015 09:59 PM

    Penny's Avatar

    Hi Jeremy,

    Yes. Many people have done what you are talking about. There are a couple of ways that you can accomplish this. The decision that you will have to make is how easily editable do you want the menu to be. Like do you want end users updating it. If so, you could build out an interface for them to edit via Data Definition.

    I would then create a Block in cascade server, either Data Definition (with interface) or WYSIWYG. You can then put your mega menu code in there.

    The Next thing to do is to make a Include Page type. This include page type can have a block chooser but will essentially be the PHP page for inclusion in your code.

    The last bit is including the block on your page for internal viewing of the mega menu. To do this, you can add logic for [system-view:internal] of the actual block of content and then [system-view:external] for the php include statement for the php page that also has the block attached.

    There are a few ways that you can do those three steps. But that is the essential gist of the pieces needed. I hope this makes sense. It sometimes takes me building it out to remember all the connections. Just let me know if you need clarification. Thanks!

  2. 2 Posted by tarpley on 24 Nov, 2015 10:16 PM

    tarpley's Avatar

    Think that makes sense but I’m sure I’ll have questions once I start doing the actual work!

    Appreciate it.

    Jeremy

    --
    Jeremy Tarpley | Director, Web Services
    Information Technology | Texas A&M Health Science Center

    1266 | Adriance and Stotzer Pkwy | College Station, TX 77843+1266
    979.436.0903 | [email blocked]<mailto:[email blocked]>

    www.tamhsc.edu<http://www.tamhsc.edu/> | Transforming Health

    From: Penny <[email blocked]<mailto:[email blocked]>>
    Date: Tuesday, November 24, 2015 at 3:59 PM
    To: Jeremy Tarpley <[email blocked]<mailto:[email blocked]>>
    Subject: Re: What would be the best way to implement mega menu style global navigation? [How Do I... #20530]

  3. 3 Posted by Ryan Griffith on 25 Nov, 2015 01:35 PM

    Ryan Griffith's Avatar

    Hi Jeremy,

    I am glad to hear Penny was able to provide you with a good starting point for the mega menu. I'm going to go ahead and close this discussion, but please feel free to comment or reply to re-open if you have any additional questions.

    Have a great day!

  4. Ryan Griffith closed this discussion on 25 Nov, 2015 01:35 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac