Script is disrupting my CSS dropdown menu

HTML & CSS
1

For the first time ever, I find myself needing a dropdown menu, and I’ve basically used this Sons of Ursidae menu. It’s fine, but the four “children’s” pages of the site are using a JS effect, and it plays havoc with accessing the dropdown, for reasons I’ve failed to grasp. :frowning: As the client really, really likes the effect (thanks, @Pullo ;)), removing that would have to be a last resort.

Any assistance would be most gratefully received. :slight_smile:

<div id="navwrap">
<ul id="nav">
	<li><a href="index.html">About Me</a></li>
	<li><a href="poetry.html">Poetry</a>
		<ul>
		<li><a href="first-book.html">First Book</a></li>
		<li><a href="second-book.html">Second Book</a></li>
		</ul>
	</li>
	<li><a href="children.html">Children's Fiction</a>
		<ul>
		<li><a href="book-one.html">Book One</a></li>
		<li><a href="book-two.html">Book Two</a></li>
		<li><a href="book-three.html">Book Three</a></li>
		</ul>
	</li>
	<li><a href="non-fiction.html">Non-fiction</a>
		<ul>
			<li><a href="magazine1.html">Magazine</a></li>
			<li><a href="magazine2.html">Another Magazine</a></li>
			<li><a href="magazine3.html">A Different Magazine</a></li>
		</ul>
	</li>
</ul>
</div>

body {font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
		font-size: 100%;
		line-height: 1.4;
		}

/* Adapted from Sons of Ursidae - keyboard accessible */
div#navwrap {
	clear: both;
	text-align: center;
	min-height: 200px; /* required for test only*/
	}

ul#nav {display: inline-block;
	border-top: 2px groove #5388B3;
	border-bottom: 2px groove #5388B3;
	}
	
ul#nav, ul#nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	}
	
ul#nav li {
	position: relative;
	float: left;
	}

ul#nav>li li {float: none;}

#nav li a {
	display: block;
	text-align:center;
	background-color: #FFF;
	width: 11em;
	padding: 0.5em 0.5em;
	}
	
ul#nav li li a, #nav li li a:focus {
	width: 11em;
	}

ul#nav li a:hover {background-color: #DDE5FA;}

ul#nav li a:focus {background-color: #DDE5FA;}

ul#nav li a:active {background-color: #DDE5FA;}

#nav li li a:focus, #nav li li a:active {
	position : relative;
	left: 10000px;
	top:0;
	z-index:1;
	}

#nav li:hover li a:focus, #nav li:hover li a:active{
	position : relative;
	left: 0;top:0;
	margin-left:0;
	}

#nav li a:focus {outline: 1px solid #5388B3;}

#nav li li a:focus {outline: 1px solid #5388B3;}


#nav li ul {
	position : absolute;
	left: -10000px;
	}

#nav li:hover ul{
	top: 0;
	left: 0;
	margin-left: 100%;
	}

#nav li a:focus+ul {
	top: 0;
	left: 0;
	margin-left: 0;
	top: 2.35em;
	}
	
#nav li:hover a:focus+ul {
	margin-left: 0;
	}

#nav li:hover ul, #nav li a:focus ul{
	top:100%;
	margin-left: 0;
	}
/* End Sons of Ursidae*/

// <![CDATA[
var colour="random"; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"
var sparkles=50;

