X-Cart forums - Sliding Menu that displays categories and sub-categories

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - Sliding Menu that displays categories and sub-categories (https://forum.x-cart.com/showthread.php?t=1696)

Sliding Menu that displays categories and sub-categories

Here is way to have a sliding menu that displays categories and sub-categories dynamically. This method utilizes javascript. You change your categories in admin and it will automatically reflect these changes. Unlimited amount of main categories will be displayed. However, you will only be able to nest up to 3 sub-levels underneath each main categories, i.e.:

MAIN
SUB-1
SUB-2
SUB-3

To see an example go here:
http://www.deals-on-deals.com/xcart/customer/

For this version of the sliding menu, I am utilize images as background for each category and sub-category. If you want or need these images let me know and I'll email them to you.

If you wish to have text-only, in categories.tpl below set "slideMenu.useImages = 0" instead of "1".

Also very important, you are already aware that categories.tpl is referenced in the left-hand column of home.tpl, I would recommend either clearing the contents of the left-hand column to contain only categories.tpl or place some items like authbox.tpl above categories.tpl or place them elsewhere on the page. Why you ask? Because this menu slides and will slide down over content that is there and believe me it looks insightly when that happens.

So here goes:

Backup-up then replace your categories. tpl (located at skin1/customer/categories.tpl) with the following:

Quote:

{* $Id: categories.tpl,v 1.16 2002/10/21 07:06:43 zorg Exp $ *}
<script language="JavaScript" src="../skin1/slidemenu.js" type="text/javascript">
</script>

<script language="JavaScript">
{literal}
slideMenu = new createSlideMenu("slideMenu")

//Variables to set:
slideMenu.menuy=95 //The top placement of the menu.
slideMenu.menux=5 //The left placement of the menu
slideMenu.useImages = 1 //Are you using images or not? Yes - 1, No - 0
slideMenu.pxspeed=20 //The pixel speed of the animation
slideMenu.timspeed=25 //The timer speed of the animation
slideMenu.inset = 10 //How much the selected items should pop to the left
slideMenu.arrow = 0 //Set this to className that has font-family:webdings
//if you want to use the arrow feature. Note:
//This ONLY works on DOM capable browsers, and with
//useImages set to 0 - It's basically just a test I did.
//I hope to improve it later on.

//Needed dummy classes - leave in the stylesheet!
slideMenu.bgClass = "slideMenuBG"
slideMenu.txtClass = "slideMenuText"
$ip = '../skin1/images/menu/';

slideMenu.level[0] = new slideMenu_makeLevel(
left = 0,
width = 138,
height = 21,
between = 5,
className = "clSlideMenu",
classNameA = "clA0",
regImage = $ip+"level0_regular.gif",
roundImg = $ip+"level0_round.gif",
roundImg2 = "",
subImg = "",
subRound= "")

slideMenu.level[1] = new slideMenu_makeLevel(10,127,20,2,"clSlideMenu","clA 1",$ip+"level1_regular.gif",$ip+"level1_round2.gif ",$ip+"level1_round.gif",$ip+"level1_sub.gif", $ip+"level1_sub_round.gif")
slideMenu.level[2] = new slideMenu_makeLevel(21,118,18,2,"clSlideMenu","clA 2",$ip+"level2_regular.gif",$ip+"level2_round2.gif ",$ip+"level2_round.gif",$ip+"level2_sub.gif", $ip+"level2_sub_round.gif")
slideMenu.level[3] = new slideMenu_makeLevel(33,108,20,2,"clSlideMenu","clA 3",$ip+"level3_regular.gif",$ip+"level3_round2.gif ",$ip+"level3_round.gif",$ip+"level3_sub.gif", $ip+"level3_sub_round.gif")
slideMenu.level[4] = new slideMenu_makeLevel(40,107,19,2,"clSlideMenu","clA 4",$ip+"level4_regular.gif",$ip+"level4_round2.gif ",$ip+"level4_round.gif",$ip+"level4_sub.gif", $ip+"level4_sub_round.gif")

//Image preload --- leave this
for(var i=0;i<slideMenu.level;i++){
var l = slideMenu.level[i]
new preLoadBackgrounds(l.regImage,l.roundImg,l.roundIm g2,l.subImg,l.subRound)
}
{/literal}

{php}

function find_idx($a, $label)
{
while( list($k,$v) = each($a) ){
if( isset($v['label']) && $v['label'] == $label )
return $k;
}
return -1;
}

function cmp($a, $b)
{
if( $a['orderby'] == $b['orderby'] ) return 0;
return ($a['orderby'] < $b['orderby'] ) ? -1 : 1;
}

function sort_cat(&$list)
{
while( list($k,$v) = each($list) ){
if( isset($v['sub']) )
usort(&$v['sub'],'cmp');
}
usort($list,'cmp');
}

function preparelist($list)
{
$r = array();
$c = false;
$cnt = 1;
while (list ($k, $v) = each ($list) ){
$l = split('/',$v['category']);
// init tree
$p = & $r;
for( $i=0; $i<sizeof($l); $i++ ){
$idx = find_idx($p,$l[$i]);
$lastest = ( $i == sizeof($l)-1 );
if( $idx == -1 ) {
if( $lastest ){
if( isset($p[0]) && isset($p[0]['orderby']) && $p[0]['orderby'] > $v['order_by']){
array_unshift($p, array( 'label'=>$l[$i] ) );
$idx = 0;
}
else {
array_push($p, array( 'label'=>$l[$i] ) );
$idx = sizeof($p)-1;
}
}
else {
array_push($p, array( 'label'=>$l[$i] ) );
$idx = sizeof($p)-1;
}
}
$p = & $p[$idx];
if( $lastest )
$p['orderby'] = $v['order_by'];
// set url
if( $lastest )
$p['url'] = $v['categoryid'];
else {
if( !isset( $p['sub'] ) )
$p['sub'] = array();
$p = & $p['sub'];
}
}
$cnt++;
}
return $r;
}

function fill_menu($menu,$level)
{
switch( $level ){
case '0': $l = 'top'; break;
case '1': $l = 'sub'; break;
default: $l = 'sub'.$level; break;
}
while ( list($idx,$cnt) = each($menu) ){
$item = $menu[$idx]; $label = addslashes($item['label']);
if( isset($item['sub']) ){
print "slideMenu.makeMenu('$l',\"$label\");\n";
fill_menu($item['sub'],$level+1);
}
else
print "slideMenu.makeMenu('$l',\"$label\",'home.php?cat= ".$item['url']."');\n";
}
}

$list = preparelist($allcategories);
sort_cat(&$list);

fill_menu($list,0);
print "slideMenu.init();\n\n";
{/php}
</SCRIPT>

<TABLE border=0 cellPadding=5 cellSpacing=0 width=100%>

<tr><td colspan=2 nowrap>
{if $config.General.root_categories eq "Y"}
{/if}
</td></tr>
</TABLE>

Next add the following to the bottom of skin1.css:
(Note that you can change the text colors of the main level and sub levels by specifying it below in A.clA0,A.clA1,A.clA2,A.clA3,A.clA4 and setting the hover and visited properties for each of those)

Quote:

/* slide menu */
div.clSlideMenu{ /* All slideMenu2 DIV elements */
position:absolute;
overflow:hidden;
width:150;
height:22;
}
A.clA0{ /* All top level links */
font-family:Verdana, Helvetica, Helv;
color:Black;
font-size:12px;
text-decoration:none;
font-weight:bold;

}
A.clA1{ /* All sub level links */
font-family:Verdana, Helvetica, Helv;
font-size:10px; font-weight:bold;
text-decoration:none;
color:Black
}
A.clA2{ /* All sub2 level links */
font-family:Verdana, Helvetica, Helv;
font-size:10px; font-weight:bold;
text-decoration:none;
color:Navy
}
A.clA3{ /* All sub3 level links */
font-family:Verdana, Helvetica, Helv;
font-size:10px;
font-weight:bold;
text-decoration:none;
color:Green
}
A.clA4{ /* All sub4 level links */
font-family:Verdana, Helvetica, Helv;
font-size:10px;
font-weight:bold; text-decoration:none;
color:Navy
}
a.clA0:hover{color: #FFCC00; text-decoration:underline;}
a.clA0:visited{color: #99CCFF; text-decoration:underline;}
a.clA1:hover{color: #FFCCAA; text-decoration:underline;}
a.clA1:visited{color: Black; text-decoration:underline;}
a.clA2:hover{color: #CC00; text-decoration:underline;}
a.clA2:visited{color: Green; text-decoration:underline;}
a.clA3:hover{color: #FFCC00; text-decoration:underline;}
a.clA3:visited{color: #99CCFF; text-decoration:underline;}
a.clA4:hover{color: #FFCC00; text-decoration:underline;}
a.clA4:visited{color: #99CCFF; text-decoration:underline;}

/* NEEDED STYLES */
div.slideMenuBG{position:absolute; left:0; top:0; z-index:1}
div.slideMenuText{position:absolute; left:2; top:2; z-index:200;}
/* NEEDED ----- This class should be named like this:
#NAME_OF_YOUR_MENUcont
*/
#slideMenucont{position:absolute; height:600; width:200; visibility:hidden;}

This is the javascript that makes it all work. This script was created byThomas Bratti of dhtmlcentral.com. Use any text editor, i.e. notepad,vi and create a file called "slidemenu.js" paste the contents below into it. Then place this file in: xcart/skin1/

Quote:

/************************************************** **********************************
Making cross-browser objects
************************************************** **********************************/
function makeMenuObj(obj,nest){
nest=(!nest) ? "":'document.'+nest+'.'
this.evnt = document.getElementById?document.getElementById(ob j):document.all?document.all[obj]:document.layers?eval(nest+'document.'+obj):0;
this.css = this.evnt.style?this.evnt.style:this.evnt;
this.ref=document.layers?this.evnt.document:docume nt;
this.x=this.css.left||this.evnt.offsetLeft;
this.y=this.css.top||this.evnt.offsetTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.movey=b_movey
this.moveIt=b_moveIt; this.moveBy=b_moveBy; this.status=0;
this.bgImg=b_bgImg; this.obj = obj + "Object"; eval(this.obj + "=this");
this.clipTo=b_clipTo;
return this
}
function b_showIt(){this.css.visibility="visible"; this.status=1}
function b_hideIt(){this.css.visibility="hidden"; this.status=0}
function b_movey(y){this.y=y; this.css.top=this.y}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x;this.css.top=this.y}
function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x;this.css.top=this.y}
function b_bgImg(img){
if(document.getElementById) document.getElementById(this.id+"_img").src = img
else if(document.layers) this.ref.layers[0].document.images[0].src = img
else document.images[this.id+"_img"].src = img
}
function b_clipTo(t,r,b,l,w){if(document.layers){this.css.c lip.top=t;this.css.clip.right=r
this.css.clip.bottom=b;this.css.clip.left=l
}else{this.css.clip="rect("+t+"px,"+r+"px,"+b+"px, "+l+"px)"; if(w){this.css.pixelWidth=this.css.width=r; this.css.pixelHeight=this.css.height=b}}}
/************************************************** ******************************
Initiating page, making objects..
************************************************** ******************************/
createSlideMenu.prototype.init = function(){
document.write("</div>")
this.cont=new makeMenuObj(this.name+'cont')
this.cont.moveIt(this.menux,this.menuy)
var yy = 0, el //Make top menus
for(var j=0;j<this.topmenus.length;j++){
el = this.menus[this.topmenus[j]]
el.o = new makeMenuObj(this.name+"_"+el.num,this.name+"cont")
el.o.moveIt(this.l[0].left,yy); el.top = j; el.origy = yy
el.o.id = el.id; el.o.status=1;
el.o.h = this.l[0].height; el.img = this.l[0].regImage
yy+=el.o.h + this.l[0].between; el.o.clipTo(0,this.l[0].width,el.o.h,0,1)
if(j!=this.topmenus.length-1) el.nexttop = this.topmenus[el.top+1]
this.loop(el.num,j)
}
this.cont.showIt(); this.cont = null; this.level = null;
}
createSlideMenu.prototype.loop = function(num,j){
var el = this.menus[num],temp,p,h,w,y,img
for(var i=0;i<el.childs.length;i++){
temp = el.childs[i]
w = this.l[temp.lev].width; h = this.l[temp.lev].height
y = el.o.y+el.o.h + h*i + this.l[temp.lev].between*i + this.l[temp.lev].between
temp.o = new makeMenuObj(this.name+"_"+temp.num,this.name+"cont ")
temp.o.hideIt(); temp.o.clipTo(0,w,h,0,1)
temp.o.moveIt(this.l[temp.lev].left,y)
el.endy =y+h; temp.origy = y
temp.o.zIndex=temp.num
temp.o.h = h; temp.top = j
temp.chnum = i; temp.o.id = temp.id
if(this.useImages){ //Setting bgimage
img=""
if(temp.childs.length>0){ //With subs
if(i==el.childs.length-1) img=this.l[temp.lev].subRound
else img=this.l[temp.lev].subImg
}else if(i==el.childs.length-1){
img=this.l[temp.lev].roundImg2
}
if(img){
temp.o.bgImg(img); temp.img = img
}else temp.img = this.l[temp.lev].regImage
}
p = this.menus[temp.parent] //Setting the next elements
if(temp.chnum != p.childs.length-1){ //Not the last el
temp.nextel = p.childs[temp.chnum+1].num
temp.nexttop = temp.lev==1?p.nexttop:p.nextel
}else{ //Last el, so we only have nexttop
temp.nexttop = p.nextel
if(temp.nexttop==-1) temp.nexttop = p.nexttop
}
if(temp.childs.length>0){
this.loop(temp.num,j) //Recursive call
}
}
}

/************************************************** ******************************
Moving all objects in the array after a provided array number
************************************************** ******************************/
createSlideMenu.prototype.moveItems = function(px,num){
for(i=num;i<this.menus.length;i++){
if(this.menus[i].o.status){ //Moving all visible menus
this.menus[i].o.movey(this.menus[i].o.y+px)
}
}
}
/************************************************** ******************************
Switch menu function.
************************************************** ******************************/
createSlideMenu.prototype.switchMenu = function(num){
if(this.going) return
var m = this.menus[num]
if(m.childs.length==0) return
this.going = 1
var y=m.o.y+ m.o.h +this.l[m.lev].between
var clnum = m.num, olev = m.lev, onext = m.nextel
if(this.active[0]>-1){
var n = -1
if(m.lev>0){
if(this.active[m.lev]>-1) n=this.active[m.lev]
else n=this.active[m.lev-1]
}else n = this.active[0]
m = this.menus[n]
if(m.lev == 0 && olev==0) y = m.nexttop!=-1?this.menus[m.nexttop].origy:-1
else if(clnum!=m.num){
var ny = m.o.y + m.o.h + this.l[m.lev].between
if(clnum>m.num && olev==m.lev) y = Math.min(ny,y)
else if(onext==m.num) y = Math.max(ny,y)
}
}
this.moveUp(m.nextel!=-1?m.nextel:m.nexttop,num,y)
}
/************************************************** ******************************
Move items up
************************************************** ******************************/
createSlideMenu.prototype.moveUp = function(top,num,y){
var move = 0, m, yy=0;
if(this.active[0]>-1 && top>-1){
m = this.menus[top]
if(m.o.y>y){
if((m.o.y-this.pxspeed)<y) yy = -(((m.o.y-y)))
else yy=-this.pxspeed; this.moveItems(yy,top)
move=1
}
}
if(move) setTimeout(this.name+".moveUp("+top+","+num+","+y+ ")",this.timspeed)
else{
m = this.menus[num]
for(var i=m.lev;i<this.active.length;i++){ //Reset images - actives et cetera
if(this.active[i]>-1){
temp = this.menus[this.active[i]]
temp.o.moveIt(temp.o.x-this.inset,temp.o.y)
if(this.useImages) temp.o.bgImg(temp.img) //Change bg
if(this.arrow) temp.ar.replaceChild(document.createTextNode("4"), temp.ar.childNodes[0])
ch = temp.childs
for(var j=0;j<ch.length;j++){
ch[j].o.hideIt(); ch[j].o.movey(ch[j].origy)
}
this.active[i] = -1
}
}
//Then open the current one, if childs
if(m.childs.length == 0){this.going = 0; return}
for(i=0;i<m.childs.length;i++){ //Show all
m.childs[i].o.showIt()
y = m.childs[i].o.y + m.childs[i].o.h
}
y+=this.l[m.lev].between
if(m.lev>0 && m.chnum!=this.menus[m.parent].childs.length-1){
yy=y; y = this.menus[m.parent].endy + this.l[m.lev].between
}
m.o.moveIt(m.o.x+this.inset,m.o.y) //Inset current item:
if(this.useImages) m.o.bgImg(this.l[m.lev].roundImg) //Change bg
this.active[m.lev] = num //Set active
if(this.arrow) m.ar.replaceChild(document.createTextNode("6"),m.a r.childNodes[0])
if(m.nexttop>-1 || m.nextel>-1) this.moveDown(m.nexttop,m.nextel,y,yy) //Then start moving all other elements down
else this.going=0
}
}
/************************************************** ******************************
Move items down
************************************************** ******************************/
createSlideMenu.prototype.moveDown = function(top,num,y,yyy){
var m = this.menus[top],yy
if(m && m.o.y<y){
if((m.o.y+this.pxspeed)>y) yy = y-m.o.y
else yy=this.pxspeed
this.moveItems(yy,top)
setTimeout(this.name+".moveDown("+top+","+num+","+ y+","+yyy+")",this.timspeed)
}else if(num>-1){
this.moveDown(num,-1,yyy,0)
}else this.going=0
}
/************************************************** ******************************
Slide menu object
************************************************** ******************************/
function createSlideMenu(name){
document.write('<div id="'+name+'cont">') //The cont div start
this.name = name
this.menus = new Array()
this.curr = 0
this.lasttype = new Array()
this.writesubsonly = 0
this.level = new Array()
this.l = new Array()
this.topmenus = new Array()
this.active = new Array()
return this
}
/************************************************** ******************************
Function to create the objects and the divs
************************************************** ******************************/
createSlideMenu.prototype.makeMenu = function(type,text,lnk,target,end){
var str="",tg="",parent,m,cl
m = this.menus[this.curr] = new Object()
this.lasttype[type] = this.curr; if(!lnk) lnk="#"
m.lev = 0; m.type = type; m.childs = new Array()
m.num = this.curr; m.parent = -1; m.nextel = -1
m.nexttop = -1; parent = 0
//DEBUGGING::::::
m.text = text

if(type.indexOf("sub")>-1){ //Find parent type
if(type.length == 3){ //sub
parent = "top"; m.lev = 1
}else{
parent = type.substr(3,1) //sub2+
m.lev = parent; parent--
if(parent==1){
parent = "sub"; m.lev = 2
}else parent = "sub"+parent
}
}
if(m.lev>=this.l.length){//Level control (same as CM4)
var p1,p2=0;
if(m.lev>=this.level.length) p1=this.l[this.level.length-1];
else p1=this.level[m.lev];
this.l[m.lev]=new Array();
if(!p2) p2=this.l[m.lev-1]
if(m.lev!=0 && p1){
for(i in p1){ //Copying an entire object
if(p1[i]==null) this.l[m.lev][i]=p2[i];
else this.l[m.lev][i]=p1[i]
}
}else{
this.l[m.lev]=this.level[0];
}
this.level[m.lev]=p1=p2=null
}
this.active[m.lev] = -1
if(parent){ //Find parent element
m.parent = this.lasttype[parent]
parent = this.menus[this.lasttype[parent]]
parent.childs[parent.childs.length] = m
if(this.arrow && parent.childs.length==1){str='<span class="'+this.arrow+'">4</span>'
if(document.getElementById && document.getElementById(parent.id).childNodes){
parent.ar = document.getElementById(parent.id).childNodes[this.useImage?1:0].childNodes[0]
parent.ar.innerHTML = str+parent.ar.innerHTML; parent.ar=parent.ar.childNodes[0]} else this.arrow=""
}
}else this.topmenus[this.topmenus.length] = this.curr
if(!this.writesubsonly || type!="top"){
cl = this.l[m.lev].className
m.id = id = this.name + "_" + this.curr
str= '<div id="'+id+'" class="'+cl+'">' //main div start
if(this.useImages){
str+='<div class="'+this.bgClass+'">'//bgdiv
str+='[img]'+this.l[m.lev].regImage+'[/img]'
str+='</div>' //bgdiv
}
if(target) tg =' target="'+target+'" '
str+='<div class="'+this.txtClass+'"> '+text+'
</div>\n'
str+="</div>\n\n" //main div end
document.write(str)
}
this.curr++
}

/************************************************** ******************************
Level object
************************************************** ******************************/
function slideMenu_makeLevel(){
var c=this, a=arguments;
c.left=a[0]||0; c.width=a[1]||null; c.height=a[2]||null;
c.between=a[3]||null; c.className=a[4]||null; c.classNameA=a[5]||null;
c.regImage=a[6]||null; c.roundImg=a[7]||null; c.roundImg2=a[8]||null;
c.subImg=a[9]||null; c.subRound=a[10]||null; return c
}
/************************************************** ******************************
Preloading images
************************************************** ******************************/
function preLoadBackgrounds(){
for(i=0;i<arguments.length;i++){
this[i]=new Image()
this[i].src=arguments[i]
}
return this
}

Enjoy,

Glen

nice... 8)

Looks really cool on you site.

Thanks Funky Dunk!

I sttill have not gone live yet and what you see wil be changing, layout included. I may use this menu, but as you may have seen in one of my othe posts, I have flash menu that uses an .xml file that I would like to implement. The only part left with that is to make it populate dynamically.
Well back to work........ :D

Regards,

Glen

Very nice work...

It looks great! However, the first time I visited it, the links were the same color as the buttons, so it was very hard to read them, but then when I revisited it, the links were light blue. Maybe a style sheet problem?

wow, i should send you flowers...thx for this one dealsondeals, im gonna use this one !!

:D My pleasure movienett, after all it is the sharing which takes place on forum that makes x-cart a very effective solution compared to others.

Are you going to use it with the background images behind the text or without? Each level has five .gifs asscoiated with it. If you need, I can email you the images and you can modify them as needed.

Regards,

Glen

Seems like im having a problem with this, i uploaded the js to skin1, mod cutstomer/categories.tpl, and pasted into skin1.css, and when i should go check out my new feature, all my categories were lost 8O

guess i did wrong somewhere, but cannot find out where...

Any Browser Requirements?

Excellent implementation. I was wondering what browsers were required, if any, for the script to function properly?

Thanks!

Movienett,

:| I am not sure what necessarily needs to be fixed without looking at the files in your directories. But, I would recommend checking to make sure you don't have any unintentional or unnecessary white-space, resulting from the process of copying and pasting. Give it another shot and let me know how you make it. If needed I'll take alook at your set-up.

Regards,

Glen

Machnhed1,

The script works on all 4.x+ browsers.

Regards,

Glen

I uploaded the js to skin1, mod cutstomer/categories.tpl, and pasted into skin1.css, and when i should go check out my new feature, all my categories were lost

guess i did wrong somewhere, but cannot find out where...please help.....

thanks

Hey Deals that is a sweet menu..... I would definitly implement this on my site as its MUCH better than stock...

Great work and thank you for sharing !!!

Very nice, thanks for sharing

:D Thanks bmaworld & john80y!

I haven't really had the opportunity to much more, been busy upstarting a web hosting and design business - http://www.mind-in-design.net But I hope to do some more mods in the near future. I wish you lots of fun with your x-carts.

dairy6888 - please email me so that I can assist you with the problem your experiencing. If possible please email me your categories.tpl file.

Thanks,

Glen

Hmm. i got problems like dairy6888.
All categories are lost.

Anyone know why ?

Thanks.

iCARus

iCARus,

I am not sure what necessarily needs to be fixed without looking at the files in your directories. But, I would recommend checking to make sure you don't have any unintentional or unnecessary white-space, resulting from the process of copying and pasting. Also, be sure that "slidemenu.js" is placed in: xcart/skin1/ . Give it another shot and let me know how you make it. If needed I'll take alook at your set-up.

Regards,

Glen

I make it work!!!

Finally, I know where the problem is. For all beginner user like me, you have to put the followings script:

under //Image preload .......... and before the {/literal} tag. Then you can see your menu right away!!!

DealonDeals>> Do you have another new version which extract data from db and to form a slide menu?

slideMenu.makeMenu('top',"Electronics");
slideMenu.makeMenu('sub',"Televisions");
slideMenu.makeMenu('sub2',"HDTV Projection",'home.php?cat=9');
slideMenu.makeMenu('sub2',"HDTV CRT",'home.php?cat=60');
slideMenu.makeMenu('sub2',"HDTV Plasma & LCD",'home.php?cat=61');
slideMenu.makeMenu('sub2',"27in.- 36in.",'home.php?cat=62');
slideMenu.makeMenu('sub2',"14in.- 20in.",'home.php?cat=63');
slideMenu.makeMenu('sub2',"TV-DVD Combos",'home.php?cat=64');
slideMenu.makeMenu('sub2',"TV-VCR Combos",'home.php?cat=65');
slideMenu.makeMenu('sub2',"Handheld",'home.php?cat =66');
slideMenu.makeMenu('sub',"Video");
slideMenu.makeMenu('sub2',"DVD Players",'home.php?cat=67');
slideMenu.makeMenu('sub2',"VCR\'s",'home.php?cat=6 8');
slideMenu.makeMenu('sub2',"Portable Video",'home.php?cat=69');
slideMenu.makeMenu('sub',"Audio");
slideMenu.makeMenu('sub2',"Receivers",'home.php?ca t=70');
slideMenu.makeMenu('sub2',"Portable Audio");
slideMenu.makeMenu('sub3',"MP3 Players",'home.php?cat=74');
slideMenu.makeMenu('sub3',"CD Players",'home.php?cat=75');
slideMenu.makeMenu('sub2',"CD Players",'home.php?cat=71');
slideMenu.makeMenu('sub2',"Speakers",'home.php?cat =72');
slideMenu.makeMenu('sub',"Camcorders");
slideMenu.makeMenu('sub2',"Mini-DV",'home.php?cat=76');
slideMenu.makeMenu('sub2',"Hi-8",'home.php?cat=77');
slideMenu.makeMenu('sub2',"VHS-C",'home.php?cat=78');
slideMenu.makeMenu('sub',"Car-Mobile");
slideMenu.makeMenu('sub2',"Car Audio",'home.php?cat=79');
slideMenu.makeMenu('sub2',"GPS");
slideMenu.makeMenu('sub3',"Garmin",'home.php?cat=9 1');
slideMenu.makeMenu('sub3',"Magellan",'home.php?cat =92');
slideMenu.makeMenu('sub2',"Car Video",'home.php?cat=80');
slideMenu.makeMenu('sub',"Telephones");
slideMenu.makeMenu('sub2',"Corded Phones",'home.php?cat=82');
slideMenu.makeMenu('sub2',"Cordless Phones",'home.php?cat=83');
slideMenu.makeMenu('sub2',"Novelty Phones",'home.php?cat=84');
slideMenu.makeMenu('sub2',"Business Phones",'home.php?cat=85');
slideMenu.makeMenu('sub2',"Phone Systems",'home.php?cat=86');
slideMenu.makeMenu('sub',"FRS & GMRS Radios");
slideMenu.makeMenu('sub2',"FRS",'home.php?cat=87') ;
slideMenu.makeMenu('sub2',"GMRS",'home.php?cat=88' );
slideMenu.makeMenu('sub',"GPS");
slideMenu.makeMenu('sub2',"Garmin",'home.php?cat=8 9');
slideMenu.makeMenu('sub2',"Magellan",'home.php?cat =90');
slideMenu.makeMenu('sub',"Digital Cameras",'home.php?cat=16');
slideMenu.makeMenu('sub',"Game Systems",'home.php?cat=109');
slideMenu.makeMenu('top',"Computers");
slideMenu.makeMenu('sub',"Laptops",'home.php?cat=2 0');
slideMenu.makeMenu('sub',"Desktops",'home.php?cat= 21');
slideMenu.makeMenu('sub',"PDAs",'home.php?cat=22') ;
slideMenu.makeMenu('sub',"Processors",'home.php?ca t=23');
slideMenu.makeMenu('sub',"Printers",'home.php?cat= 24');
slideMenu.makeMenu('sub',"Compaq Recertified",'home.php?cat=25');
slideMenu.makeMenu('top',"Software");
slideMenu.makeMenu('sub',"Operating Systems",'home.php?cat=26');
slideMenu.makeMenu('sub',"Games");
slideMenu.makeMenu('sub2',"PC",'home.php?cat=113') ;
slideMenu.makeMenu('sub2',"X-Box",'home.php?cat=110');
slideMenu.makeMenu('sub2',"Playstation 2",'home.php?cat=111');
slideMenu.makeMenu('sub2',"Playstation",'home.php? cat=112');
slideMenu.makeMenu('sub',"Utilities",'home.php?cat =27');
slideMenu.makeMenu('sub',"Business",'home.php?cat= 28');
slideMenu.makeMenu('sub',"Training",'home.php?cat= 29');
slideMenu.makeMenu('sub',"Multimedia",'home.php?ca t=30');
slideMenu.makeMenu('sub',"Children Titles",'home.php?cat=32');
slideMenu.makeMenu('top',"Spy Center");
slideMenu.makeMenu('sub',"Hidden Cameras",'home.php?cat=33');
slideMenu.makeMenu('sub',"Micro Wired Cameras",'home.php?cat=34');
slideMenu.makeMenu('sub',"Wireless Cameras",'home.php?cat=35');
slideMenu.makeMenu('sub',"Video Systems",'home.php?cat=36');
slideMenu.makeMenu('sub',"Receivers & Monitors",'home.php?cat=37');
slideMenu.makeMenu('sub',"Personal Protection",'home.php?cat=38');
slideMenu.makeMenu('top',"Home Automation");
slideMenu.makeMenu('sub',"Starter Kits",'home.php?cat=40');
slideMenu.makeMenu('sub',"X10 Products",'home.php?cat=39');
slideMenu.makeMenu('sub',"Computer Control",'home.php?cat=41');
slideMenu.makeMenu('sub',"Security Systems",'home.php?cat=42');
slideMenu.makeMenu('sub',"Home Theater",'home.php?cat=43');
slideMenu.makeMenu('sub',"Phone & Comm.",'home.php?cat=44');
slideMenu.makeMenu('sub',"Door & Drapes",'home.php?cat=45');
slideMenu.makeMenu('sub',"Pet & Plant Care",'home.php?cat=46');
slideMenu.makeMenu('top',"Accessories");
slideMenu.makeMenu('sub',"Camcorder",'home.php?cat =47');
slideMenu.makeMenu('sub',"Digital Camera",'home.php?cat=48');
slideMenu.makeMenu('sub',"Cell Phone",'home.php?cat=49');
slideMenu.makeMenu('sub',"Game",'home.php?cat=50') ;
slideMenu.makeMenu('sub',"Cables",'home.php?cat=51 ');
slideMenu.makeMenu('sub',"Batteries",'home.php?cat =52');
slideMenu.makeMenu('sub',"Miscellanous",'home.php? cat=53');
slideMenu.makeMenu('top',"Warranty Products");
slideMenu.makeMenu('sub',"XChange Card",'home.php?cat=94');
slideMenu.makeMenu('sub',"Television");
slideMenu.makeMenu('sub2',"Carry-In Service",'home.php?cat=105');
slideMenu.makeMenu('sub2',"In-Home Service",'home.php?cat=106');
slideMenu.makeMenu('sub',"Video Equipment",'home.php?cat=96');
slideMenu.makeMenu('sub',"Home Audio",'home.php?cat=97');
slideMenu.makeMenu('sub',"Home Theater",'home.php?cat=98');
slideMenu.makeMenu('sub',"Camcorders",'home.php?ca t=99');
slideMenu.makeMenu('sub',"Digital Cameras",'home.php?cat=100');
slideMenu.makeMenu('sub',"Car Systems",'home.php?cat=101');
slideMenu.makeMenu('sub',"Computer Systems",'home.php?cat=102');
slideMenu.makeMenu('sub',"Computer Periphals",'home.php?cat=103');
slideMenu.makeMenu('sub',"Laptop-Notebooks");
slideMenu.makeMenu('sub2',"Carry-In Service",'home.php?cat=107');
slideMenu.makeMenu('sub2',"On-Site Service",'home.php?cat=108');
slideMenu.makeMenu('top',"Miscellanous");
slideMenu.makeMenu('sub',"Automotive",'home.php?ca t=58');
slideMenu.makeMenu('sub',"Health & Wellness",'home.php?cat=59');
slideMenu.makeMenu('top',"Auctions");
slideMenu.makeMenu('sub',"eBay",'home.php?cat=55') ;
slideMenu.makeMenu('sub',"Yahoo Auctions",'home.php?cat=56');
slideMenu.makeMenu('sub',"Amazon Auctions",'home.php?cat=57');
slideMenu.init();

{/literal}

Re: Sliding Menu that displays categories and sub-categories

Quote:

Also very important, you are already aware that categories.tpl is referenced in the left-hand column of home.tpl, I would recommend either clearing the contents of the left-hand column to contain only categories.tpl or place some items like authbox.tpl above categories.tpl or place them elsewhere on the page.

How would I rearrange my menus? I would Like to place the "specials" menu above the "categories" and move the "help" to the right side at the bottom under news.

I'm just not sure how to edit the home.tpl to do this.

Please help, I'm anxious to try this out!

Jeff

Next time i'll just be brave and try before asking!

That was too easy.

Goooooood x-cart...

dairy6888,

You went to "View Source" in your browser when looking at my page. What you have posted is the result of the script running and querying the DB for the category information. If you choose to hard-code the categories, that is choice you can make. But the script does query the DB and return the results. Please be sure that you have followed all steps. You still have not sent me your categories.tpl as I have requested, so that I can test it.

Regards,

Glen

Jeff,

Sorry I couldn't get to you sooner. Good job on figuring things out!

Regards,

Glen

Catagories not appearing

Can you help me identify what is wrong, and why my menus aren't appearing? I put the .js file in the /skin1 directory, and changed the .css file.

Thanks

Here is my catagories.tpl:

{* $Id: categories.tpl,v 1.16 2002/10/21 07:06:43 zorg Exp $ *}
<script language="JavaScript" src="../skin1/slidemenu.js" type="text/javascript">
</script>
<script language="JavaScript">
{literal}
slideMenu = new createSlideMenu("slideMenu")
//Variables to set:
slideMenu.menuy=95 //The top placement of the menu.
slideMenu.menux=5 //The left placement of the menu
slideMenu.useImages = 0 //Are you using images or not? Yes - 1, No - 0
slideMenu.pxspeed=20 //The pixel speed of the animation
slideMenu.timspeed=25 //The timer speed of the animation
slideMenu.inset = 10 //How much the selected items should pop to the left
slideMenu.arrow = 0 //Set this to className that has font-family:webdings
//if you want to use the arrow feature. Note:
//This ONLY works on DOM capable browsers, and with
//useImages set to 0 - It's basically just a test I did.
//I hope to improve it later on.
//Needed dummy classes - leave in the stylesheet!
slideMenu.bgClass = "slideMenuBG"
slideMenu.txtClass = "slideMenuText"
$ip = '../skin1/images/menu/';
slideMenu.level[0] = new slideMenu_makeLevel(
left = 0,
width = 138,
height = 21,
between = 5,
className = "clSlideMenu",
classNameA = "clA0",
regImage = $ip+"level0_regular.gif",
roundImg = $ip+"level0_round.gif",
roundImg2 = "",
subImg = "",
subRound= "")
slideMenu.level[1] = new slideMenu_makeLevel(10,127,20,2,"clSlideMenu","clA 1",$ip+"level1_regular.gif",$ip+"level1_round2.gif ",$ip+"level1_round.gif",$ip+"level1_sub.gif", $ip+"level1_sub_round.gif")
slideMenu.level[2] = new slideMenu_makeLevel(21,118,18,2,"clSlideMenu","clA 2",$ip+"level2_regular.gif",$ip+"level2_round2.gif ",$ip+"level2_round.gif",$ip+"level2_sub.gif", $ip+"level2_sub_round.gif")
slideMenu.level[3] = new slideMenu_makeLevel(33,108,20,2,"clSlideMenu","clA 3",$ip+"level3_regular.gif",$ip+"level3_round2.gif ",$ip+"level3_round.gif",$ip+"level3_sub.gif", $ip+"level3_sub_round.gif")
slideMenu.level[4] = new slideMenu_makeLevel(40,107,19,2,"clSlideMenu","clA 4",$ip+"level4_regular.gif",$ip+"level4_round2.gif ",$ip+"level4_round.gif",$ip+"level4_sub.gif", $ip+"level4_sub_round.gif")
//Image preload --- leave this
for(var i=0;i<slideMenu.level;i++){
var l = slideMenu.level[i]
new preLoadBackgrounds(l.regImage,l.roundImg,l.roundIm g2,l.subImg,l.subRound)
}
{/literal}
{php}
function find_idx($a, $label)
{
while( list($k,$v) = each($a) ){
if( isset($v['label']) && $v['label'] == $label )
return $k;
}
return -1;
}
function cmp($a, $b)
{
if( $a['orderby'] == $b['orderby'] ) return 0;
return ($a['orderby'] < $b['orderby'] ) ? -1 : 1;
}
function sort_cat(&$list)
{
while( list($k,$v) = each($list) ){
if( isset($v['sub']) )
usort(&$v['sub'],'cmp');
}
usort($list,'cmp');
}
function preparelist($list)
{
$r = array();
$c = false;
$cnt = 1;
while (list ($k, $v) = each ($list) ){
$l = split('/',$v['category']);
// init tree
$p = & $r;
for( $i=0; $i<sizeof($l); $i++ ){
$idx = find_idx($p,$l[$i]);
$lastest = ( $i == sizeof($l)-1 );
if( $idx == -1 ) {
if( $lastest ){
if( isset($p[0]) && isset($p[0]['orderby']) && $p[0]['orderby'] > $v['order_by']){
array_unshift($p, array( 'label'=>$l[$i] ) );
$idx = 0;
}
else {
array_push($p, array( 'label'=>$l[$i] ) );
$idx = sizeof($p)-1;
}
}
else {
array_push($p, array( 'label'=>$l[$i] ) );
$idx = sizeof($p)-1;
}
}
$p = & $p[$idx];
if( $lastest )
$p['orderby'] = $v['order_by'];
// set url
if( $lastest )
$p['url'] = $v['categoryid'];
else {
if( !isset( $p['sub'] ) )
$p['sub'] = array();
$p = & $p['sub'];
}
}
$cnt++;
}
return $r;
}
function fill_menu($menu,$level)
{
switch( $level ){
case '0': $l = 'top'; break;
case '1': $l = 'sub'; break;
default: $l = 'sub'.$level; break;
}
while ( list($idx,$cnt) = each($menu) ){
$item = $menu[$idx]; $label = addslashes($item['label']);
if( isset($item['sub']) ){
print "slideMenu.makeMenu('$l',\"$label\");\n";
fill_menu($item['sub'],$level+1);
}
else
print "slideMenu.makeMenu('$l',\"$label\",'home.php?cat= ".$item['url']."');\n";
}
}
$list = preparelist($allcategories);
sort_cat(&$list);
fill_menu($list,0);
print "slideMenu.init();\n\n";
{/php}
</SCRIPT>
<TABLE border=0 cellPadding=5 cellSpacing=0 width=100%>

<tr><td colspan=2 nowrap>
{if $config.General.root_categories eq "Y"}
{/if}
</td></tr>
</TABLE>

Oh, in case this is the problem, i'm using version
3.4.1

I have the same problem in that my categories disapeared...

Fortunatly I set up a test server and nothing was lost for me :)

It does look sweet and I would really like to use it.

I've reset everything so all is well, but I would really like to use this menu, on second thought though, I'm wondering how this would affect the search engines ability to crawl static pages that I would generate after implementing this slide menu?

so no1 has a solution for this ???
Why are all categories disappear?

Is there a demo?

Thanks in advance :)

Is there a non javascript version of this.

Is there a non javascript version of this? We are using X-Cart 3.4.6

[-o< ok, ok

First, I do not have a non-javascript version of this MOD. Second it was developed on 3.3.x branch several months ago - eight months ago to be exact. I will look at updating it for 3.4.x branch very soon, probably within the next two-to-three weeks.

Regards,

Glen

would love to see this mod for 3.4.x

That is really one of the best parts about Xcart, all the support from fellow users and helpful mods.

If your still around Deals on Deals I have been ripping your code apart trying to get it to work on my xcart 3.4.8

I am stuck on one part though. I am getting an error that says:

Warning: Variable passed to each() is not an array or object in /usr/www/htdocs/saddlemen/test_site/xcart/customer/slidedown.php on line 32
slideMenu.init();

Line 32 is the bold one:

function preparelist($list)
{
$r = array();
$c = false;
$cnt = 1;
while (list ($k, $v) = each ($list) ){
$l = split('/',$v['category']);
// init tree
$p = & $r;
for( $i=0; $i<sizeof($l); $i++ ){
$idx = find_idx($p,$l[$i]);
$lastest = ( $i == sizeof($l)-1 );
if( $idx == -1 ) {
if( $lastest ){
if( isset($p[0]) && isset($p[0]['orderby']) && $p[0]['orderby'] > $v['order_by']){
array_unshift($p, array( 'label'=>$l[$i] ) );
$idx = 0;
}

Now I may have been just staring at this code to long, Im going to go get something to eat and come back but thought I would post in the chance you see this.

Lost my categories

I copied everything and checked to make sure that white space was not added. I lost my categories and after restoring the back up of the two files I still don't have my categories.

Please help.

xcart 3.5.4

Hi Guys,

After hunting around for a reason why I have zero
slideMenu.makeMenu(XXXXXXX) entries when I view source, I debugged a long time to find out that with recent version of Smarty Class, {php}{/php} tags are not allowed references to smarty variables.

meaning the $allcategories and $list is basically empty

Code:

$list = preparelist($allcategories);

sort_cat(&$list); 



fill_menu($list,0);

To get around this, you will have to use a smarty prefilter function, which brings on a performance hit onto your pages. IMO if you can bear to use this mod that DealsonDeals kindly and FREELY provided, then don't worry about the performance hit.

in categories.tpl, after {php}, insert this line:

Code:

extract($this->get_template_vars());

I'm doing my own version of submenu display, but I'm going to reference to DealsOnDeals' code to do this, I hope you don't mind DealsOnDeals!

I'm looking for a way to better display categories and subcategories.

How to get a menu like in http://www.kegworks.com ?

Looks like a lot of hand written code. Any one else??

Re: Sliding Menu that displays categories and sub-categories

cant get it working with 4.0.19 too bad i wanted to test it out

Re: Sliding Menu that displays categories and sub-categories

Quote:

Originally Posted by shirley2005

I'm looking for a way to better display categories and subcategories.

How to get a menu like in http://www.kegworks.com ?

http://www.bcsengineering.com/store/catalog/Group_Categories_for_Better_Viewing__FREE_Xcart_Mo d-p-62.html

http://www.xcartmods.co.uk/#m2

Re: Sliding Menu that displays categories and sub-categories

Will the code work for horizontal categories?

Re: Sliding Menu that displays categories and sub-categories

Hi Ya'll

just wondering if any one has made the above code work on 4.5 or 4.9?

i would basically just like the sub categories to appear out to the right when a client either hovers over or clicks on a category.

Any suggestions? Gratefully received.

Re: Sliding Menu that displays categories and sub-categories

will this work on 4.1.9 & 4.1.11 ??