title: Construct a dynamic menu by selecting parameters with jQuery, php?
body: <p>I'm trying to build a responsive menu that could reconstruct itself by selecting a combination of parameters.</p>
  
  <p>In the example below I've named the different menus so that they have things in common each is also unique. By choosing "all" then all menu items would appear; choosing "1's" and "B's" would only show "Menu item 1B. 2014; green"; choosing "2013" would show only menu items with 2013; choosing "green" would show only results with green; etc…</p>
  
  <p>The menu as it is now targets an iframe and returns a hyperlink when clicked, which is a feature I'd like to retain. This seems like such a complicated problem to me, is there a way to filter results with jQuery or php? Essentially I think I'm trying to filter results through tags? </p>
  
  <p>Any help on this would be amazing!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
    $('.menu a.nav-tab').on('click', function() {
      var href = $(this).attr('href');
  
      $('iframe').attr('src', href);
      $('.current-url').empty().append($('&lt;a&gt;').attr('href', href).append('"' + href + '"'));
  
      $('.menu a.nav-tab').removeClass('current');
      $(this).addClass('current');
      return false;
    });
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hyperlinks {
    width: 200px;
  }
  .menu {
    float: left;
    width: 200px;
  }
  .filter {
    width: 200px;
  }
  iframe {
    float: left;
    width: 100px;
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="hyperlinks"&gt;
    &lt;p class="current-url"&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="filter"&gt;
    View by:
    &lt;br&gt;
    &lt;br&gt;
    &lt;a id="all" href="tab1"&gt;All&lt;/a&gt;
    &lt;br&gt;
    &lt;a id="1" href="website"&gt;1's&lt;/a&gt; / &lt;a id="all" href="website"&gt;2's&lt;/a&gt; / &lt;a id="all" href="website"&gt;3's&lt;/a&gt;
    &lt;br&gt;
    &lt;a id="all" href="website"&gt;A's&lt;/a&gt; / &lt;a id="all" href="website"&gt;B's&lt;/a&gt; / &lt;a id="all" href="website"&gt;C's&lt;/a&gt;
    &lt;br&gt;
    &lt;a id="all" href="website"&gt;2015&lt;/a&gt;, &lt;a id="all" href="website"&gt;2014&lt;/a&gt;, &lt;a id="all" href="website"&gt;2013&lt;/a&gt;
    &lt;br&gt;
    &lt;a id="all" href="website"&gt;blue&lt;/a&gt;, &lt;a id="all" href="website"&gt;green&lt;/a&gt;, &lt;a id="all" href="website"&gt;red&lt;/a&gt;.
    &lt;br&gt;
    &lt;br&gt;
    &lt;br&gt;
  &lt;/div&gt;
  
  
  &lt;div class="menu"&gt;
    Menu:
    &lt;br&gt;
    &lt;br&gt;
    &lt;a class="nav-tab tab1" href="http://www.dictionary.com"&gt;Menu item 1A. 2015, blue&lt;/a&gt; 
    &lt;br&gt;
    &lt;br&gt;
  
    &lt;a class="nav-tab tab2" href="http://www.thesaurus.com"&gt;Menu item 1B. 2014, green&lt;/a&gt; 
    &lt;br&gt;
    &lt;br&gt;
  
    &lt;a class="nav-tab tab3" href="http://www.wikipedia.org"&gt;Menu item 1C. 2013, red&lt;/a&gt; 
    &lt;br&gt;
    &lt;br&gt;
  
    &lt;a class="nav-tab tab4" href="http://www.urbandictionary.com"&gt;Menu item 2A. 2015, blue&lt;/a&gt;
    &lt;br&gt;
    &lt;br&gt;
  
    &lt;a class="nav-tab tab5" href="http://www.hyperlink5.com"&gt;Menu item 2B. 2014, green&lt;/a&gt;
    &lt;br&gt;
    &lt;br&gt;
  
    &lt;a class="nav-tab tab6" href="http://www.electronics2000.co.uk"&gt;Menu item 2C. 2013, blue&lt;/a&gt;
    &lt;br&gt;
    &lt;br&gt;
  
    &lt;a class="nav-tab tab7" href="http://www.nytimes.com"&gt;Menu item 3A. 2015, blue&lt;/a&gt;
    &lt;br&gt;
    &lt;br&gt;
  
    &lt;a class="nav-tab tab8" href="http://www.theguardian.com"&gt;Menu item 3B. 2014, green&lt;/a&gt;
    &lt;br&gt;
    &lt;br&gt;
  
    &lt;a class="nav-tab tab9" href="http://edition.cnn.com"&gt;Menu item 3B. 2013, red&lt;/a&gt;
    &lt;br&gt;
    &lt;br&gt;
  
  &lt;/div&gt;
  
  &lt;iframe width="100%" frameborder="1"&gt;&lt;/iframe&gt;</code></pre>
  </div>
  </div>
  </p>