/****************************
*  Tinkerbell Magic Sparkle *
*(c)2005-13 mf2fm web-design*
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function() { if (document.getElementById) {
  var i, rats, rlef, rdow;
  for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    rats.style.zIndex="999";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    rats.style.zIndex="999";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
  }
  set_width();
  sparkle();
}}

function sparkle() {
  var c;
  if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
      star[c].style.left=(starx[c]=x)+"px";
      star[c].style.top=(stary[c]=y+1)+"px";
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
      star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;
      star[c].style.visibility="visible";
      starv[c]=50;
      break;
    }
  }
  for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
  }
  setTimeout("sparkle()", 40);
}

function update_star(i) {
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    starx[i]+=(i%5-2)/5;
    if (stary[i]<shigh+sdown) {
      star[i].style.top=stary[i]+"px";
      star[i].style.left=starx[i]+"px";
    }
    else {
      star[i].style.visibility="hidden";
      starv[i]=0;
      return;
    }
  }
  else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
  }
}

function update_tiny(i) {
  if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
  }
  if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    tinyx[i]+=(i%5-2)/5;
    if (tinyy[i]<shigh+sdown) {
      tiny[i].style.top=tinyy[i]+"px";
      tiny[i].style.left=tinyx[i]+"px";
    }
    else {
      tiny[i].style.visibility="hidden";
      tinyv[i]=0;
      return;
    }
  }
  else tiny[i].style.visibility="hidden";
}

document.onmousemove=mouse;
function mouse(e) {
  if (e) {
    y=e.pageY;
    x=e.pageX;
  }
  else {
    set_scroll();
    y=event.y+sdown;
    x=event.x+sleft;
  }
}

window.onscroll=set_scroll;
function set_scroll() {
  if (typeof(self.pageYOffset)=='number') {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)=='number' && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}

function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  return (div);
}

function newColour() {
  var c=new Array();
  c[0]=255;
  c[1]=Math.floor(Math.random()*256);
  c[2]=Math.floor(Math.random()*(256-c[1]/2));
  c.sort(function(){return (0.5 - Math.random());});
  return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");
}
// ]]>
2

Hi TB,

One solution would be to alter the sparkle function, so that nothing happens if the menu is displaying.
Something like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <style>
    body {font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
    font-size: 100%;
    line-height: 1.4;
  }

  /* Adapted from Sons of Ursidae - keyboard accessible */
  div#navwrap {
    clear: both;
    text-align: center;
    min-height: 200px; /* required for test only*/
  }

  ul#nav {display: inline-block;
    border-top: 2px groove #5388B3;
    border-bottom: 2px groove #5388B3;
  }

  ul#nav, ul#nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  ul#nav li { 
    position: relative;
    float: left;
  }

  ul#nav>li li {float: none;}

  #nav li a {
    display: block;
    text-align:center;
    background-color: #FFF;
    width: 11em;
    padding: 0.5em 0.5em;
  }

  ul#nav li li a, #nav li li a:focus {
    width: 11em;
  }

  ul#nav li a:hover {background-color: #DDE5FA;}

  ul#nav li a:focus {background-color: #DDE5FA;}

  ul#nav li a:active {background-color: #DDE5FA;}

  #nav li li a:focus, #nav li li a:active {
    position : relative;
    left: 10000px;
    top:0;
    z-index:1;
  }

  #nav li:hover li a:focus, #nav li:hover li a:active{
    position : relative;
    left: 0;top:0;
    margin-left:0;
  }

  #nav li a:focus {outline: 1px solid #5388B3;}

  #nav li li a:focus {outline: 1px solid #5388B3;}


  #nav li ul {
    position : absolute;
    left: -10000px;
  }

  #nav li:hover ul{
    top: 0;
    left: 0;
    margin-left: 100%;
  }

  #nav li a:focus+ul {
    top: 0;
    left: 0;
    margin-left: 0;
    top: 2.35em;
  }

  #nav li:hover a:focus+ul {
    margin-left: 0;
  }

  #nav li:hover ul, #nav li a:focus ul{
    top:100%;
    margin-left: 0;
  }
  /* End Sons of Ursidae*/
  </style>
</head>

