title: Closing Menu on Outside Click on page with iFrames
body: <p>I'm trying to use the trick outlined <a href="https://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element">on this answer</a> to close a navigation menu on a page I've designed. However, the majority of the space on the page is taken up by an iframe that loads articles stored on the same server as the page containing the iframe.</p>
  
  <p>If I click on any of the elements on the parent page, the menu closes as it should. However, clicking on any of the space within the iframe does not close the menu.</p>
  
  <p>I'm assuming this is because the parent page does not capture events happening inside of the iframe. Like I've said, both pages are stored on the same server, so how can I capture the click to close my menu when the user clicks within the iframe?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="menucontainer"&gt;
  &lt;nav id="mobilemenu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;span class="menutrigger"&gt;&amp;#9776; Menu&lt;/span&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;nav id="fullmenu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="page1.html" target="content"&gt;Menu Item 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="page2.html" target="content"&gt;Menu Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="page3.html" target="content"&gt;Menu Item 3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="page4.html" target="content"&gt;Menu Item 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/div&gt;
  &lt;div id="frame"&gt;
          &lt;iframe name="content" id="content" src="intro.html"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JQuery:</strong></p>
  
  <pre><code>$(document).ready(function() {
      $("a[target='content']").click(function() {
          if ($("#mobilemenu").css("display") == "block" ){
              $('#fullmenu').hide();
          }
      });
      $('html').click(function() {
          $('#fullmenu').hide();
      });
      $('#menucontainer').click(function(event){
          event.stopPropagation();
      });
      $('.menutrigger').click(function() {
          $('#fullmenu').toggle();
      });
  });
  </code></pre>
  
  <p><strong>CSS:</strong> (Added because it occurred to me it might be affecting things)</p>
  
  <pre><code>html, body { height: 100%; width: 100%; }
  
  nav, #frame { position: absolute; right: 0; left: 0; padding: 0; margin: 0; width: 100%; }
  
  #content { height: 100%; width: 100%; }
  
  #frame { top: 38px; bottom: 14px; }
  
  nav { width: 100%; z-index: 100; }
  
  #fullmenu { display: none; position: absolute; top: 38px; width: 100%; }
  
  #mobilemenu { display: block; height: 38px; top: 0; background: #333; }
  
  .menutrigger { font-size: 20px; font-weight: bold; padding: 1px 8px; color: #FFF; cursor: pointer; }
  
  #frame { top: 38px; bottom: 14px; }
  
  nav ul { position: relative; width: 100%; background: #333; list-style: none; display: inline-block; padding: 0; }
  
  nav ul:after { clear: both; }
  
  nav ul li { height: 29px; float: none; min-width: 110px; font-size: 14px; padding: 4px 4px; font-family: 'Roboto Condensed', sans-serif; }
  
  nav ul li a { display: block; padding: 5px; color: #FFF; text-decoration: none; }
  
  nav ul li:hover { background: #666; display: inline-block; height: 29px; }
  
  nav ul li:hover a { color: #FFF; }
  </code></pre>