Nicer Navigation with CSS Transitions Demo

Aangepast op: 04 August 2018

CSS Transitions demo

HTML Code

<ul id="trans-nav">
      <li><a href="../">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Products</a>
        <ul>
          <li><a href="#">Widgets</a></li>
          <li><a href="#">Thingies</a></li>
          <li><a href="#">Doohickies</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>

CSS Code and including IE adjustment

<!--[if IE]>
<style>
    #trans-nav li ul { display: none; }
    #trans-nav li:hover ul, #trans-nav li.over ul {display: block; }
    #trans-nav li ul li { height: 30px; line-height: 30px; }
</style>
<![endif]-->
<!--[if lte IE 6]>
    <script type="text/javascript">
        startList = function() {
            if (document.all && document.getElementById) {
                var navRoot = document.getElementById("trans-nav");
                for (i=0; i<navRoot.childNodes.length; i++) {
                    var node = navRoot.childNodes[i];
                    if (node.nodeName=="LI") {
                        node.onmouseover=function() {
                            this.className+=" over";
                        }
                        node.onmouseout=function() {
                            this.className=this.className.replace(" over", "");
                        }
                    }
                }
            }
        }
        window.onload=startList;
   </script>
<![endif]-->