LEARN onclick Dropdown menu

by Wolf Wortmann

HTML

<article>
    THIS IS THE LEARN VERSION OF THE DROP DOWN MENU.<br>
    IF U WOULD SEE THE FULL VERSION, GO TO:<br><br>
    <a target="_blank" href="http://jsfiddle.net/wolfwortmann/2WkPa/">http://jsfiddle.net/wolfwortmann/2WkPa/</a><br>
</article>
<hr>
<mnav>
    <br>
      <div class="open">click here to open the menu</div>
      <div class="close">click here to close the menu</div>
      <div class="dropdown">
        <ul class="sub_menu">
          <a href="#">
            <li>
            Home               
            </li>
          </a>
          <a href="#">
            <li>
            Web
            </li>
          </a>
          <a href="#">
            <li>
            Contact
            </li>
          </a>
        </ul>
      </div>
     </mnav>
<!-- NOT!!!! for the dropdown!!!! -->
    <section>
    <hr>
    TO TRY IT SELF:<br>
    ADD THIS TO YOUR HTML DOCUMENT :<br>
    <br>
&lt;!DOCTYPE html&gt;<br>
&lt;html  lang=&quot;de&quot;&gt;<br>
 &lt;head&gt;<br>
 	&lt;title&gt;Wolf Wortmann | Home&lt;/title&gt;<br>
 	&lt;meta content=&quot;text/html; charset=UTF-8&quot; http-equiv=&quot;content-type&quot;&gt;<br>
 	&lt;style type=&quot;text/css&quot;&gt;<br>
 	&lt;!--<br>
        .close{/*the close field is hidden (display:none;)*/<br>
    display: none;<br>
}<br>
.dropdown{/*the dropdown menu is hidden (same how close-field)*/<br>
    display: none;<br>
}<br>
        --&gt;<br>
 	&lt;/style&gt;<br>
&lt;script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'&gt;&lt;/script&gt;<br>
 
&lt;script type=&quot;text/javascript&quot;&gt;//&lt;![CDATA[<br>
        $(window).load(function(){ <br><br>//here ist the javascript content!!<br><br>
$(".open").click(function() {//on click on the OPEN-field:<br>
     $(".dropdown").css({ "display":"block" });//dropdown was showed<br>
    $(".close").css({ "display":"inline" });//close-field was showed<br>
    $(".open").css({ "display":"none" });//open-field was...

CSS

.close{/*the close field is hidden (display:none;)*/
    display: none;
}
.dropdown{/*the dropdown menu is hidden (same how close-field)*/
    display: none;
}
/* NOT FOR THE DROPDOWN: */
section{
    padding-top: 100px;
}

JavaScript

$(".open").click(function() {//on click on the OPEN-field:
     $(".dropdown").css({ "display":"block" });//dropdown was showed
    $(".close").css({ "display":"inline" });//close-field was showed
    $(".open").css({ "display":"none" });//open-field was hidden

 })

$('.close').click(function() {//on click on the CLOSE-field:
    $(".close").css({ "display":"none"});//close-field was hidden
    $(".open").css({ "display":"inline" });//open-field was showed
    $(".dropdown").css({ "display":"none" });//dropdown was hidden
  
 });

 $('.dropdown ').click(function(event){
     event.stopPropagation();
 });