SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2007
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Keeping drop-down menu items in js file?

    Hello,

    CSS/JavaScript drop-down menus are quite popular; but one thing I don't see anywhere is JavaScript code to keep all of the menu items of the <li> tags in an outside js file.

    It would make sense, if you have the same menu on hundreds of pages, it's much faster to update only in one place rather than having to update all pages.

    On the main page of a Website I did 1 1/2 years ago, I had a section with 4 columns of drop-down using CSS and JavaScript. A programmer working for the same company had converted it so that the lists <li> were in a js file. Here's the code:

    Code on the html document:
    Code:
    <td width="574" align="left" valign="top" id="xnav" colspan="4">
    							
      <ul id="xyznav">  
        <li style="z-index: 900;" id="liRotary"><a href="automatics.html">Automatic Rotary Arm, Horizontal &amp; Ring &nbsp; &nbsp; &gt;&gt;</a></li>					  
        <li style="z-index: 890;" id="liTurntables"><a href="automatics.html">Automatic Turntables &gt;&gt;</a></li>
        <li style="z-index: 880;" id="liArm"><a href="semis.html">Semi-automatic Rotary Arm &gt;&gt;</a></li>
        <li style="z-index: 870;" id="liHalfturn"><a href="semis.html">Semi-automatic Turntables &gt;&gt;</a></li>				
      </ul>
    						
    </td>
    Code in the js file:
    Code:
    	/* Automatic Rotary Arm, Horizontal & Ring */
    	var liRotary = document.getElementById("liRotary");
    	var ulRotary = document.createElement("ul");
    	ulRotary.innerHTML = "<li><a href=\"automatics.html\">View all</a></li>\
    						  <li><a href=\"wcrt175.html\">WCRT-175</a></li>\
    						  <li><a href=\"wcrt200.html\">WCRT-200</a></li>\
    						  <li><a href=\"wrta100.html\">WRTA-100</a></li>\
    						  <li><a href=\"wrta150.html\">WRTA-150</a></li>\
    						  <li><a href=\"wrta175.html\">WRTA-175</a></li>\
    						  <li><a href=\"wrta200.html\">WRTA-200</a></li>\
    						  <li><a href=\"wrwa200.html\">WRWA-200</a></li>\
    						  <li><a href=\"wring500.html\">WRING-500</a></li>";
    	liRotary.appendChild(ulRotary);
    
    
    	/* Automatic turntables */
    	var liTurntables= document.getElementById("liTurntables");
    	var ulTurntables = document.createElement("ul");
    	ulTurntables.innerHTML = "<li><a href=\"automatics.html\">View all</a></li>\
    						  <li><a href=\"wca150.html\">WCA-150</a></li>\
    						  <li><a href=\"wca200.html\">WCA-200</a></li>\
    						  <li><a href=\"smhpa300.html\">SMHPA-300</a></li>\
    						  <li><a href=\"smlpa200.html\">SMLPA-200</a></li>";
    	liTurntables.appendChild(ulTurntables);
    
    	/* Semi-automatic rotary arm */
    	var liArm = document.getElementById("liArm");
    	var ulArm = document.createElement("ul");
    	ulArm.innerHTML = "<li><a href=\"semis.html\">View all</a></li>\
    						  <li><a href=\"wrt100.html\">WRT-100</a></li>\
    						  <li><a href=\"wrt150.html\">WRT-150</a></li>\
    						  <li><a href=\"wrt175.html\">WRT-175</a></li>\
    						  <li><a href=\"wrt200.html\">WRT-200</a></li>\
    						  <li><a href=\"wrtcrw.html\">WRT-CRW</a></li>";
    	liArm.appendChild(ulArm);
    
    	/* Semi-automatic Turntables */
    	var liHalfturn = document.getElementById("liHalfturn");
    	var ulHalfturn = document.createElement("ul");
    	ulHalfturn.innerHTML = "<li><a href=\"semis.html\">View all</a></li>\
    						  <li><a href=\"sml150.html\">SML-150</a></li>\
    						  <li><a href=\"sml200.html\">SML-200</a></li>\
    						  <li><a href=\"sml200dual.html\">SML-200 DUAL</a></li>\
    						  <li><a href=\"smlext.html\">SML-EXT</a></li>\
    						  <li><a href=\"sml277.html\">SML-277</a></li>\
    						  <li><a href=\"smh150.html\">SMH-150</a></li>\
    						  <li><a href=\"smh200.html\">SMH-200</a></li>\
    						  <li><a href=\"smh200dual.html\">SMH-200 DUAL</a></li>\
    						  <li><a href=\"smhspl.html\">SMH-SPL</a></li>\
    						  <li><a href=\"smhhvy.html\">SMH-HVY</a></li>\
    						  <li><a href=\"whpcrw.html\">WHP-CRW</a></li>\						  					  
    						  <li><a href=\"wvl075.html\">WVL-075</a></li>\
    						  <li><a href=\"wvl100.html\">WVL-100</a></li>\
    						  <li><a href=\"palwrapper.html\">Pal Wrapper</a></li>";
    	liHalfturn.appendChild(ulHalfturn);
    }
    This is also in the js file and is related to this menu:
    Code:
    startList2 = function() {
    		if (document.all&&document.getElementById) {
    		navRoot = document.getElementById("xyznav");
    		for (i=0; i<navRoot.childNodes.length; i++) {	
    		node = navRoot.childNodes[i];
    		if (node.nodeName=="LI") {
    		node.onmouseover=function() {
    		this.className+=" over";
    		  }
    		  node.onmouseout=function() {
    		  this.className=this.className.replace(" over", "");
    		   }
    		   }
    		  }
    		 }
    		}
    And this is the CSS code:
    Code:
    #xnav ul {
    	margin: 0 0 0 10px;
    	padding: 0;
    	list-style: none;
    }
    #xnav ul li {
    	position: relative;
    	float: left;
    	/*	width:114px;*/
    	width: 120px;
    	margin: 10px 20px 10px 0;
    }
    #xnav ul li ul li{
    margin: 0 0 0 -10px;
    }
    #xnav li ul {
    	position: absolute;
    	left: 0; /* Set 1px less than menu width */
    	top: auto;
    	display: none;
    }
    /* Styles for Menu Items */
    #xnav ul li a {	
    	display: block;
    	text-decoration: none;
    	font-size: 9pt;
    	font-weight:bold;
    	color: #FFFFFF;
    /*	background: #000000; /* IE6 Bug */
    	padding: 5px;
    	border: 1px solid #000000;
    	background-color: #887360;
    	}
    /* commented backslash mac hiding hack \*/ 
    * html #xnav ul li a {height:1%;}
    /* end hack */ 
    
    /* this sets all hovered lists to beige */
    #xnav li:hover a,#xnav li.over a,
    #xnav li:hover li a:hover,#xnav li.over li a:hover {
       color: #FFFFFF;
       background-color: #F38F4B;
    }
    /* set dropdown to default */
    #xnav li:hover li a,#xnav li.over li a {
        color: #FFFFFF;
       	background-color: #887360;
    }
    #xnav li ul li a { padding: 2px 5px;} /* Sub Menu Styles */
    #xnav li:hover ul,#xnav li.over ul {display: block;} /* The magic */
    The above drop-down menu restricted the width of the drop-down items instead of allowing the drop-down items to be wider than the item in the menu bar. That's why I didn't want to use that style again...

    I'm using the Dynamic Drive chrome menu on a new project:
    http://www.dynamicdrive.com/dynamici...rome/index.htm
    Is there a way to implement this on this menu? If so, how? I tried using the above way and couldn't get it to work.

    Thanks for your help,
    Julia

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest you read this article: http://apptools.com/rants/jsmenu.php
    I have a much higher opinion of the Suckerfish Menu System than this author, however, he does explain the pitfalls of DHTML menus well.

    You should use some form of server-side includes instead of JavaScript to include the navigation on multiple pages.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •