Expand JAVASCRIPT MENU

can anyone tell me why this funcion drop's me to the top of the page ?

any ideas how to solve this problem?

Or any suggestion's of a better code to use?

P.S. this is for ebay template, quite a big menu section.

<script type="text/javascript">
startList = function() {

if (document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
        node = navRoot.childNodes[i];
        if (node.nodeName=="LI") {
        node.onclick=function() {

    this.className = (this.className == "on") ? "off" : "on";

            }
        }
    }
 }
}
window.onload=startList;

</script>

I have a basic markup:

<ul id="nav">
  <li><a href="#">Home </a></li>
  <li><a href="#">About &gt;</a> 
    <ul>
      <li><a href="#">History </a></li>
      <li><a href="#">Team </a></li>
      <li><a href="#">Offices </a></li>
    </ul>
  </li>
  <li><a href="#">Services &gt;</a> 
    <ul>
      <li><a href="#">Web Design </a></li>
      <li><a href="#">Internet Marketing </a></li>
      <li><a href="#">Hosting </a></li>
      <li><a href="#">Domain Names </a></li>
      <li><a href="#">Broadband </a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us &gt;</a> 
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
  </li>
</ul>

Answers


Why don't you just simplify it? You could just try:

<li><a href="javascript:List(this);">Home </a></li>

and change your JS to:

function List(element)
{
    element.parentNode.className = (element.parentNode.className == "on") ? "off" : "on";
}

That's much simpler.

EDIT: Or you just replace href="#" with href="javascript:return(false);". As # is a reference to an anchor which does not exist, it will take you to the top of the page.


Here i have done bin using jQuery:

1) Include latest jquery.js file in html header tag first.

2) HTML:

<ul id="nav">
  <li>
    <a href="#">
      Home 
    </a>
  </li>
  <li>
    <a href="#">
      About &gt;
    </a>

    <ul>
      <li>
        <a href="#">
          History 
        </a>
      </li>
      <li>
        <a href="#">
          Team 
        </a>
      </li>
      <li>
        <a href="#">
          Offices 
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      Services &gt;
    </a>

    <ul>
      <li>
        <a href="#">
          Web Design 
        </a>
      </li>
      <li>
        <a href="#">
          Internet Marketing 
        </a>
      </li>
      <li>
        <a href="#">
          Hosting 
        </a>
      </li>
      <li>
        <a href="#">
          Domain Names 
        </a>
      </li>
      <li>
        <a href="#">
          Broadband 
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      Contact Us &gt;
    </a>

    <ul>
      <li>
        <a href="#">
          United Kingdom
        </a>
      </li>
      <li>
        <a href="#">
          France
        </a>
      </li>
      <li>
        <a href="#">
          USA
        </a>
      </li>
      <li>
        <a href="#">
          Australia
        </a>
      </li>
    </ul>
  </li>
</ul>

3) CSS Styles:

ul#nav{
  background-color:#445566;
}
ul li{
  list-style:none;
}
ul li ul{
  background-color:#558888;
}
ul li a{
  color:#fff;
  text-decoration:none;
}
.off ul{
  display:none;
}
.on ul{
  display:block;
}

4) JQuery in Script Tag:

$(function() {
    $("ul li ul").each(function() {
        $(this).parent().addClass('off');
    });
    $("ul li").mouseenter(function() {
        if ($(this).hasClass('off')) {
            $(this).removeClass('off');
            $(this).addClass('on');
        }
    });
    $("ul li").mouseleave(function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on');
            $(this).addClass('off');
        }
    });
});

Try it on bin : http://codebins.com/bin/4ldqpal


Need Your Help

Arc deleted my object before a delegate could call back to it

objective-c memory-management

I am new to iOS programming, and have recently learned a valuable lesson in memory management. I solved my problem, but I am not sure if it was the right way to do it.

Hibernate property name capitalisation issue

java hibernate properties javabeans capitalization

I have a problem with how hibernate/JavaBeans constructs property names.