[RC] browser compatibel dropdown menu overall_header

[rickieizfazt]

CROSS BROWSER COMPATIBLE met dank aan BetaDevil voor zijn snelle reactie

volledig ondersteunde browsers

IE 5+ on Windows
Netscape 6+ (and all Mozilla/Gecko powered browsers like Firefox)
Safari 1+
IE 5.1 and IE 5.2 on Macintosh
Opera 7+
Konqueror 3.2+
Partially supported browsers

Deze browsers hebben redelijke CSS ondersteuning maar door een aantal vitale CSS bugs in de browser zelf lijkt de ondersteuning niet volledig. Alleen het hoofdmenu werkt dan, submenus niet, dus in veel gevallen nog zeer bruikbaar.....

iCab 3
IE 5.0 on Macintosh
Opera 5/6
Konqueror 3.0.x and 3.1.x

Teninde de browsercompatibiliteit te optimaliseren is de MOD aangepast naar smartmenu dat vrij kan worden gebruikt in een non-commerciele omgeving. Het smartmenu is uitermate flexibel en de volledige documentatie si toegevoegd.

Deze MOD (installation level: easy) bestaat uit een kant en klaar te kopiëren javascript en een paar snelle aanpassingen in overall_header.html.

De MOD voegt een menu toe onder prosilver overall_header in de juiste kleuren. Tijdens de installatie alleen je eigen links invoegen. Nu kun je eenvoudig andere toepassingen inbrengen in je site.

Voorbeeld: http://tjoogle.com

Directe Download link: http://members.home.nl/jmderidder/myMOD/topmenu.rar

Voor support staan gegevens in de instalatie tekst.

[BetaDevil]

Hij werkt alleen in IE goed

[rickieizfazt]

Hij werkt alleen in IE goed

zal ff kijken in firefox....je hebt gelijk, gebruik zelf IE, ok verzie 1.0 voor IE, we kijken er ff naar.....tnxs!

[rickieizfazt]

Hij werkt alleen in IE goed

opgelost dus.....werkt nu overal......bedankt!

[wimver]

Is hij in de breedte op 100% in te stellen?
Ik neem aan dat ook de kleuren van de layout worden overgenomen toch.
Het lijkt me handig als ik straks meer linken heb.
Heb je ook een demo waar je er wat mee kan spelen.

wim

[Stef]

Misschien wat meer in prosilver stijl maken?

[rickieizfazt]

Is hij in de breedte op 100% in te stellen?
Ik neem aan dat ook de kleuren van de layout worden overgenomen toch.
Het lijkt me handig als ik straks meer linken heb.
Heb je ook een demo waar je er wat mee kan spelen.

wim

als je hem download kun je hem lokaal testen en instellen als je de bijgeleverde 2e rar unpackt in dezelfde directory en de html daarbij aanclickt (je beveiliging laat je handmatig wel even je java aanzetten denk ik)

Wim, het menu is zo flexibel dat het bijna niet in woorden is uit te drukken, daarom hierbij de indrukwekkende configfile...(daarnaast ben ik erg lui.....) natuurlijk kan het wat meer prosilver maar dat is een kwestie van smaak, ik wil juist wat meer weg van prosilver. Je kunt alle kleuren van IEDER detail instellen. je kunt hem verplaatsen, fixed, relative enz enz enz, let the config speak for itself

// USE WORDWRAP AND MAXIMIZE THE WINDOW TO SEE THIS FILE
c_styles={};c_menus={}; // do not remove this line

// You can remove most comments from this file to reduce the size if you like.




/******************************************************
(1) GLOBAL SETTINGS
*******************************************************/

c_hideTimeout=500; // 1000==1 second
c_subShowTimeout=300;
c_keepHighlighted=true;
c_findCURRENT=false; // find the item linking to the current page and apply it the CURRENT style class
c_findCURRENTTree=true;
c_overlapControlsInIE=true;
c_rightToLeft=false; // if the menu text should have "rtl" direction (e.g. Hebrew, Arabic)




/******************************************************
(2) MENU STYLES (CSS CLASSES)
*******************************************************/

// You can define different style classes here and then assign them globally to the menu tree(s)
// in section 3 below or set them to any UL element from your menu tree(s) in the page source


c_imagesPath=""; // path to the directory containing the menu images


c_styles['MM']=[ // MainMenu (the shorter the class name the better)
[
// MENU BOX STYLE
0, // BorderWidth
'solid', // BorderStyle (CSS valid values except 'none')
'#8F90C4', // BorderColor ('color')
0, // Padding
'#CADCEB', // Background ('color','transparent','[image_source]')
'', // IEfilter (only transition filters work well - not static filters)
'' // Custom additional CSS for the menu box (valid CSS)
],[
// MENU ITEMS STYLE
1, // BorderWidth
'solid', // BorderStyle (CSS valid values except 'none')
'solid', // OVER BorderStyle
'#4d4c76', // BorderColor ('color')
'#00FF00', // OVER BorderColor
4, // Padding
'#CADCEB', // Background ('color','transparent','[image_source]')
'#OOFFOO', // OVER Background
'#FF0000', // Color
'#0000FF', // OVER Color
'12px', // FontSize (values in CSS valid units - %,em,ex,px,pt)
'verdana,arial,helvetica,sans-serif', // FontFamily
'bold', // FontWeight (CSS valid values - 'bold','normal','bolder','lighter','100',...,'900')
'none', // TextDecoration (CSS valid values - 'none','underline','overline','line-through')
'none', // OVER TextDecoration
'left', // TextAlign ('left','center','right','justify')
1, // ItemsSeparatorSize
'solid', // ItemsSeparatorStyle (border-style valid values)
'#CBCBEF', // ItemsSeparatorColor ('color','transparent')
0, // ItemsSeparatorSpacing
true, // UseSubMenuImage (true,false)
'[h_arrow.gif]', // SubMenuImageSource ('[image_source]')
'[h_arrow_over.gif]', // OverSubMenuImageSource
7, // SubMenuImageWidth
4, // SubMenuImageHeight
'10', // SubMenuImageVAlign ('pixels from item top','middle')
'solid', // VISITED BorderStyle
'#0077B2', // VISITED BorderColor
'#CADCEB', // VISITED Background
'#FF0000', // VISITED Color
'none', // VISITED TextDecoration
'[h_arrow.gif]', // VISITED SubMenuImageSource
'solid', // CURRENT BorderStyle
'#0077B2', // CURRENT BorderColor
'#FFFBF0', // CURRENT Background
'#FF0000', // CURRENT Color
'none', // CURRENT TextDecoration
'[h_arrow.gif]', // CURRENT SubMenuImageSource
'', // Custom additional CSS for the items (valid CSS)
'', // OVER Custom additional CSS for the items (valid CSS)
'', // CURRENT Custom additional CSS for the items (valid CSS)
'' // VISITED Custom additional CSS for the items (valid CSS)
]];