<body>
  <div id="navwrap">
    <ul id="nav">
      <li><a href="index.html">About Me</a></li>
      <li><a href="poetry.html">Poetry</a>
        <ul>
          <li><a href="first-book.html">First Book</a></li>
          <li><a href="second-book.html">Second Book</a></li>
        </ul>
      </li>
      <li><a href="children.html">Children's Fiction</a>
        <ul class="sub">
          <li><a href="book-one.html">Book One</a></li>
          <li><a href="book-two.html">Book Two</a></li>
          <li><a href="book-three.html">Book Three</a></li>
        </ul>
      </li>
      <li><a href="non-fiction.html">Non-fiction</a>
        <ul class="sub">
          <li><a href="magazine1.html">Magazine</a></li>
          <li><a href="magazine2.html">Another Magazine</a></li>
          <li><a href="magazine3.html">A Different Magazine</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script>
    $.fn.is_on_screen = function(){
      var win = $(window);
      var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
      };
      viewport.right = viewport.left + win.width();
      viewport.bottom = viewport.top + win.height();

      var bounds = this.offset();
      bounds.right = bounds.left + this.outerWidth();
      bounds.bottom = bounds.top + this.outerHeight();

      return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
    };

      var colour="random"; // in addition to "random" can be set to any valid colour eg "#f0f" or "red"
      var sparkles=50;

      /****************************
      *  Tinkerbell Magic Sparkle *
      *(c)2005-13 mf2fm web-design*
      *  http://www.mf2fm.com/rv  *
      * DON'T EDIT BELOW THIS BOX *
      ****************************/
      var x=ox=400;
      var y=oy=300;
      var swide=800;
      var shigh=600;
      var sleft=sdown=0;
      var tiny=new Array();
      var star=new Array();
      var starv=new Array();
      var starx=new Array();
      var stary=new Array();
      var tinyx=new Array();
      var tinyy=new Array();
      var tinyv=new Array();

      window.onload=function() { if (document.getElementById) {
        var i, rats, rlef, rdow;
        for (var i=0; i<sparkles; i++) {
          var rats=createDiv(3, 3);
          rats.style.visibility="hidden";
          rats.style.zIndex="999";
          document.body.appendChild(tiny[i]=rats);
          starv[i]=0;
          tinyv[i]=0;
          var rats=createDiv(5, 5);
          rats.style.backgroundColor="transparent";
          rats.style.visibility="hidden";
          rats.style.zIndex="999";
          var rlef=createDiv(1, 5);
          var rdow=createDiv(5, 1);
          rats.appendChild(rlef);
          rats.appendChild(rdow);
          rlef.style.top="2px";
          rlef.style.left="0px";
          rdow.style.top="0px";
          rdow.style.left="2px";
          document.body.appendChild(star[i]=rats);
        }
        set_width();
        sparkle();
      }}

      function sparkle() {
        if($(".sub").is_on_screen()){
          setTimeout("sparkle()", 40);
          return;
        }

        var c;
        if (Math.abs(x-ox)>1 || Math.abs(y-oy)>1) {
          ox=x;
          oy=y;
          for (c=0; c<sparkles; c++) if (!starv[c]) {
            star[c].style.left=(starx[c]=x)+"px";
            star[c].style.top=(stary[c]=y+1)+"px";
            star[c].style.clip="rect(0px, 5px, 5px, 0px)";
            star[c].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;
            star[c].style.visibility="visible";
            starv[c]=50;
            break;
          }
        }
        for (c=0; c<sparkles; c++) {
          if (starv[c]) update_star(c);
          if (tinyv[c]) update_tiny(c);
        }
        setTimeout("sparkle()", 40);
      }

      function update_star(i) {
        if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
        if (starv[i]) {
          stary[i]+=1+Math.random()*3;
          starx[i]+=(i%5-2)/5;
          if (stary[i]<shigh+sdown) {
            star[i].style.top=stary[i]+"px";
            star[i].style.left=starx[i]+"px";
          }
          else {
            star[i].style.visibility="hidden";
            starv[i]=0;
            return;
          }
        }
        else {
          tinyv[i]=50;
          tiny[i].style.top=(tinyy[i]=stary[i])+"px";
          tiny[i].style.left=(tinyx[i]=starx[i])+"px";
          tiny[i].style.width="2px";
          tiny[i].style.height="2px";
          tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;
          star[i].style.visibility="hidden";
          tiny[i].style.visibility="visible"
        }
      }

      function update_tiny(i) {
        if (--tinyv[i]==25) {
          tiny[i].style.width="1px";
          tiny[i].style.height="1px";
        }
        if (tinyv[i]) {
          tinyy[i]+=1+Math.random()*3;
          tinyx[i]+=(i%5-2)/5;
          if (tinyy[i]<shigh+sdown) {
            tiny[i].style.top=tinyy[i]+"px";
            tiny[i].style.left=tinyx[i]+"px";
          }
          else {
            tiny[i].style.visibility="hidden";
            tinyv[i]=0;
            return;
          }
        }
        else tiny[i].style.visibility="hidden";
      }

      document.onmousemove=mouse;
      function mouse(e) {
        if (e) {
          y=e.pageY;
          x=e.pageX;
        }
        else {
          set_scroll();
          y=event.y+sdown;
          x=event.x+sleft;
        }
      }

      window.onscroll=set_scroll;
      function set_scroll() {
        if (typeof(self.pageYOffset)=='number') {
          sdown=self.pageYOffset;
          sleft=self.pageXOffset;
        }
        else if (document.body && (document.body.scrollTop || document.body.scrollLeft)) {
          sdown=document.body.scrollTop;
          sleft=document.body.scrollLeft;
        }
        else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
          sleft=document.documentElement.scrollLeft;
          sdown=document.documentElement.scrollTop;
        }
        else {
          sdown=0;
          sleft=0;
        }
      }

      window.onresize=set_width;
      function set_width() {
        var sw_min=999999;
        var sh_min=999999;
        if (document.documentElement && document.documentElement.clientWidth) {
          if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
          if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
        }
        if (typeof(self.innerWidth)=='number' && self.innerWidth) {
          if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
          if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
        }
        if (document.body.clientWidth) {
          if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
          if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
        }
        if (sw_min==999999 || sh_min==999999) {
          sw_min=800;
          sh_min=600;
        }
        swide=sw_min;
        shigh=sh_min;
      }

      function createDiv(height, width) {
        var div=document.createElement("div");
        div.style.position="absolute";
        div.style.height=height+"px";
        div.style.width=width+"px";
        div.style.overflow="hidden";
        return (div);
      }

      function newColour() {
        var c=new Array();
        c[0]=255;
        c[1]=Math.floor(Math.random()*256);
        c[2]=Math.floor(Math.random()*(256-c[1]/2));
        c.sort(function(){return (0.5 - Math.random());});
        return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")");
      }
    </script>
  </body>
</html>

Is that something you could live with?

3

Thanks. Yes, I could live with that, but it only seems to work for one drop-down - specifically, the first with a class of sub attached. In your example, there is no class on the Poetry sub-menu, and it only works on Children’s. When I add the class to Poetry, it only works there. :frowning:

4

Just pull the nav in front:


#navwrap{position:relative;z-index:1001}

If you want the stars to show you will either need to remove the white background from the anchor or use rgba and make it a bit transparent.

5

Paul - you’re a hero. That’s perfect, thank you. :slight_smile:

6