title: How to apply overlay on navigation when clicked?
body: <p>I used the fixed navigation from <a href="http://www.jqueryload.com" rel="nofollow">http://www.jqueryload.com</a>. Restyled it and that works fine.</p>
  
  <p>I tried to add a dark overlay when "navigatie" is clicked. I found several solutions here, but when I implement them, the script for the navigation does not work anymore. I think it's because of the solutions found here are also using 'this'. But I don't know how to rewrite them.
  How can I add an overlay when the first li = navigatie is clicked? Thanks in advance
  This is the code I use:</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div id="nav" class="menu"&gt;
      &lt;ul&gt;
      &lt;li&gt;
      &lt;a href="#"&gt;Navigatie&lt;span&gt; &lt;img src="/images/plus.gif" 
      width="12px" height="12px"  alt="plus" /&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;ul&gt;
      &lt;li&gt;&lt;a href="./index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="keukens"&gt;&lt;a href="keukens.php"&gt;Keukens&lt;/a&gt;&lt;/li&gt;       
      &lt;li class="app"&gt;&lt;a href="apparatuur.php"&gt;Apparatuur&lt;/a&gt;&lt;/li&gt;
      &lt;li class="interieur"&gt;&lt;a href="interieur.php"&gt;Interieur&lt;/a&gt;&lt;/li&gt;
      &lt;li class="contact"&gt;&lt;a href="contact.php"&gt;Contact&lt;/a&gt; 
      &lt;/ul&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p> </p>
  
  <p>CSS</p>
  
  <pre><code>    #nav{float:left;}
      #nav ul{list-style-type:none; color:#000;}
      .menu{ font: 100% Arial, Helvetica, sans-serif ;padding-top:100px;
      color:#000;height:30px;background-color:;}    
      .menu a:hover{background-color:;}
      .menu a {text-decoration: none;padding: 0;color:#000;outline:none;}
      .menu ul{list-style: none;margin:0;padding-left:10px;}
      .menu ul li{padding:0;float:left;}
      .menu ul li ul li{padding:0;float:none;margin: 0 0 0 0px;width:100%;}
      .menu ul li ul{position: relatieve;border: 0px solid #C3D1EC;
      box-shadow: 0px 0px #CCCCCC;margin-top: -1px; display:none;
      padding:20px 0px 0px 0px;}
      .active ul{display:block !important;}
      .active a{border: 0px solid #C3D1EC;border-bottom: 0;
      box-shadow: 0 0px 0px #CCCCCC;display: block;height: 29px;
      padding: 0 0;position:relative;z-index: 1;}
      .active a:hover{background-color:#000;color:#CCC;}
      .sub{ left:10px;position: absolute; top:180px;}
  </code></pre>
  
  <p>JQUERY:</p>
  
  <pre><code>    (function($){
      $.fn.fixedMenu=function(){
      return this.each(function(){
          var menu= $(this);
          menu.find('ul li &gt; a').bind('click',function(){
          if ($(this).parent().hasClass('active')){
              $(this).parent().removeClass('active');
          }
          else{
              $(this).parent().parent().find('.active').removeClass('active');
              $(this).parent().addClass('active');
          }
          })
      });
  
  }  
      })
  
      (jQuery);
  </code></pre>
  
  <p>The working version can be found here <a href="http://www.tossdesign.nl" rel="nofollow">http://www.tossdesign.nl</a></p>