View Full Version : Javascript to CSS

05-18-2009, 11:10 AM
1) Script Title: Omni Slide Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/omnislide/index.htm

3) Describe problem:

I wish for the design aspects of the code to be put in CSS rather than Javascript.

Here is the MenuItems code:

//One global variable to set, use true if you want the menus to reinit when the user changes text size (recommended):

menu[2] = { // REQUIRED!! This menu explicitly declares all available options even if they are the same as the defaults
id:'menu2', //use unique quoted id (quoted) REQUIRED!!
///////////// no quotes for these properties (numbers represent pixels unless otherwise noted): ////////////
user_defined_stylesheet:false, //if true, prevents script from generating stylesheet for this menu
user_defined_markup:false, //if true, prevents script from generating markup for this menu
design_mode:false, //if true, generates a report of the script generated/intended styles and markup (as a design aid)
menutop:160, // initial top offset - except for top menu, where it is meaningless
menuleft:'45%', // initial left offset - only for top menu, as pixels (can be a quoted percentage - ex: '50%')
keepinview:80, // Use false (for not static) - OR - true or numeric top offset when page scrolls
menuspeed:20, // Speed of menu sliding smaller is faster (interval of milliseconds)
menupause:500, // How long menu stays out when mouse leaves it (in milliseconds)
d_colspan:3, // Available columns in menu body as integer
allowtransparent:true, // true to allow page to show through menu if other bg's are transparent or border has gaps
barwidth:20, // bar (the vertical cell) width
wrapbar:true, // extend and wrap bar below menu for a more solid look (default false) - will revert to false for top menu
hdingwidth:344, // heading - non linked horizontal cells width
hdingheight:17, // heading - non linked horizontal cells height
hdingindent:1, // heading - non linked horizontal cells text-indent represents ex units (@8 pixels decimals allowed)
linkheight:20, // linked horizontal cells height
linktopad:3, // linked horizontal cells top padding
borderwidth:-1, // inner border-width used for this menu
/////////////////////////// quote these properties: /////////////////////
hdingvalign:'middle', // heading - non linked horizontal cells vertical align (top, middle or center)
hdingtxtalign:'left', // heading - non linked horizontal cells right left or center text alignment
linktxtalign:'left', // linked horizontal cells right left or center text alignment
linktarget:'', // default link target, leave blank for same window (other choices: _new, _top, or a window or frame name)
kviewtype:'fixed', // Type of keepinview - 'fixed' utilizes fixed positioning where available, 'absolute' fluidly follows page scroll
menupos:'top', // set side that menu slides in from (right or left or top)
bartext:'<img src="hover.gif">', // bar text (the vertical cell) use text or img tag
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Lois Images", "http://www.loisimages.com", "_new"],
["State Street Blues", "http://www.statestreetbluesstroll.com/","_new"],
["Media Jazz by Night", "http://www.mediajazzbynight.com/", "_new"],
["DD Help Forum", "http://www.dynamicdrive.com/forums", "_new"],
// ["Personal", "", ""], //create header
["Ansi Art Gallery", "http://home.comcast.net/~ansiguy", "_new"],
["John's Javascript Jungle", "http://home.comcast.net/~jscheuer1/side", "_new"] //no comma after last entry

]}; // REQUIRED!! do not edit or remove

////////////////////Stop Editing/////////////////


As you can see the Menu navigational links are in the javascript, so are the style codes.

How would I move the style to CSS and the links to normal bog standard HTML??