c_styles['SM']=[ // SubMenus
[
// MENU BOX STYLE
1, // BorderWidth
'solid', // BorderStyle (CSS valid values except 'none')
'#0077B2', // BorderColor ('color')
3, // Padding
'#CADCEB', // Background ('color','transparent','[image_source]')
'', // IEfilter (only transition filters work well - not static filters)
'' // Custom additional CSS for the menu box (valid CSS)
],[
// MENU ITEMS STYLE
1, // BorderWidth
'solid', // BorderStyle (CSS valid values except 'none')
'solid', // OVER BorderStyle
'#0077B2', // BorderColor ('color')
'#4D4C76', // OVER BorderColor
3, // Padding
'#CADCEB', // Background ('color','transparent','[image_source]')
'#00FF00', // OVER Background
'#FF0000', // Color
'#FF0000', // OVER Color
'12px', // FontSize (values in CSS valid units - %,em,ex,px,pt)
'verdana,arial,helvetica,sans-serif', // FontFamily
'normal', // FontWeight (CSS valid values - 'bold','normal','bolder','lighter','100',...,'900')
'none', // TextDecoration (CSS valid values - 'none','underline','overline','line-through')
'none', // OVER TextDecoration
'left', // TextAlign ('left','center','right','justify')
0, // ItemsSeparatorSize
'solid', // ItemsSeparatorStyle (border-style valid values)
'#CBCBEF', // ItemsSeparatorColor ('color','transparent')
2, // ItemsSeparatorSpacing
true, // UseSubMenuImage (true,false)
'[v_arrow.gif]', // SubMenuImageSource ('[image_source]')
'[v_arrow_over.gif]', // OverSubMenuImageSource
7, // SubMenuImageWidth
7, // SubMenuImageHeight
'7', // SubMenuImageVAlign ('pixels from item top','middle')
'solid', // VISITED BorderStyle
'#0077B2', // VISITED BorderColor
'#CADCEB', // VISITED Background
'#FF0000', // VISITED Color
'none', // VISITED TextDecoration
'[v_arrow.gif]', // VISITED SubMenuImageSource
'solid', // CURRENT BorderStyle
'#0077B2', // CURRENT BorderColor
'#FFFBF0', // CURRENT Background
'#FF0000', // CURRENT Color
'none', // CURRENT TextDecoration
'[v_arrow.gif]', // CURRENT SubMenuImageSource
'', // Custom additional CSS for the items (valid CSS)
'', // OVER Custom additional CSS for the items (valid CSS)
'', // CURRENT Custom additional CSS for the items (valid CSS)
'' // VISITED Custom additional CSS for the items (valid CSS)
]];




/******************************************************
(3) MENU TREE FEATURES
*******************************************************/

// Normally you would probably have just one menu tree (i.e. one main menu with sub menus).
// But you are actually not limited to just one and you can have as many menu trees as you like.
// Just copy/paste a config block below and configure it for another UL element if you like.


c_menus['Menu1']=[ // the UL element with id="Menu1"
[
// MAIN-MENU FEATURES
'horizontal', // ItemsArrangement ('vertical','horizontal')
'fixed', // Position ('relative','absolute','fixed')
'290px', // X Position (values in CSS valid units- px,em,ex)
'0em', // Y Position (values in CSS valid units- px,em,ex)
false, // RightToLeft display of the sub menus
false, // BottomToTop display of the sub menus
0, // X SubMenuOffset (pixels)
0, // Y SubMenuOffset
'10em', // Width (values in CSS valid units - px,em,ex) (matters for main menu with 'vertical' ItemsArrangement only)
'MM', // CSS Class (one of the defined in section 2)
false // Open sub-menus onclick (default is onmouseover)
],[
// SUB-MENUS FEATURES
5, // X SubMenuOffset (pixels)
1, // Y SubMenuOffset
'auto', // Width ('auto',values in CSS valid units - px,em,ex)
'100', // MinWidth ('pixels') (matters/useful if Width is set 'auto')
'300', // MaxWidth ('pixels') (matters/useful if Width is set 'auto')
'SM', // CSS Class (one of the defined in section 2)
false // Open sub-menus onclick (default is onmouseover)
]];

[rickieizfazt]

Misschien wat meer in prosilver stijl maken?

idd dat kan alle details zijn instelbaar, zie de reactie met alle mogelijkheden hier net voor....