01/08 2016

Menu with Json and jQuery

Dear Valued visitor,
Thank you so much for your support and interest in the articles on Webegg. Whilst a lot of content is totally free, some of the things I put a lot of work into are slightly restricted in terms of code and demo links. I've had to do this to keep my level of support to the high quality I want to.

Please click below to subscribe, get rid of this message and see this article in it's full glory;

This is a small one off payment of £5 to give you full access to all content on my site forever.

Making a more complicated interactive element that is easy to add to can be a struggle. The idea behind this
component is to engage the user based on extracting a few key pieces of information to deliver the right solution to

Implementation is based heavily on jQuery's ability to extract data from a json file and use it's structure to find
key pieces of information.


This is probably the easiest bit of Markup you'll see from me, it's just two lines. The Javascript needs to hook into
the main link a.poplink to trigger reading of the json file, which in turn populates the span.sectors
element. By far the easy bit.

  What do you do for a living?

The Javascript

Using my usual method of having a 'kick off' function to set up all the other functions needed to perform specific
actions in a certain order, I set about building the prototype (or 'Demo' to use a more friendly name for it). The
self executing function called mainFunk() gathers any functions that need initializing when loaded. I
like to declare these up front really for clarity so it makes more sense for someone when they read the script.

By the way, the if(!isMob) part before declaring the functions was just something to stop the whole menu from doing it's thing on mobile. This was a stipulation from the client on the project I built this for.

Basically though, the secthover() function shows and hides the dropdown where all the interactive menu choices appear. At the same time though getsectors() goes off and gathers the initial data to populate the first level of the menu. As with most Javascripts, this then triggers a chain of events

(function mainFunk(a, b){
})(window, jQuery);

function secthover() {
  var popwidth = $(".poplink").innerWidth();
      function () {
        // script shown after subscription

function getsectors(filename){
  filename = siteRoot+'js/sectors.json';
    $.getJSON(filename, function(data){

        // script shown after subscription

        $.each(data.sectors, function(i,s){

          // script shown after subscription

    .success(function() { getroles(filename); })
  .error(function() { $('.sectors').append('

Bournemouth, we have a problem (with our json)!

'); }) .complete(function() { }); } function getroles(filename){ $(".sectlist li a").click(function() { // script shown after subscription $.getJSON(filename, function(data){ //alert($('.rolelist').length); $.each(data.sectors, function(i,s){ // script shown after subscription if(sector == currsect){ // script shown after subscription if($('.rolelist').is(':visible')){ // script shown after subscription for(var i = 0; i < rolearr.length; i++){ // script shown after subscription } $('.sectors .rolelink a').remove(); }else{ // script shown after subscription for(var i = 0; i < rolearr.length; i++){ $('.sectors ul.rolelist').append('
  • '+rolearr[i]+'
  • '); } $('.sectors').append(''); $('.rolelist').css({'opacity':'0','width':'0','margin-top':'-10000px'}); $('.rolelist').css({opacity: 0, width:'31%'}); $('.rolelist').css({'margin-top':'0'}); $('.rolelist').animate({opacity: 1}, 500, function() { }); } } }); }) .success(function() { showlink(); }) .error(function() { $('.sectors').append('

    Bournemouth, we have a problem (with our json)!

    '); }) .complete(function() { }); return(false); }); } function showlink(){ $(".rolelist li a").click(function() { // script shown after subscription if($('.rolelink').is(':visible')){ $('.sectors .rolelink').append('AC/DC have a song for you'); $('.rolelink').css({'opacity':'0'}); $('.rolelink').animate({opacity: 1}, 500, function() {/*Animation complete.*/}); extLinks(); }else{ $('.sectors').append(''); // script shown after subscription extLinks(); } return(false); }); } function extLinks() { $('a[rel^="external"]').on( "click", function() {; return false; }); }

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    This article is in the jquery category. Here are some other related articles also in this category.