home

Javascript Drop Down Menu

In continuation of session2, here we are about to learn javascript navigation with drop down, you might be get this in your mind after reading the heading, why javascript and why not css drop down menu. Yes of course without html and css nothing is possible, and to create this drop down menu we used html tags also to manipulate that used css, please have a look at below code of html and then also have javscript code. read more about css.

<ul>
  <li>About</li>
  <li onmouseover="overs(this)" onmouseout="outs(this)"  onclick="clicks(this)">Contact
  <div class="menu">
  <p>Contact Company</p>
  <p>Conact Branch</p>
  <p>Conatct Global</p>
  <p>Contact Local</p>
  </div>
  </li>
  <li>Services</li>
  <li onmouseover="overs(this)" onmouseout="outs(this)"  onclick="clicks(this)">Modules
  <div class="menu">
  <p>Home Module</p>
  <p>Left Module</p>
  <p>Aside Section</p>
  <p>Content Module</p>
  </div>
  </li>
  <li>Sitemap</li>
  </ul>

After practicing this you will learn more about css manipulation with javascript and will be able to add dynamic styles to recommended element.

function  overs(par){
  par.style.backgroundColor =  "#ff0000";
  par.style.color = "#fff";
  par.style.animate =  "#fff";
  if(par.children.length>0){
  par.getElementsByClassName("menu")[0].style.display  = "block";
  }
  }
  function  outs(par){
  par.style.backgroundColor =  "#369";
  par.style.color = "#fff";
  if(par.children.length>0){
  par.getElementsByClassName("menu")[0].style.display  = "none";
  }  
  }
  function  clicks(par){
  }

Javascript containing with two if conditions inside the functions (each functions has a different condtion like overs functions has css display property blocks, and another outs function has different condtions with css display property none). Please check the above javscript code so that you will understands about the functions and conditions and methods as well.

Also used javascript method(getElementsByClassName) to change css display properties based on our condtion inside of each function. to know more about javascript please go to this link.