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 them.

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.


(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.