Alphabetical besed category menu

**vasu** · 03-23-2009, 01:49 AM

Hi all,

Anybody have an idea how to make an alphabetical based category menu. I saw that menu on many cosmetic websites.

Example : http://www.fragrancenet.com/f/net/wo...ragrances.html

Just see on left hand side that navigation.

Thanks in advance

**vasu** · 03-25-2009, 12:32 AM

Is there any one who knows about this??

**vwphillips** · 03-25-2009, 06:32 PM

CSS

Code:

#tst {
 position:relative;width:130px;height:110px;border:solid black 1px;
}

#tst DIV {
 position:absolute;height:15px;width:15px;background-Color:#CCFFFF;border:solid black 1px;text-Align:center;font-Size:12px;
}

#list {
 width:130px;height:200px;border:solid black 1px;
}

#list DIV {
 height:20px;background-Color:#CCFFFF;border-Bottom:solid black 1px;
}

HTML

Code:

<body onload="zxcInit('tst',6,4,'list','090325');">
<input type="button" name="b" value="Test" onclick="zxcAjax('090325A.txt','list',null)"/>
<div id="tst" ></div>
<div id="list" ></div>

Code

Code:

function zxcInit(id,cols,s,lid,url){
 var obj=document.getElementById(id);
 var letters='ABCDEFGHIJKMKNOPQRSRUVWXYZ';
 var A=zxcES('DIV',{left:s+'px',top:s+'px'},obj,'A');
 A.onclick=function(){ zxcAjax(url+'A.txt',lid);   }
 var sz=A.offsetHeight+s;
 for (var l,z0=1;z0<letters.length;z0++){
  l=zxcES('DIV',{left:((sz)*(z0%cols))+s+'px',top:Math.floor(z0/cols)*sz+s+'px'},obj,letters.charAt(z0));
  l.onclick=function(){ zxcAjax(url+this.firstChild.data+'.txt',lid);   }
 }
}


function zxcAjax(url,obj){
 var request=false
 if (window.ActiveXObject){
  try { request=new ActiveXObject("Msxml2.XMLHTTP"); }
  catch (e){
   try { request=new ActiveXObject("Microsoft.XMLHTTP"); }
   catch (e){}
  }
 }
 else if (window.XMLHttpRequest) request=new XMLHttpRequest();
 else return false;
 request.onreadystatechange=function(){ zxcPopulate(request,obj); }
 request.open('GET',url+'?'+new Date().getTime(),true);
 try { request.send(null); }
 catch (e){}
}

function zxcPopulate(request,obj){
 if (request.readyState==4&&(request.status==200||window.location.href.indexOf("http")==-1)){
  var txt=request.responseText.split('#');
  var obj=document.getElementById(obj);
  while (obj.firstChild) obj.removeChild(obj.firstChild);
  for (var t,d,a,z0=0;z0<txt.length;z0++){
   t=txt[z0].split('^');
   d=zxcES('DIV',{},obj);
   a=zxcES('A',{},d,t[0]);
   a.href=t[1];
  }
 }
}

function zxcES(ele,style,par,txt){
 if (typeof(ele)=='string') ele=document.createElement(ele);
 for (key in style) ele.style[key]=style[key];
 if (par) par.appendChild(ele);
 if (txt) ele.appendChild(document.createTextNode(txt));
 return ele;
}

File 090325A.txt

Code:

A Item 1^http://www.vicsjavascripts.org.uk/#
A Item 2^http://www.vicsjavascripts.org.uk/

File 090325B.txt

Code:

B Item 1^http://www.vicsjavascripts.org.uk/#
B Item 2^http://www.vicsjavascripts.org.uk/#
B Item 3^http://www.vicsjavascripts.org.uk/

**vasu** · 03-26-2009, 02:32 AM

Thanks vwphillips,

Can u plz explain the position of the codes. I am sorry i am new and learning these codes.

I know abt css and that html codes. what abt all those function codes and File 090325A.txt where to put them

Thanks again for ur help

**vwphillips** · 03-26-2009, 10:27 AM

For now, put the JavaScript code within the header tags of your page.
The .txt files go in the same directory as your HTML page, you will need one for each letter.

Thread: Alphabetical besed category menu

Thread Tools

Search Thread

Alphabetical besed category menu

Bookmarks

Bookmarks

Posting Permissions