Nicer Navigation with CSS Transitions Demo

Voor het laatst gewijzigd op: 05-12-2020

CSS Transitions demo


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

CSS Code and including IE adjustment

<!--[if IE]>
    #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; }
<!--[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", "");