Forums Archive Index > SmartMenus 5 > Help with 1st level menu images
Date: 27 Mar 2005 10:55 pm
I'm trying to make the menu work in my homepage and it finally worked for me, but I can't seem to get in a 1st level menu image. I am only able to get a plain text menu. I'm just testing our your basic sample script and changing it to work for me, but now I'm stuck at this point. Can you please look at the code and tell me where I would actually change the script so I can have my own 1st level menu image?
Here's the script that I've been working on:
[/code]// USE WORDWRAP AND MAXIMIZE THE WINDOW TO SEE THIS FILE
// v5
// === 1 === EXTRAS
s_hideTimeout=500;//1000=1 second
s_subShowTimeout=300;//if <=100 the menus will function like SM4.x
s_subMenuOffsetX=4;//pixels (if no subs, leave as you like)
s_subMenuOffsetY=1;
s_keepHighlighted=true;
s_autoSELECTED=false;//make the item linking to the current page SELECTED
s_autoSELECTEDItemsClickable=false;//look at IMPORTANT NOTES 1 in the Manual
s_autoSELECTEDTree=true;//look at IMPORTANT NOTES 1 in the Manual
s_autoSELECTEDTreeItemsClickable=true;//look at IMPORTANT NOTES 1 in the Manual
s_scrollingInterval=30;//scrolling for tall menus
s_rightToLeft=false;
s_hideSELECTsInIE=false;//look at IMPORTANT HOWTOS 7 in the Manual
// === 2 === Default TARGET for all the links
// for navigation to frame, calling functions or
// different target for any link look at
// IMPORTANT HOWTOS 1 NOTES in the Manual
s_target='newWindow';//(newWindow/self/top)
// === 3 === STYLESHEETS- you can define different arrays and then assign
// them to any menu you want with the s_add() function
s_CSSTop=[
'#4A49A8', // BorderColorDOM ('top right bottom left' or 'all')
'#4A49A8', // BorderColorNS4
1, // BorderWidth
'#CBCBEF', // BgColor
1, // Padding
'#CBCBEF', // ItemBgColor
'#4A49A8', // ItemOverBgColor
'#4A49A8', // ItemFontColor
'#FFFFFF', // ItemOverFontColor
'verdana,arial,helvetica,sans-serif', // ItemFontFamily
'10px', // ItemFontSize (css)
'1', // ItemFontSize Netscape4 (look at KNOWN BUGS 3 in the Manual)
'bold', // ItemFontWeight (bold/normal)
'left', // ItemTextAlign (left/center/right)
3, // ItemPadding
1, // ItemSeparatorSize
'#8A8CCC', // ItemSeparatorColor
'progid:DXImageTransform.Microsoft.GradientWipe(duration=0.5,wipeStyle=1)', // IEfilter (look at Samples\IE4(5.5)Filters dirs)
true, // UseSubImg
'/images/menu1.gif', // SubImgSrc
'/images/menu1.gif', // OverSubImgSrc
7, // SubImgWidth
7, // SubImgHeight
5, // SubImgTop px (from item top)
'#8A8CCC', // SELECTED ItemBgColor
'#FFFFFF', // SELECTED ItemFontColor
'/images/menu1.gif', // SELECTED SubImgSrc
true, // UseScrollingForTallMenus
'/images/menu1.gif', // ScrollingImgTopSrc
'../../images/scrollbottom.gif',// ScrollingImgBottomSrc
68, // ScrollingImgWidth
12, // ScrollingImgHeight
'', // ItemClass (css)
'', // ItemOverClass (css)
'', // SELECTED ItemClass (css)
0, // ItemBorderWidth
'#CBCBEF', // ItemBorderColor ('top right bottom left' or 'all')
'#FFFFFF', // ItemBorderOverColor ('top right bottom left' or 'all')
'#FFFFFF', // SELECTED ItemBorderColor ('top right bottom left' or 'all')
0, // ItemSeparatorSpacing
'' // ItemSeparatorBgImage
];
s_CSSred=['#EEEDF5 #4A49A8 #4A49A8 #EEEDF5','#4A49A8',1,'#fffbf0',2,'#fffbf0','#bebddf','#ff0000','#000000','arial,helvetica,sans-serif','10pt','2','normal','center',5,1,'#bebddf','progid:DXImageTransform.Microsoft.GradientWipe(duration=0.5,wipeStyle=1)',true,'/images/menu1.gif','../../images/arrow3.gif',7,7,9,'#C0C0C0','#FFFFFF','../../images/arrow2.gif',true,'../../images/scrolltop.gif','../../images/scrollbottom.gif',68,12,'','','',2,'#fffbf0','#8583BE #DDDCEA #DDDCEA #8583BE','#ff0000',1,'../../images/separator_bg.gif'];
Also, in looking at your manual, there are many menu properties that are not listed in the s_arrays.js script. Am I supposed to just add them in myself from your manual? I did this and it came up with errors! Please help!
Thanks
Date: 29 Mar 2005 4:38 am
Hi,
Please take a look at the "Samples" -> "Only Images" example. You will see that the permanent menu there is built entirely from images and text in the menu items is not used at all. Open the "s_arrays.js" file in that directory and you will see the following for the permanent menu definition:
s_add(
{
N:'permanent', // NAME
LV:1, // LEVEL (look at IMPORTANT NOTES 1 in the Manual)
W:150, // WIDTH
T:120, // TOP (look at IMPORTANT HOWTOS 6 in the Manual)
L:15, // LEFT (look at IMPORTANT HOWTOS 6 in the Manual)
P:true, // menu is PERMANENT (you can only set true if this is LEVEL 1 menu)
S:s_CSSpermanent // STYLE Array to use for this menu
},
[
{Image:['1.gif',150,21],U:'',T:''},
{Image:['2.gif',150,19],OnImage:'2_on.gif',U:'../../update.html',T:''},
{Image:['3.gif',150,19],OnImage:'3_on.gif',U:'../../compatibility.html',T:''},
{Image:['4.gif',150,19],OnImage:'4_on.gif',U:'../../Manual/forum.html',T:''},
{Image:['5.gif',150,20],OnImage:'5_on.gif',U:'mailto:smartmenus@smartmenus.org',T:''}
]
);
The code in green is used to define the images in the menu items. You have to use the Image and OnImage menu item properties.
btsuda wrote:
Also, in looking at your manual, there are many menu properties that are not listed in the s_arrays.js script. Am I supposed to just add them in myself from your manual? I did this and it came up with errors!
Here is how you can use any menu property or menu item property when you need. You have to add them to the menu definitions in your configuration file ("s_arrays.js") like this:
s_add(
{N:'my_menu',MinW:140,LV:1,T:15,L:100,P:false,S:s_CSSTop,BGI:'menu_bg.gif',BW:3},
[
{U:'http://www.smartmenus.org/',T:'SmartMenus DHTML menu',FontColor:'green',FontWeight:'bold'},
{U:'http://www.smartmenus.org/',T:'SmartMenus DHTML menu',FontColor:'brown'},
{U:'http://www.smartmenus.org/',T:'SmartMenus DHTML menu',FontColor:'yellow',FontWeight:'bold',TextAlign:'center'}
]
);
The menu properties are in blue and the menu item properties are in orange
Date: 31 Mar 2005 11:01 pm
Thanks for your help, it worked! Now, I'm trying to get the relative position "thing" down and I can't figure it out. I've read through the info on the relative position in the samples folder and I've managed to add some of it in. But I can't figure out what I'm doing wrong! Please review and help! I'd like to make the submenus stay put when the browser is resized or the font size is changed or different. Please help! Here's my code below:
// USE WORDWRAP AND MAXIMIZE THE WINDOW TO SEE THIS FILE
// v5
// === 1 === EXTRAS
s_hideTimeout=500;//1000=1 second
s_subShowTimeout=300;//if <=100 the menus will function like SM4.x
s_subMenuOffsetX=4;//pixels (if no subs, leave as you like)
s_subMenuOffsetY=1;
s_keepHighlighted=true;
s_autoSELECTED=false;//make the item linking to the current page SELECTED
s_autoSELECTEDItemsClickable=false;//look at IMPORTANT NOTES 1 in the Manual
s_autoSELECTEDTree=true;//look at IMPORTANT NOTES 1 in the Manual
s_autoSELECTEDTreeItemsClickable=true;//look at IMPORTANT NOTES 1 in the Manual
s_scrollingInterval=30;//scrolling for tall menus
s_rightToLeft=false;
s_hideSELECTsInIE=false;//look at IMPORTANT HOWTOS 7 in the Manual
// === 2 === Default TARGET for all the links
// for navigation to frame, calling functions or
// different target for any link look at
// IMPORTANT HOWTOS 1 NOTES in the Manual
s_target='self';//(newWindow/self/top)
// === 3 === STYLESHEETS- you can define different arrays and then assign
// them to any menu you want with the s_add() function
s_CSSTop=[
'#4A49A8', // BorderColorDOM ('top right bottom left' or 'all')
'#4A49A8', // BorderColorNS4
1, // BorderWidth
'#CBCBEF', // BgColor
0, // Padding
'#BBC6D0', // ItemBgColor
'#4A49A8', // ItemOverBgColor
'#4A49A8', // ItemFontColor
'#FFFFFF', // ItemOverFontColor
'verdana,arial,helvetica,sans-serif', // ItemFontFamily
'10px', // ItemFontSize (css)
'1', // ItemFontSize Netscape4 (look at KNOWN BUGS 3 in the Manual)
'bold', // ItemFontWeight (bold/normal)
'left', // ItemTextAlign (left/center/right)
3, // ItemPadding
1, // ItemSeparatorSize
'#8A8CCC', // ItemSeparatorColor
'progid:DXImageTransform.Microsoft.GradientWipe(duration=0.5,wipeStyle=1)', // IEfilter (look at Samples\IE4(5.5)Filters dirs)
true, // UseSubImg
'/images/menu1.gif', // SubImgSrc
'/images/menu1.gif', // OverSubImgSrc
7, // SubImgWidth
7, // SubImgHeight
5, // SubImgTop px (from item top)
'#8A8CCC', // SELECTED ItemBgColor
'#FFFFFF', // SELECTED ItemFontColor
'/images/menu1.gif', // SELECTED SubImgSrc
true, // UseScrollingForTallMenus
'/images/menu1.gif', // ScrollingImgTopSrc
'../../images/scrollbottom.gif',// ScrollingImgBottomSrc
68, // ScrollingImgWidth
12, // ScrollingImgHeight
'', // ItemClass (css)
'', // ItemOverClass (css)
'', // SELECTED ItemClass (css)
0, // ItemBorderWidth
'#CBCBEF', // ItemBorderColor ('top right bottom left' or 'all')
'#FFFFFF', // ItemBorderOverColor ('top right bottom left' or 'all')
'#FFFFFF', // SELECTED ItemBorderColor ('top right bottom left' or 'all')
0, // ItemSeparatorSpacing
'' // ItemSeparatorBgImage
];
s_CSSred=['#EEEDF5 #4A49A8 #4A49A8 #EEEDF5','#4A49A8',1,'#fffbf0',2,'#fffbf0','#bebddf','#ff0000','#000000','arial,helvetica,sans-serif','10pt','2','normal','center',5,1,'#bebddf','progid:DXImageTransform.Microsoft.GradientWipe(duration=0.5,wipeStyle=1)',true,'/images/menu1.gif','../../images/arrow3.gif',7,7,9,'#C0C0C0','#FFFFFF','../../images/arrow2.gif',true,'../../images/scrolltop.gif','../../images/scrollbottom.gif',68,12,'','','',2,'#fffbf0','#8583BE #DDDCEA #DDDCEA #8583BE','#ff0000',1,'../../images/separator_bg.gif'];
// SAMPLE FUNCTION USED FOR RELATIVE POSITIONING
function s_getStart(a){
var bodyMarginTop=0;// specify manually to get over bugs
var bodyMarginLeft=0;// in Opera 5/6, Konqueror<3.2 and IE5.x/Mac
var o=document.images["getStart"];if(!o)return a=="x"?-630:0;
if(s_nS4)return a=="x"?o.x:o.y;
var oP,oC,ieW;oP=o.offsetParent;oC=a=="x"?o.offsetLeft:o.offsetTop;
ieW=s_iE&&!s_mC?1:0;
while(oP){if(ieW&&oP.tagName&&oP.tagName.toLowerCase()=="table"&&oP.border&&oP.border>0)oC++;oC+=a=="x"?oP.offsetLeft:oP.offsetTop;oP=oP.offsetParent};
return s_oP7m||s_kN31p&&!s_kN32p||s_iE5M?a=="x"?s_oP7m?oC:oC+bodyMarginLeft:oC+bodyMarginTop:oC};
/*
All browsers have problems with finding the real position of an
element on the page in certain cases. I have tried to get over some
browser bugs with the above function- that's why it's so complex.
*/
// SAMPLE FUNCTION USED FOR RELATIVE POSITIONING
// === 4 === MENU DEFINITIONS
s_add(
{
N:'search', // NAME
LV:1, // LEVEL (look at IMPORTANT NOTES 1 in the Manual)
MinW:130, // MINIMAL WIDTH
T:20, // TOP (look at IMPORTANT HOWTOS 6 in the Manual)
L:5, // LEFT (look at IMPORTANT HOWTOS 6 in the Manual)
P:false, // menu is PERMANENT (you can only set true if this is LEVEL 1 menu)
S:s_CSSTop // STYLE Array to use for this menu
},
[ // define items {U:'url',T:'text' ...} look at the Manual for details
{U:'http://www.brentman.5u.com',T:'Testing'},
{U:'http://www.brentman.5u.com',T:'Testing1'},
{U:'http://www.brentman.5u.com',T:'Testing2'},
{U:'http://www.brentman.5u.com',T:'Testing3'}
]
);
s_add(
{N:'e_mail',LV:1,MinW:130,T:20,L:55,P:false,S:s_CSSTop},
[
{U:'http://www.brentman.5u.com',T:'Testing1'},
{U:'http://www.brentman.5u.com',T:'Testing2'}
]
);
s_add(
{N:'masters',LV:1,MinW:130,T:20,L:100,P:false,S:s_CSSTop},
[
{U:'http://www.brentman.5u.com',T:'Testing1'},
{U:'http://www.brentman.5u.com',T:'Testing2'},
{U:'http://www.brentman.5u.com',T:'Testing3'},
{U:'http://www.brentman.5u.com',T:'Testing4'}
]
);
s_add(
{N:'sports',LV:1,MinW:130,T:20,L:195,P:false,S:s_CSSTop},
[
{U:'http://www.brentman.5u.com',T:'Testing1'},
{U:'http://www.brentman.5u.com',T:'Testing2'},
{U:'http://www.brentman.5u.com',T:'Testing3'}
]
);
s_add(
{N:'brent',LV:1,MinW:130,T:20,L:295,P:false,S:s_CSSTop},
[
{U:'http://www.brentman.5u.com',T:'Testing1'},
{U:'http://www.brentman.5u.com',T:'Testing2'}
]
);
s_add(
{N:'riye',LV:1,MinW:130,T:20,L:365,P:false,S:s_CSSTop},
[
{U:'http://www.brentman.5u.com',T:'Testing1'},
{U:'http://www.brentman.5u.com',T:'Testing2'}
]
);
s_add(
{N:'sub_demo',LV:1,MinW:130,T:15,L:296,P:false,S:s_CSSTop},
[
{Show:'bg_stuff',U:'http://www.gbg.bg/',T:'Bulgarian stuff'},
{U:'http://www.fifa.com/',T:'King football'},
{Show:'tall_menu',U:'',T:'My favourite music'}
]
);
s_add(
{N:'bg_stuff',LV:2,MinW:130,T:'',L:'',P:false,S:s_CSSTop},
[
{Show:'bg_portals',U:'',T:'Portals'},
{Show:'bg_search',U:'',T:'Search',SeparatorSize:0},
{Show:'bg_misc',U:'http://www.gbg.bg/',T:'Misc',SELECTED:true}
]
);
s_add(
{N:'bg_portals',LV:3,MinW:130,T:'',L:'',P:false,S:s_CSSTop},
[
{U:'http://www.hit.bg/',T:'HIT.bg'},
{U:'http://www.dir.bg/',T:'DIR.bg'},
{U:'http://www.top.bg/',T:'TOP.bg'},
{U:'http://www.gbg.bg/',T:'Gyuvetch'},
{U:'http://www.search.bg/',T:'Search.bg'}
]
);
s_add(
{N:'bg_search',LV:3,MinW:130,T:'',L:'',P:false,S:s_CSSTop},
[
{U:'http://www.search.bg/',T:'Search.bg'},
{U:'http://www.rambler.bg/',T:'Rambler'},
{U:'http://www.dir.bg/',T:'DIR.bg'},
{U:'http://www.mp3-bg.com/',T:'MP3-BG.com'}
]
);
s_add(
{N:'bg_misc',LV:3,MinW:130,T:'',L:'',P:false,S:s_CSSTop},
[
{U:'http://www.news-bg.com/',T:'News-BG'},
{U:'http://www.bnt.bg/',T:'Bulgarian National Television'},
{U:'http://www.darik.net/',T:'Darik radio'},
{U:'http://www.7sport.net/',T:'7 Days Sport'},
{U:'http://www.btv.bg/',T:'bTV'},
{Show:'sub4',U:'',T:'More subs & different CSS'}
]
);
s_add(
{N:'sub4',LV:4,MinW:130,T:'',L:'',P:false,S:s_CSSred},
[
{U:'http://www.smartmenus.org/',T:'SmartMenus'},
{U:'',T:'NOROLL',NOROLL:true},
{U:'http://www.smartmenus.org/',T:'SmartMenus'},
{U:'http://www.smartmenus.org/',T:'SmartMenus'},
{Show:'sub5',U:'',T:'more'},
{U:'http://www.smartmenus.org/',T:'SmartMenus'}
]
);
s_add(
{N:'sub5',LV:5,MinW:130,T:'',L:'',P:false,S:s_CSSTop,B:'#FFFFFF'},
[
{U:'http://www.smartmenus.org/',
T:'SmartMenus',SeparatorColor:'#ffffff'},
{U:'http://www.smartmenus.org/',
T:'NOROLL+link',NOROLL:true,
SeparatorColor:'#ffffff'},
{U:'http://www.smartmenus.org/',
T:'SmartMenus',SeparatorSize:0},
{U:'http://www.smartmenus.org/',
T:'SmartMenus',SeparatorSize:0},
{Show:'sub6',U:'',T:'more',SeparatorSize:0},
{U:'http://www.smartmenus.org/',T:'SmartMenus'}
]
);
s_add(
{N:'sub6',LV:6,MinW:130,T:'',L:'',P:false,S:s_CSSTop,
B:'#FFFFFF',BC:'#DBDCEF #4A49A8 #4A49A8 #DBDCEF'},
[
{U:'http://www.smartmenus.org/',T:'SmartMenus',
BgColor:'#FFC0C0',OverBgColor:'#C00000'},
{U:'http://www.smartmenus.org/',T:'SmartMenus',
BgColor:'#FFFFC0',OverBgColor:'#C0C000'},
{U:'http://www.smartmenus.org/',T:'SmartMenus',
BgColor:'#C0FFC0',OverBgColor:'#00C000'},
{U:'http://www.smartmenus.org/',T:'SmartMenus',
BgColor:'#C0FFFF',OverBgColor:'#00C0C0'}
]
);
s_add(
{N:'tall_menu',LV:2,MinW:130,T:'',L:'',P:false,S:s_CSSTop},
[
{U:'http://www.u2.com/',T:'U2'},
{U:'http://www.depechemode.com/',T:'Depeche Mode'},
{U:'http://www.sting.com/',T:'Sting'},
{U:'http://www.sade.com/',T:'Sade'},
{U:'http://www.garbage.com/',T:'Garbage'},
{U:'http://www.thecorrswebsite.com/',T:'The Corrs'},
{U:'http://www.republica.com/',T:'Republica'},
{U:'http://www.u2.com/',T:'U2'},
{U:'http://www.depechemode.com/',T:'Depeche Mode'},
{U:'http://www.sting.com/',T:'Sting'},
{U:'http://www.sade.com/',T:'Sade'},
{U:'http://www.garbage.com/',T:'Garbage'},
{U:'http://www.thecorrswebsite.com/',T:'The Corrs'},
{U:'http://www.republica.com/',T:'Republica'},
{U:'http://www.u2.com/',T:'U2'},
{U:'http://www.depechemode.com/',T:'Depeche Mode'},
{U:'http://www.sting.com/',T:'Sting'},
{U:'http://www.sade.com/',T:'Sade'},
{U:'http://www.garbage.com/',T:'Garbage'},
{U:'http://www.thecorrswebsite.com/',T:'The Corrs'},
{U:'http://www.republica.com/',T:'Republica'},
{U:'http://www.u2.com/',T:'U2'},
{U:'http://www.depechemode.com/',T:'Depeche Mode'},
{U:'http://www.sting.com/',T:'Sting'},
{U:'http://www.sade.com/',T:'Sade'},
{U:'http://www.garbage.com/',T:'Garbage'},
{U:'http://www.thecorrswebsite.com/',T:'The Corrs'},
{U:'http://www.republica.com/',T:'Republica'},
{U:'http://www.u2.com/',T:'U2'},
{U:'http://www.depechemode.com/',T:'Depeche Mode'},
{U:'http://www.sting.com/',T:'Sting'},
{U:'http://www.sade.com/',T:'Sade'},
{U:'http://www.garbage.com/',T:'Garbage'},
{U:'http://www.thecorrswebsite.com/',T:'The Corrs'},
{U:'http://www.republica.com/',T:'Republica'},
{U:'http://www.u2.com/',T:'U2'},
{Show:'depeche_mode',U:'http://www.depechemode.com/',T:'Depeche Mode'},
{U:'http://www.sting.com/',T:'Sting'},
{U:'http://www.sade.com/',T:'Sade'},
{U:'http://www.garbage.com/',T:'Garbage'},
{U:'http://www.thecorrswebsite.com/',T:'The Corrs'},
{U:'http://www.republica.com/',T:'Republica'}
]
);
s_add(
{N:'depeche_mode',LV:3,MinW:130,T:'',L:'',P:false,S:s_CSSTop},
[
{U:'http://www.martingore.com/',T:'Martin Gore'},
{U:'http://www.davegahan.com/',T:'Dave Gahan'},
{U:'http://www.toasthawaii.com/',T:'Andy Fletcher'},
{U:'http://archives.depechemode.com/',T:'Archives'},
{U:'http://forums.depechemode.com/',T:'Forums'}
]
);
s_add(
{N:'my_menu',LV:1,T:15,L:'mouseX+10',P:false,S:s_CSSTop},
[
{U:'../../Manual/manual.html',T:'User\'s Manual',Target:'self',SeparatorSize:0},
{U:'../../Manual/forum.html',T:'Forum',Target:'self',SeparatorSize:0},
{U:'mailto:smartmenus@smartmenus.org',T:'Contact the author',Target:'self'},
{U:'javascript:alert("SmartMenus (tm) 5\\nAdvanced DHTML navigation system.\\n\\nVersion: 5.5 (Release 31)\\nRelease date: March 16, 2005\\n\\n(c) 2001-2005 Vasil Dinkov - Plovdiv, BULGARIA\\n(c) 2003-2005 ET Vadikom-Vasil Dinkov\\nAll rights reserved.")',T:'About'}
]
);
Thanks,
Btsuda :D
Date: 1 Apr 2005 7:52 am
btsuda, I will need a complete example including one of your pages to be able to help you. Please send me a small ZIP-ed example by email and explain where you want the menus to appear and I will configure it for you. I just can't help you by only seeing your configuration file.. :(
Date: 8 Apr 2005 11:52 am
Hi Vasil,
I emailed you back with my files and I haven't heard back from you!!! Please help!!!
Date: 8 Apr 2005 12:25 pm
That's weird- I sent you an email about a week ago :? I suppose something has happend with it- I will resend it in a minute.
I had some problems with Thunderbird recently. I am not sure but that may be the reason..
Date: 8 Apr 2005 12:53 pm
Thanks Vasil, I appreciate you resending it. Incase you have my email address wrong, it's btsuda @ hotmail .com!!!
Thanks,
Btsuda
Date: 8 Apr 2005 1:10 pm
I resent it. I think all should be OK now..