There is a menu script http://jsfiddle.net/htyxud07/1/ you need to add an ajax request so that after clicking on the menu, a window opens and the data of this category is loaded with ajax th.

js menu script:

  $(document).ready(function() { var $box = $('.box'); $('.metro li').each(function(){ var color = $(this).css('backgroundColor'); var content = $(this).html(); $(this).click(function() { $box.css('backgroundColor', color); $box.addClass('open'); $box.find('p').html(content); }); $('.close').click(function() { $box.removeClass('open'); $box.css('backgroundColor', 'transparent'); }); }); });

Ajax:

 $(".ajax_but").click(function() { //var id = $(this).attr("id"); //var data_ajax = 'id='+ id ; $.ajax({ type: "POST", url: "ajax.php", data: data_ajax, cache: false, success: function(res){ $("#id_ajax").html(res); } }); });
  • And what exactly you can not do? What specifically does not work? - Dmitriy Simushev

1 answer 1

Found a solution to this issue, added data-id to the menu.

 $(document).ready(function() { var $box = $('.box'); $('.metro li').each(function(){ var color = $(this).css('backgroundColor'); var content = $(this).html(); $(this).click(function() { $box.css('backgroundColor', color); $box.addClass('open'); var id_click = $(this).attr('data-id'); var data_ajax = 'id='+ id_click ; $.ajax({ type: "POST", url: "ajax.php", data: data_ajax, cache: false, success: function(res){ $box.find('p').html(res); } }); }); $('.close').click(function() { $box.removeClass('open'); $box.css('backgroundColor', 'transparent'); }); }); });