CSS/Javascript menu

[Mabrito]

Back in my freshman year of college I created this website for my html class: http://web.ics.purdue.edu/~jmabrito/

4 years later, I am creating a new website and want to use that CSS/Javascript menu from that website. However, I am having a hard time understanding the CSS and Javascript code I used back then.

Here is the CSS code I used:

body {margin: 5 padding: 0;}
div {font: 10px verdana,geneva,lucida,arial,sans-serif;}

.menu {visibility: hidden;}
#start {visibility: visible; width: 700px;
margin-left: auto; margin-right: auto;}

#story, #characters, #review, #support {position: absolute; top: 228px;}
#start a {float: left;}

.menu a.over {background: #000; color: #fff;}
.menu a {width: 137px; text-decoration: none;
padding: 5px 0 5px 5px; color: #000; letter-spacing: 1px;
border: 1px solid #fff; background: #ddd; display: block;
voice-family: "\"}\""; voice-family:inherit; width: 130px;}

The part I am getting confused at in the CSS code is the .menu a {} attribute and all the values I used in it. Specifically why did I choose 137px and 130px. I know it has something to do with the total length of the menu being 700px.

Here is the Javascript code I used:

var W3CDOM = document.getElementById;
var openMenus = new Array();
var pressedNav = new Array();
var subMenus = new Array();
var timer, browser;
var ua = navigator.userAgent.toLowerCase();

subMenus[1] = 'story';
subMenus[2] = 'characters';
subMenus[3] = 'review';
subMenus[4] = 'support';

function getObj(idvalue) {
  return document.getElementById(idvalue);
}

function getObjStyle(idvalue) {
  return document.getElementById(idvalue).style;
}

function setTimer() {
  if (timer) clearTimeout(timer);
  timer = setTimeout('closeAllMenus(1)',20);
}

function display() {
  if (timer) clearTimeout(timer);
  var num = this.number;
  if (num <= 4) menuLvl = 1;
  if (num > 4) menuLvl = 2;

  if (openMenus[menuLvl] && openMenus[menuLvl] == subMenus[num]) return;
  if (openMenus[menuLvl]) closeAllMenus(menuLvl);
  if (!subMenus[num]) {}
  else {
      menuToShow = getObjStyle(subMenus[num]);
      menuToShow.visibility = 'visible';
  }
  openMenus[menuLvl] = subMenus[num];
  if (this.className) return;
  this.className = 'over';
  if (pressedNav[menuLvl]) pressedNav[menuLvl].className = '';
  pressedNav[menuLvl] = this;
}

function closeAllMenus(lvl) {
  for (i=openMenus.length - 1; i>=lvl; i--) {
      if (openMenus[i]) {
          menuToHide = getObjStyle(openMenus[i]);
          menuToHide.visibility = 'hidden';
      }
      openMenus[i] = null;
      if (pressedNav[i]) {
      pressedNav[i].className = '';
      pressedNav[i] = null;
      }
  }
}

function detect(text) {
   stringposition = ua.indexOf(text) + 1;
   data = text;
   return stringposition;
}

if ((detect('msie 5.01')) && (detect('win')) || (detect('safari'))) {
    browser = "adjust";
}

function detectLocations() {
  var offsetLeftValue = 0;
  navItems[0].style.position = 'relative';
  offsetLeftValue += navItems[0].offsetLeft;

  var sub1 = getObjStyle('story');
  if (browser == 'adjust') sub1.left = offsetLeftValue + 142 + 'px';
  else sub1.left = offsetLeftValue + 137 + 'px';

  var sub2 = getObjStyle('characters');
  if (browser == 'adjust') sub2.left = offsetLeftValue + 279 + 'px';
  else sub2.left = offsetLeftValue + 274 + 'px';

  var sub3 = getObjStyle('review');
  if (browser == 'adjust') sub3.left = offsetLeftValue + 416 + 'px';
  else sub3.left = offsetLeftValue + 411 + 'px';

  var sub4 = getObjStyle('support');
  if (browser == 'adjust') sub4.left = offsetLeftValue + 553 + 'px';
  else sub4.left = offsetLeftValue + 548 + 'px';
}

window.onload = function() {
  if (!W3CDOM) return;
  navHolder = getObj('navbar');
  navItems = navHolder.getElementsByTagName('a');
  detectLocations();
  for (i=0; i<navItems.length; i++) {
       navItems[i].onmouseover = display;
       navItems[i].onmouseout = setTimer;
       navItems[i].number = i;
  }
}

window.onresize = detectLocations;

I understand the javascript part except the var sub1 - var sub 4 variables and the pixel lengths I assigned to the offsetleftvalue variable. It has something to do with 137px I set in the CSS page.

Can anyone help fill in these mental gaps?

 

[J-Will]

137 is the width of the block before the white borders are added in both your CSS and your script. It looks like a 137 width grey box, with about a 1 pixel white border all the way around. So the boxes in the middle (ie not the two on the ends) really get a 2 pixel wide border, 1 pixel from the right side of the box to the left and 1 pixel from the left side of the box to the right.

The vars are an array of your folders (actual folders on the server) for your sub pages, and I think the offsets are the pixel positions so the drop downs line up under the appropriate titles

 

[Mabrito]

Hmmm I just notice I have 2 width variables in the .menu a CSS attribute. I went ahead and removed the width:130px attribute and it messed up the menu however when I remove the width:137px attribute the menu is not affected.

I think half of the reason why I am confused in understanding this code again is because of the width attribute being in the CSS property twice. So with the width:137px being removed and not affecting the menu, raises the following question. I have four segments of this javascript code:

var sub1 = getObjStyle('story');
if (browser == 'adjust') sub1.left = offsetLeftValue + 142 + 'px';
else sub1.left = offsetLeftValue + 137 + 'px';

Can someone explain what this is doing again, I know its aligning the drop down boxes in some way. Why the first part of the if statement increasing the offseLeftValue variable by 142 while the second half of the if statement increasing it by 137?

 

[webdes03]

Not sure if you're looking to clean that code up at all, but you really don't need any of the Javascript. Everything you're doing can be done with CSS and a combination of unordered lists.

 

[Mabrito]

Not sure if you're looking to clean that code up at all, but you really don't need any of the Javascript. Everything you're doing can be done with CSS and a combination of unordered lists.

Really? I should look into that then with CSS I would love to get rid of the javascript. Any good examples I should look at specifically?

 

[Statewide Software]

Google CSS menu. They use <ul> and <li> tags which can be styled via the css style sheet.