swMenuPro4.2+ for Joomla/Mambo
Contents
1. transMenu94 content position absolute important transMenu94 items border Opx solid FFFFFF important position relative important left Opx top 0px z index 2 transMenu94 top items transMenu94 td padding 5px 5px 5px 5px limportant font size 12px important font family Arial Helvetica sans serif important text align left important font weight bold important color E18246 important transMenu94 item hover td color FF9900 important transMenu94 item text decoration none important cursor pointer cursor hand transMenu94 background background color FFF2AB important position absolute important left 0px top 0px z index 1 moz opacity 0 85 filter alpha opacity 85 transMenu94 shadowRight position absolute important z index 3 top 3px width 2px moz opacity 0 85 filter alpha opacity 85 transMenu94 shadowBottom position absolute important z index 1 left 3px height 2px moz opacity 0 85 filter alpha opacity 85 transMenu94 item hover background color FFFFCC important transMenu94 item img margin left 10px important table menu94 top Opx left Opx position relative important margin 0px important border Opx solid FFFFFF important table menu94 a margin Opx important padding 5px 5px 5px 5px limportant display block position relativ2. Lh j li L f z oe ere LEVEL 2 TOP OFFSET 2 Sub Item 3 r SUB MENU ITEM HEIGHT SUB MENU ITEM WIDTH LEVEL 1 LEFT OFFSET SUB MENU ITEM WIDTH cesti LEVEL 2 LEFT OFFSET OFFSET Top Menu Orientation Horizontal Top Menu Orientation Vertical The Tigra menu system requires values for width and height to function correctly it cannot auto resize menu items Menu may be positioned relative or absolute When the menu is positioned relative the Top Menu Top Offset and Top Menu Left Offset values move the entire menu from where the menu module is published within the template When positioned absolute the Top Menu Top Offset and Top Menu Left Offset values move the entire menu from the top left corner of the browser window SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 18 of 37 Trans amp MyGosu Menu TOP MENU ITEM WIDTH TOP MENU ITEM WIDTH TOP MENU Top Item Top Item ae oll ie MEMI O Top Item TOP MENU ITEM HEIGHT LEVEL 1 TOP OFFSET O Top Item LEVEL 1 TOP OFFSET li O Sub Item i O Sub Item F Top Item E C Sub Item uj bo O Sub Tem i LEVEL 2 TOP OFFSET top tem ip Li Msn o LEVEL 2 TOP OFFSET u O Sub Item lr ANG a Se E seb tem li O Sub Item SUS MERI Top Item Geuk Tem a ITEM HEIGHT m O Sub Hem Sub Item ie i Hai o O sub Item i L Sub Liem 2
3. Maximum Levels Parent Level Editor Hovering over opens a small window with addititional information relative to that setting e Tables Blogs Cache refresh Click save to save changes to the menu module and style changes to the database do not write an external CSS file Click export to save changes to the menu module and style changes to the database do write an external CSS file This will overwrite any previously exported CSS file for this menu module with the current database style settings set on this form Click preview to open a popup window showing a live preview of the menu module a using the current settings on this form Click cancel to close the Menu Module Editor and return to the Menu Module Manager screen without saving changes SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 9 of 37 Menu Module Editor Menu Module Settings Page The first page of the Menu Module Editor controls menu module settings This page is common to all menu systems and is where the main settings for displaying any menu module can be changed Below is a detailed account of the menu module settings Menu Source Settings Menu Source Settings P mainmenu Menu Source I Use Content Only r DI Home aS Mews Parent i News i iL Links i a Mews Feeds ef Blog Menu Source Your menu module needs a source to retrieve the 6 Te FAQs menu items from These are
4. You can specify however if you want the automatically generated section and category items to be displayed as tables or blogs by selecting this under the Auto Menu Item Settings section on the Menu Module Settings page current page A blog shows a summary of the all the content items in that section or category by displaying the initial part of each content item on the page and providing a link to the page which gives the whole story When displayed as a table a table of just the content item titles is shown which each link to the full story You can also disable these section and category items in the swMenuPro Image Editor so that they just act as placeholders to eventually pop out the content item links It is recommended that you also use the cache feature for the menu module if the menu source is a content only menu SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 11 of 37 Style Sheet Settings rrently 4 differen ha Style Sheet Settings There are currently 4 different ways that swMenuPro can handle the styles for each Load Style Sheet Javascript Import External menu module each with there own Module Class Sufis DD advantages and disadvantages These are detailed below Dynamic This loads the style sheet from the stored database settings and places it directly into the page where the menu module is called If you view the output HTML source from a page with a menu module published with thi
5. amp Dynamic Tab Menu COMPLETE MENU TOP MENU WIDTH TOP PADDING COMPLETE MENU MARGIN COMPLETE MENU LEFT PADDING BETWEEN TABS RIGHT PADDING TOP MENU HEIGHT Top Item Leni Top Item BO Sih teem Sub Item Sub Item Sub Item Sub Item SUE MEN a f f i i i ITEM HEIGHT COMPLETE MENU BOTTOM PADDING k SUB MENU WIDTH J 1 These menu systems can take a bit of time to get right To achieve the tab effect the top menu items bottom line needs to be overlapping the divider line between the top menu items and submenu items This is achieved by adjusting the top menu height and complete menu padding values Menu may be positioned left right or centre of where the menu module is published As of the time of writing the dynamic tab menu may handle borders unpredictably between browsers It has been designed primarily to be used as an image menu using background or individual menu item images Tree Menu MENU WIDTH Tree menu has limited positioning capabilities and Cel eels MER PSE PARERE is positioned relative to where the menu module is 3 published ICONS Pi IL ITANOI This page also includes some specific options just for the tree menu a Folders are Links Specify if clicking on a folder menu item an item with a submenu should load the new page or if the folder menu item should just open the submenu without loading a new page COMPLETE MENU BOTTOM PADDING DB H FAQ
6. 1px solid 124170 important background color FFFFCC important swactive_menu90 a swactive_menu90 div color FFFFFF important font weight bold important text decoration none important background color 6BA6DE important m01000ut90 img segl m01100ut90 img seq1 display inline m0110o0ver90Hover seq2 m0lloover90Active seg2 m01000ver90Hover seg2 m01000ver90Active seq2 display inline m01000ut90 seg2 m01000ut90 segl m01000ver90 segl m01100ut90 seg2 m01100ut90 segl m0lloover90 seq1 display none Wonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 32 of 37 Click Menu Default CSS File click menu92 width 130px border 1px solid 2F82CC important click menu92 box1 border 1px solid FFFFFF important background color 2F82CC important click menu92 box1 hover color FFFFFF important background color 6BA6DE important border 1px solid FFFFFF important click menu92 inbox1 click menu92 inbox1 visited click menu92 inboxl active click menu92 inbox1 link padding 5px 5px 5px 5px important width 130px height 25px font size 12px important font family Arial Helvetica sans serif important text align center important font weight bold important color FFF2AB important text decoration none important margin bottom 0px imp
7. Every aspect of every menu module can be configured using the built in automatic style sheet and manual style sheet editors Images and roll over images can be assigned for any menu item in 6 of the menu systems as well as replacing the item names for creating purely graphical menu modules Different menu sources can be assigned to any menu module The new built in dynamic menu creation and editing facility swMenuMaker makes it easy to automatically create and edit Joomla Mambo menu structures using existing content and menu items swMenuPro is designed to give you all the tools you need to effectively create and integrate great looking functional navigation systems into the Joomla Mambo CMS fast SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 4 of 37 Installation Two zip files need to be installed into the Joomla Mambo CMS in order for swMenuPro to operate com_swmenupro4 zip this is the install file for the component mod_swmenupro4 zip this is the install file for the module Note can be any number between 0 9 and denotes incremental updates Module and component numbers may not always match Module and component files will always work together though if they have the same number before the decimal point Eg mod_swmenupro4 2 zip file would still work with com_swmenupro4 0 zip file However mod_swmenupro4 1 zip file would not work with com_swmenupro3 0 zip file If you have trouble installing the mo
8. Helvetica sa font size lipx text decoration none padding Zpx Opx Opx lOpx color FFFFFF font weight bold text align left m01lOoout 3 text decoration none border lpx solid 124170 background color 2F82CC nOlDoover 73 text decoration i nona da ag You can view and manually edit the CSS bc for the menu module in this text window uQLlioat73 i sans serif Click save to save changes to the external CSS file and return to the menu module manager screen ety Click preview to open a popup window showing a live preview of the menu module using the current saved settings and the CSS from the text window Click cancel to close the manual CSS editor and return to the menu module manager screen without saving changes The menu module needs to have the CSS Load value set to link external or Javascript Import External for this external CSS file to be used by the menu module The menu module can also have a CSS load value of do not link in this case a link is then manually added between the lt head gt lt head gt tags of the index php file for the template All menu modules will completely validate if you follow this process It is possible to change much more detail with the manual CSS editor Use it to fix CSS conflicts or to add additional style to your menu or to style individual menu items Instructions on extra CSS tricks and tips can be found in the swMenuPro CSS and scri
9. Wyes__ Wyes _ No no _ Wyes_ Wyes_ Wves written as Sub menu JavaScript HTML JavaScript HTML JavaScript HTML HTML written as as ee ci Images SWonline biz SWimenuPro 2005 by Sean White swMenuPro User Manual Page 8 of 37 Menu Module Editor The Menu Module Editor is where you can change your menu module settings and basic styles It is opened when clicking on a menu module name or an edit button in the Menu Module Manager The Menu Module Editor is actually different for each menu system to reflect the different style settings and features of the different menu systems Colors amp Backgrounds Fonts amp Padding Borders amp Effects Menu Module Settings Size Position amp Offsets a save export preview cancel Module Name fent Menu Source Settings Position amp Access Menu Source mainmeni Parent i TOP Style Sheet Settings Navigate the Menu Module editor using these dynamic tabs to open the various editing pages odule Class Suttix hole down chi key while let clicking mouse to select multiple pages Show Module Name None Published cats Examples cats Examples Example FAQ Item 2 cats Examples Example FAQ Item 1 stg Newsflash Newstlash Newsflach 1 flash Newsflash 2 ES Newsflash 3 Module settings are located here on the first open page of the Menu Module Editor Hack Active Menu
10. page being viewed until it reaches the parent level It then displays this submenu as the top level menu and any child submenus as submenus If a page being viewed is below the parent level then no menu is displayed Essentially this feature changes the parent value automatically for a menu module This feature is useful when you have a very large menu structure and it would be impractical to publish the full menu on every page SWonline biz SimenuPro e005 by Sean White swMenuPro User Manual Page 14 of 37 Example Menu Content ES News Feeds SE Blog BG FAQs Joomla License s AS Search po O Wrapper sa Contact Us Menu Displayed dynamic level 1 Displayed on Pages No menu displayed Home Contact us News Links News Feeds News Feeds Blog Blog Wrapp rapper DI Wrapper Links FAQs Joomla Licence s Menu s displayed when dynamic level 1 using the example menu content shown When using the parent level feature you need also need to set the maximum levels value to a number higher than your parent level value Leaving it at 0 will not work Auto Menu Item Settings A This setting allows for the automatic Auto Menu ttem Settings A creation of content menu items to be Hybrid Menu i No ves added as submenus to existing menu i Show as blogs items When a menu is set up correctly with the hybrid feature the menu will update itself as content is added without the need to
11. the menu items that have previously Toll Joomla Licenses been created using the swMenuPro Dynamic Menu Maker or the i 9 Gasech standard Joomla Mambo menu manager Select an existing menu i LI wrapper or Use Content Only for a content only menu explained in more i ti detail below Parent Menu items with a parent of top are top menu items The example menu on the right shows the menu items Home News FAQs Search and Contact Us as being top menu items These items are at the top of the menu tree All other items are submenu items Links and News Feeds are level 1 submenu items with a parent of News and Blog is a level 2 submenu item with a parent of News Feeds swMenuPro will let you define a parent menu item to use This will change the top menu items to one of the submenus This can be useful when you have a very large menu and just want to display specific sections of that menu on specific pages Diagram below shows the result of using a parent value with the sample menu source shown Example Menu Source Top Menu Items Menu Source mainmenu Parent top Top Menu Items Menu Source mainmenu Parent News Home res w __ o E smg Links Hews Feeds Pe Search Contact Us Level 2 sub menu item Level 1 sub menu items Level 1 sub menu item This diagram shows the effect of using a parent other than top to display a menu module Wonline biz SimenuPro e005 by Sean White swMenuPro U
12. w SUB MENU ar A dm SUB MENU a er mane sab ITEM WIDTH E sub w l Top Menu Orientation Horizontal Top Menu Orientation Vertical The Trans and MyGosu menu system does not require values for width and height to function correctly it can auto resize menu items By letting menus auto resize then using padding to increase width or height you get a menu which looks and works the same in just about all browsers It is advisable though if using a horizontal menu to enter a value for the top menu item height This fixes mouse over and submenu positioning issues in some browsers without affecting the look of the menu Menu may be positioned left right or centre of where the menu module is published Top Menu Top Offset and Top Menu Left Offset values move the entire menu relative to where the menu module is published within the template Click Menu TOP MENU The Click menu system requires height and width values to function O Top Item top menu Correctly ITEM HEIGHT O Sub Item It has limited positioning capabilities and can only be positioned relative to where the menu module is published You may be able to apply more positioning options by manually editing the external CSS file for the menu module using the Manual CSS Editor Top Item SUB MENU ITEM WIDTH SWonline biz SWimenuPro 2005 by Sean White swMenuPro User Manual Page 19 of 37 CSS Horizontal Tab
13. 4170 important z index 500 ddmx91 a item2 hover ddmx91 a item2 active ddmx91 a item2 active hover background color FFFFCC important color FF9900 important border top 1px solid 124170 important border left 1px solid 124170 important border right 1px solid 124170 limportant ddmx91 section border Opx solid FFFFFF important position absolute visibility hidden display block z index 1 ddmx91frame border Opx solid FFFFFF important SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 37 of 37 ddmx91 td item11 acton padding 0 important border top 1px solid 124170 important border left 1px solid 124170 important white space nowrap border right 1px solid 124170 important ddmx91 td item11 acton last border 1px solid 124170 important ddmx91 item1 1 acton last a item1 ddmx91 item1 1 acton a item1 ddmx91 item1 1 acton last a hover ddmx91 item11 acton a hover ddmx91 item11 a hover ddmx91 item1 1 last a hover ddmx91 a iteml active ddmx91 a item1 active hover color FFFFFF important background color 6BA6DE important ddmx91 item11 acton item1 img seq 2 ddmx91 img seq1 display inline ddmx91 a iteml hover img seq2 ddmx91 a iteml active img seq2 ddmx91 a iteml active hover img seq2 ddmx91 a item2 hover img seq 2 ddmx91 a it
14. S iY fy Search SM JJF LIST NSW ILTIINOO SONIDO Sd LHS MN MENU BORDER Menu Width set to Oto auto resize 170 px er other Settings Use Lines Specify if lines should be used in the menu resse ___ dis la Folders are Links No p M Use Lines ves ipi Use loons Yi Use Icons Specify if icons should be displayed by the Li i Top Right Bottom Left F px fe px Fe px 2 px Menu Border Menu Border Style solid bd Menu Border Width fi px SWonline biz SimenuPro e005 by Sean White swMenuPro User Manual Page 20 of 37 Menu Module Editor Colors amp Backgrounds Page The Colors amp Backgrounds page is where you set the colors for all the different menu elements including borders fonts and backgrounds Background images are also supported This page will look different depending upon the menu system being edited swMenu Pro Menu Module Editor myGosu M Menu Module Settings Size Position amp Offsets Colors amp Backgrounds All color values need to have the prefix and be in Module Narre hexadecimal format Access the Colors amp Background Images Backgrounds page by clicking on the third tab Font Colors HFFF2AB get Top Menu Over Font Color a HEFFFFF get Top Menu Background Top Menu Over Background fHBEFFES Wget REDFFFF yet Click t to select the poesta Dee color currently chosen on REBAGDE ret Top Me
15. SS for individual menu items RETTA If no external CSS file is present then an export button is displayed instead Clicking the export button will cause an external CSS file to be created using the current saved database settings for that menu module Click images to open the swMenuPro Menu Image Editor The image editor allows you to easily add normal and mouse over images for any menu item The menu item name can also be turned off for purely graphical menus and menu items can be disabled if required but still activate pop out submenus images Click preview to open a popup window showing a live preview of the menu module dhid using the current saved settings Click delete to completely delete the menu module including any associated style delete sheets Actual menu items are not deleted Wonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 26 of 37 Manual CSS Editor The manual CSS editor allows you to manually edit the CSS from a previously exported menu module This page is accessed by clicking the edit CSS button for your menu module in the Menu Module Manager M Pro Module name tigra M z test 3333 SW el 1U Manual CSS Editor d c xampplite htdocs joomla107 modules mod_swmenupro stfes menu73 css is save preview cancel Mica sans serif dAing Zpx Opx Opx lOpx 1 FFFZiB ffint wsight bold Name and path to external CSS mOlDiover 2 file with write status font family Arial
16. Spx important padding left 5px important padding right 5px important padding bottom Opx important border bottom 1px solid CCC important menu95 ul menu95 li display inline list style type none important margin 0 important padding 0 important menu95 a link menu95 a visited background E8EBFO important border 1px solid CCC important color 666 important font weight bold important font size 12px important font family Arial Helvetica sans serif important white space nowrap line height 19px important margin right 8px important padding 2px 10px 2px 10px important text decoration none menu95 a link active menu95 a visited active color 000000 important menu95 a hover color 000000 important menu95 li here95 a background color FFFFFF important border bottom 1px solid FFFFFF important color 666 important menu95 img seql submenu95 img seql display inline menu95 img seq2 menu95 a hover img seql submenu95 img seq 2 submenu95 a hover img segl menu95 li here95 a img seql display none menu95 a hover img seq2 submenu95 a hover img seq 2 menu95 li here95 a img seq2 display inline tabsub295 padding 2px 5px 2px 5px important clear both border bottom 1px dashed CCC important background color FFFFFF important submen
17. Wonline biz ta a q n gt HL E B dale P e al a Prepared 28 February 2006 Program Version swMenuPro4 2 for Joomla Mambo Created By Sean White swMenuPro User Manual Page 2 of 37 Table of Contents What is swMenuPro 3 Installation 4 Getting Started 6 Menu Systems Overview 5 Menu Module Editor 8 Menu Module Settings Page 9 Size Position amp Offsets Page 17 Colors amp Backgrounds Page 20 Fonts amp Padding Page 23 Borders amp Effects Page 24 Menu Module Manager 23 Manual CSS Editor 26 Menu Image Editor 27 Image Manager 28 More Information 29 Troubleshooting 30 APPENDIX 1 Tigra Menu Default CSS File 31 2 Click Menu Default CSS File 32 53 Trans Menu Default CSS File 33 4 CSS Horizontal Tab Menu Default CSS File 34 5 Dynamic Tab Menu Default CSS File 35 6 Tree Menu Default CSS File 36 7 MyGosu Menu Default CSS File 36 SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 3 of 37 What is swMenuPro swMenuPro is a complete menu module management system that integrates into Joomla Mambo open source content management systems To accomplish this swMenuPro comes in two parts A component which is accessed through the Joomla Mambo administration and a module that may appear multiple times within any Joomla Mambo page The component gives you the ability to easily create and manage an u
18. a link menu96 a visited background E8EBFO important border 1px solid CCC important color 666 important font weight bold important font size 12px important font family Arial Helvetica sans serif important white space nowrap important margin right 8px important padding 2px 10px 2px 10px important text decoration none menu96 a hover color 000000 important menu96 td a here background color FFFFFF important border bottom 1px solid FFFFFF important color 000000 important menu96 td dyn tab top active96 af background color FFFFFF important border bottom 1px solid FFFFFF important color 000000 important menu96 img segl submenu96 img seq display inline menu96 img seq 2 menu96 a hover img seql submenu96 img seq2 submenu96 a hover img segl menu96 td dyn tab top active96 a img seql display none menu96 a hover img seq2 submenu96 a hover img seq2 menu96 td dyn tab top active96 a img seq2 display inline tabsub296 padding 2px Spx 2px 5px important clear both border bottom 1px dashed CCC important background color FFFFFF important height 20px submenu96 clear both margin top Opx important table submenu96 padding 0 important clear both table submenu96 td display inline background image none padding 0 important ta
19. alid module position haid down ctri key elect multiple pages None Published D Ono ves Da nd cats Examples s Enample FAQ Item 2 E ample FAQ Editor Hack DEWC pito FAQ Item 1 Active Menu i mo ves mae Click Save or Export to save your menu module and return to the menu module manager Hybrid Menu i Fo Cres Use Tablets Showasbiogs I The Menu Module Editor is discussed in much greater detail further in the manual i Fo ves i Thou z swMenuPro Menu Module Manager Menu Modules display is i cc ca a i 4 Create and edit as many menu modules as you like Then manage them all from here the swMenuPro Menu Module Manager 2 O Glick Menu Standard Demo edit CGS CC 3 O Trans Menu Picture Demo edit CSS images GD GI 4 D Trans Menu Standard Demo edit edit CSS preview The Menu Module Manager is discussed in much greater detail further in the manual Results 1 5 of 22 SWonline biz SimenuPro e005 by Sean White swMenuPro User Manual Page 7 of 37 Menu Systems Overview e Trans Menu A DHTML pop out menu with a nice sliding effect Vertically aligned submenus slide out of Vertical or Horizontally aligned top menu items Top menu is visible in non JavaScript browsers and to all search engines e MyGosu Menu A DHTML pop out menu with lots of options Vertically aligned submenus pop out of Vertical or Horizonta
20. ble submenu96 a color 666 important font weight normal important font size 12px important font family Arial Helvetica sans serif important height 20px margin right 5px limportant padding 2px 5px 2px 5px important text decoration none border none important border left 1px solid CCC important white space nowrap table submenu96 a hover dyn tab sub active96 a background E8EBFO important color 000000 important table submenu96 last96 a border right 1px solid CCC important menu96 table a hover color 000000 important swtabcontent96 height 20px width 100 display none SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 36 of 37 Tree Menu Default CSS File dtree93 width 170px border 1px solid 124170 important background color FFFFFF important margin 0 important padding 2px 2px 2px 2px important dtree93 img border Opx important vertical align middle important dtree93 a font family Arial Helvetica sans serif important font size 12px important text decoration none important font weight bold important color E17200 important text decoration none important dtree93 a node dtree93 a nodeSel white space nowrap padding 2px 2px 2px 2px important dtree93 a node hover dtree93 a nodeSel hover color 666 imp
21. changed by replacing these images below with your own You can do this using the built in Image Manger Normal image modules mod_swmenupro images transmenu submenu on gif Mouse over image modules mod_swmenupro images transmenu submenu off gif Active Menu When this feature is on the program will automatically trace back the Itemid of the current page being viewed until it reaches the top menu item This then becomes the active top menu item and receives different styling to indicate where the user is in the menu tree By default the active top menu item is given the same CSS as a top menu rollover item With the Tree CSS Horizontal Tab Click and Dynamic Tab menu systems this feature will also keep the appropriate submenu open with the active submenu and top menu items in a highlighted state CSS for active top and submenu items can also be directly edited with the swMenuPro Manual CSS Editor Maximum Levels Set the maximum amount of levels of the menu you want the menu module to display eg Maximum levels 0 displays all levels and is the default setting Maximum levels 1 would only display the top menu items and no submenus Maximum levels 2 would only display the top menu items and level 1 submenus Parent Level This is an advanced feature which allows for the automatic creation of a different menu source depending upon the page being viewed When a parent level is set the program will automatically trace back the menu from the
22. dule or component then please see the installation troubleshooting section New Component Installation bots installers Messages S amp Templates Site EN Templates Admin amp Languages 2 On the Install New Components screen click on Browse Locate the com_swmenupro4 zip file on your local computer then press OK Then press Upload file amp Install 1 Log into the Joomla Mambo administration area In the top menu locate a 3 installers components Modules ia Mambots gt Install NEW Compe FA 3 The component shoul d now Upload Package File automatic ally install Package File CAD ocuments and Settings seansDesktop com_swmenuprod 1 zip i Upload File amp Install and display a Ue i i I L _AA e Xzz5L z bEE 5 AFI successful installation page Click continue Si to go back to the T gt Upload component Success Components H9 Installation screen swmenupro SwMenuPro should now be listed as an installed component Tirnanms Joomla Mambo DHTML Menu Component a SWMenuPro installed succesfully Continue SWonline biz SWimenuPro e005 by Sean White swMenuPro User Manual Page 5 of 37 Upgrade Existing Component Installation Unzip the com_swmenupro4 zip file and upload all contents using FTP SSH or another means to the administrator components com_swmenupro folder overwriting all existing files Any swMenuPro component ca
23. e important div menu94 a div menu94 a visited div menu94 a link font size 12px important font family Arial Helvetica sans serif important text align left important font weight bold important color FFF2AB important text decoration none important margin bottom 0px important display block white space nowrap important div menu94 td border right 1px solid 124170 important border top 1px solid 124170 important border left 1px solid 124170 important background color 2F82CC important div menu94 td last94 border bottom 1px solid 124170 important trans active94 af color FFFFFF important background color 6BA6DE important menu94 a hover color FFFFFF important background color 6BA6DE important menu94 span display none menu94 a img seql transMenu94 img segl display inline menu94 a hover img seq 2 transMenu94 item hover img seq2 display inline menu94 a hover img seql menu94 a img seq2 transMenu94 img seq2 transMenu94 item hover img seql display none SWonline biz SimenuPro e005 by Sean White swMenuPro User Manual Page 34 of 37 CSS Horizontal Tab Menu Default CSS File tabtop295 padding 0 important background FFFFFF important width 100 menu95 margin 0 important padding 0 important padding top
24. e submenus With the Trans menu system this relates to the slide out time and slide back time for the submenu SWonline biz SimenuPro e005 by Sean White swMenuPro User Manual Page 25 of 37 Menu Module Manager Central to the management of menu modules is the swMenuPro Menu Module Manager It is from here that all the different configuration screens for each menu module can be accessed Set the maximum amount of menu modules to display on this page swMenu Pro Menu Module Manager Menu Modaies display is gt o gt D D a co o CD CC Ga Results 1 5 of 22 Bottom Menu Click Menu Standard Demo Trans Menu Ficture Demo Trans Menu Standard Demo pe Page Navigation Use to navigate through your swMenuPro menu modules when there are too many to list on the one page Change the number of pages listed with the display drop down above Names of your menu modules Clicking on the name has the same effect as clicking the edit button Hovering over a name with the mouse pointer will open a small window displaying additional information about that menu module Click edit to open the swMenuPro Menu Module Editor The menu Module editor is where you change all module settings and main styles for your menu module Click edit CSS to open the swMenuPro Manual CSS editor The manual editor will set allow you to fine tune the menu module or add custom C
25. e values will cause the page to refresh resulting in the loss of any unsaved changes Edit Over Image Results 1 Sof19 ema Click save to save changes to the external CSS file and return to the menu module manager screen Click preview to open a popup window showing a live preview of the menu module preview using the current saved settings and the CSS from the text window Click cancel to close the manual CSS editor and return to the menu module manager screen cancel Use the Auto Menu Item Configuration Utility to quickly apply images or properties to groups of menu items Changes are only made to menu items shown on the page so set the display number high to display all menu items before making and saving changes SVonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 28 of 37 Turn off the menu item This disables the URL of a menu item so it acts as a name to use the selected placeholder for submenus Clicking on non link menu items does not reload the page Click menu works better when top menu item images as the complete menu item menu items with submenus are set as non link items 2 tem Mame News Show Mame W ls Link W Image Align Left tem Level TOP Parent tem Top Edit image Edit Over Image ini Hybrid tem Ho tem Type content_section Click on edit image and edit Over Image to open the Image Set the alignment of the manager in a pop
26. em2 active img seq2 ddmx91 a item2 active hover img seq2 display inline ddmx91 img seq2 ddmx91 item11 acton item1 img seq1 ddmx91 a item2 hover img seq1 ddmx91 a item2 active img seq1 ddmx91 a item2 active hover img seq1 ddmx91 a iteml hover img seq1 ddmx91 a iteml active img seq1 ddmx91 a iteml active hover img seql display none html ddmx91 td position relative ie 5 0 fix SWonline biz SimenuPro 2005 by Sean White
27. emplate file governs how your whole site will look and where the various modules can be published A typical piece of code that loads a module position in the template looks like this lt php if mosCountModules left mosLoadModules left 1 y gt This loads whatever modules are publishes in the left module position if there are any modules published in the left module position on the page You can create your own module positions in the template file then add these positions to Joomla Mambo admin by going to Site gt Template Manager gt Module Positions These new positions then become selectable when positioning modules Module Order More than one module may be published in the one position Module order lets you define the order modules will appear in any module position Access Level Also set the access level here Public modules will be visible to anyone visiting your site Registered modules are only displays to registered members who are logged in Special can be used for other purposes Show Menu Module on Pages Select which pages you want the menu module to be displayed hold down ctri key while left clicking mouse to select multiple pages on None cats Examples Select All to have the menu display on all pages cats Examples Example FAQ Item 2 cats Examples Example FAG Item 1 cats Newsflash s Newsflash Newsflash 1 1 1 1 ini pai Select None to display on no pages same as un publishin
28. f 37 Tree Menu System Colors and Backgrounds Select colors and images for font and font color over LAI O Links Top Icon Folder Icon Folder Open Icon Document IGO i ka News Feeds Icon can be left blank for no Icon background image and background image over E Search C Contact Us MENU BORDER outside border All colors need to be valid hexadecimal colors with the prefix Top Icon GET Folder Icon GET Folder Open Icon m GET Document Icon O GET CSS Horizontal Tab and Dynamic Tab Menu Systems Colors and Backgrounds TOP MENU TOP MENU SUB MENU AND Select colors and Images for BACKGROUND FONT COLOR ACTIVE TAB COLOR J IMAGE FONT COLOR TOP MENU TAB BORDER COLOR font and font color over for Top Menu Items font and font color over for Sub Menu Items TOP MENU TAB SUB MENU AND COLOR IMAGE TIVE TAB COLORI IMAGE background and background over for Top Menu Items background and background over for Sub Menu Items can be left blank for transparent Sub eres background background image and background image SUB MENU AHD SUB MENU ITEM z r for Top Menu Items ACTIVE TAB DIWIDER COLOR A JI ONELIO op enu Items FONT COLOR background image and background image SUB MENU ACTVETAS sueMmenuover Over for Sub Menu Items BOTTON BORDER BOTTOM BORDER BACKGROUND COLOR COLOR COLOR IMAGE top menu border active menu bottom border sub menu bottom border sub menu divider Al
29. g cats Newsflash Newsflash 3 cats Latest a E I i a eo Select multiple pages by holding down the ctrl key while left ra pen prey Nons lim 3 clicking the mouse button on menu pages cats Latest Example News ltem 4 mainmenu Home mainmenu News mainmenu News Links mainmenu News News Feeds mainmenu News News Feeds Blog mainmenu FAQs mainmenu FAQs Joomlal License s SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 17 of 37 Menu Module Editor Size Position amp Offsets Page swMenu Pro Menu Moduie Editor Tigra Menu Menu Module Settings Size Position amp Offsets Colors amp Backgrounds Fonts amp Padding Borders amp Effects This page lets you define the So eee positioning and offsets for your menu module Settings are slightly different between menu modules and are explained in more detail below Menu Position and Orientation Top Menu Position Access the Size Position Menu Item Sizes amp Offsets page by clicking on the second tab Top Menu Orientation Top Menu Item Width Top Menu Item Height Sub Menu item Width Eee fo px Sub Menu Item Height 25 px Level 2 Sub Menu Left Offset 145 px Tigra Menu TOP MENU TOP MENU ITEM WIDTH ITEM WIDTH TOP MENU Top Item K Q 2 ITEM HEIGHT TOP MENU ITEM HEIGHT LEVEL 1 TOP OFFS LEVEL 1 TOP ii OFFSET op UL j LL L la j H f
30. hover color FF9900 important font weight bold important font size 12px important font family Arial Helvetica sans serif important click menu92 box2 background color FFF2AB important color E18246 important font weight bold important font size 12px important font family Arial Helvetica sans serif important text align center important border 1px solid FFFFFF important click menu92 click sub active92 click menu92 box2 hover background color FFFFCC l important color FF9900 important font weight bold important font size 12px important font family Arial Helvetica sans serif important text align center important border 1px solid FFFFFF important click menu92 box1 seq1 click menu92 box2 seql display block click menu92 box1 hover seq2 click menu92 box1 active seq2 click menu92 box2 hover seq2 click menu92 box2 active seq2 display block click menu92 box1 hover seql click menu92 box1 open seql click menu92 box1 open hover seql click menu92 box1 seq2 click menu92 box2 hover seql click menu92 box2 seq2 display none SWonline biz SimenuPro e005 by Sean White swMenuPro User Manual Page 33 of 37 Trans Menu Default CSS File transMenu94 position absolute important overflow hidden left 1000px top 1000px
31. if normal at 14px Verdana Arial Helvetica sans serif Geneva Arial Helvetica sans serif Geneva Arial Helvetica sans serif Bold at 12px verdana Arial Helvetica sans serif Bold at 14px You can also set the font size weight and Arial Helvetica sans serif Bold at 14px alignment for most menu systems Geneva Arial Helvetica sans serif Normal at 14px To use different fonts link the menu module to the exported CSS file and use the Manual CSS Editor to change font values in the CSS Menu Item Padding Use padding to move the menu item text around within the menu item This is useful for aligning text with background images Also useful for adding width and height to auto resizing menu items BOTTOM PADDING RIGHT PADDING SWonline biz SWimenuPro 2005 by Sean White swMenuPro User Manual Page 24 of 37 Menu Module Editor Borders amp Effects Page Set border styles and sizes on this page To use no border set the border width to Opx or the border style to none This page will look different depending upon the menu system being edited swMenu Pro Menu Module Editor myGosu Menu Menu Module Settings Size Position amp Offsets Colors amp Backgrounds Fonts amp Padding Borders amp Effects Module Name fren save export w cancel Access the Borders amp Effects page by clicking Border Widths Main Menu Outside Border VWidth fi pix Main Menu Oust n Main Menu In
32. ili the Joomla Mambo admin to open the SwmenuPro newsFeeds gt Menu Module Manager a Pang Polls S swinenuFree 3 Sv menuPro H Edit Menu Modules S syndicate cat A tems Web Links Hl 2 SONNETS __ ager pA Yov ll need to create a new menu module straight away so Go to the Create New Menu Create New Menu Module Module facility in the right side and choose one of the 7 menu systems from the drop down list Then i Select Menu System click submit Use default menu style C Copy existing menu style Clicking the will open a pop up window with brief explanations of the currently available menu systems Further information on different menu Submit systems is also available in this manual swMenuPro Menu Module Editor myGosu Menu ings Size Position amp Offsets Colors amp Backgrounds Fonts amp Padding Borders amp Effects 3 Use the Menu Module Editor to change all styles and properties of your menu module save preview cancel Menu Source Settings PSP Menu Source i mainmenu Module Postion i et Parent i Top z Module Order Style Sheet Settings Access Level Load Style Shee Javascript Import External m Module Class Suto Dp i Menu Module Settings Show Module Name i No ves Use the preview button to view your menu module as you make changes Give the menu module a name and publish it in a v
33. individual menu items and can be used to properly align images with text To apply no image or to remove a previously selected image click OK without selecting an image first For up to date information on swMenuPro go to the http www swonline biz website Many menu solutions can be found in the forums For info on Joomla go to http www joomla org For info on Mambo go to http www mamboserver com For more information regarding the menu systems visit the original authors websites Tigra Menu http www softcomplex com products tigra_menu Click and MyGosu Menu http gosu pl dhtml mygosumenu html Trans Menu http youngpup net projects transMenus Tree Menu http www destroydrop com javascript tree Dynamic Tab http www dynamicdrive com SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 30 of 37 Trouble Shooting Installation Troubleshooting To install the component and module files the following folders need to be writeable modules media components administrator components If they are not then you will get a failed install error Use FTP SSH or some other way to CHMOD those folders to 777 Sometimes an installation may become corrupt and not uninstall or install correctly and there will be files already created that cause the installation to fail If you get a file exists error during installation then you may have to manually delete some folders to re
34. install For the component use FTP SSH or some other means to completely delete the components com_swmenupro administrator components com_swmenupro Folders then try the component installation again For the module use FTP SSH or some other means to completely delete the modules mod_swmenupro folder and the modules mod_swmenupro php modules mod_swmenupro xml Files then try the module installation again If you still cannot install then you can use the manual install method to install the component and module files Unzip the com_swmenupro4 zip file to its own folder Eg com_swmenupro4 Upload the entire folder to the administrator components folder Go to installers gt components in the Joomla Mambo admin Type the name of the path to the folder you just uploaded eg home httpd www administrator com_swmenupro com_swmenupro4 into the install directory box then press install SS The program will now be manually copied into the correct folders and the appropriate database entries added to the database to make the component accessible from the Joomla Mambo admin Repeat the steps above with the module file and module installer to manually install the module SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 31 of 37 APPENDIX Tigra Menu Default CSS File m010i0ut90 font family Arial Helvetica sans serif important font size 12px important text decoratio
35. itor The output HTML source also looks neater Disadvantages Top menu items will not display correctly in non JavaScript browsers when using any of the menu systems Do Not Load This places no style sheet or link to an external style sheet You need to manually add a link to your templates index php file for this setting to work Go to Site gt Template Manager gt Site Templates in the Joomla Mambo admin Select the template that will be displaying the menu module then click Edit HTML in the top right corner Type a link to the external style sheet just before the lt head gt tag eg lt link href http yoursite com modules mod_swmenupro styles menu css rel stylesheet type text css gt Replace yoursite com with the URL for your site and replace with the module id of your menu module You can locate this number in the CSS file name on the swMenuPro Manual CSS Editor page for your menu module Advantages Menu module will completely validate You can now fine tune the menu or add new features by manually editing the associated CSS file using the swMenuPro Manual CSS Editor The output HTML source also looks neater Top menu items will also display correctly in non JavaScript browsers when using any of the menu systems apart from the Tigra and Tree menus which are written purely as JavaScript Disadvantages None but you need to apply the manual edit described above for it to work Module Class Suffix Joomla Mambo automa
36. kground and background over for Top Menu Items background and background over for Sub Menu Items can be left blank for transparent background background image and background image over for Top Menu Items background image and background image over for Sub Menu Items border and border over for Top Menu Items border and border over for Sub Menu Items Font Color Border Color i Menu Item vy Border Over Color Menu Item s OBackground Color Image All colors need to be valid hexadecimal colors with the prefix Trans MyGosu amp Click Menu System Colors and Backgrounds Select colors and images for font and font color over for Top Menu Items font and font color over for Sub Menu Items background and background over for Top Menu Items background and background over for Sub Menu Items can be left blank for transparent background background image and background image over for Top Menu Items background image and background image over for Sub Menu Items 2 222828282 inside and outside border for Top Menu Items inside and outside over for Sub Menu Items Trans menu has submenu outside border only Menu Item Font Color cy Outside Border Color O Menu ltem Inside Border Color OBackground Color Image he All colors need to be valid hexadecimal colors with the prefix SWonline biz SimenuPro e005 by Sean White swMenuPro User Manual Page 22 o
37. l colors need to be valid hexadecimal colors with the prefix SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 23 of 37 Menu Module Editor Fonts amp Padding Page Get your text the right shape size and position on this page Use padding to move the menu text around within the menu element and set all font values This page will look different depending upon the menu system being edited sMenu Pro Menu Module Editor Click Menu Menu Module Settings Size Position amp Offsets Colors amp Backgrounds Fonts amp Padding Borders amp Effects Module Name fetes export preview cancel As the Fonts amp Padding page by clicking Top Menu EEE Top Menu Font S on the forth tab Sub Meru AralHeWveticasansseit SS Helvetica sans serif Sub Menu Fort Si Top Right Bottom Left Top Menu Text Alignment left a Bo px 5 px B px BE px Sub Menu Text Alignment fio Top Right Bottom Left Font Weight roma A Bo px Bo px B px Bo px Font Weight Over wa Menu Item Fonts viiner Bow ai Tidar aa pe The program will currently let you select any of the following font groups that are compatible with most browsers Yerdana Arial Helvetica sans serif Bold at 10px Arial Helvetica sans serif Normal at 12px Georgia Times New Roman Times serif Normal atizpx Arial Helvetica sans serif Times New Roman Times serif Georgia Times New Roman Times serif Times New Roman Times ser
38. lly aligned top menu items Top menu is visible in non JavaScript browsers Top and sub menus are visible to all search engines e Tigra Menu A DHTML pop out men Fully JavaScript Vertically aligned submenus pop out of Vertical or Horizontally aligned top menu items e Dynamic Click Menu A Vertical DHTML Click Menu Submenus open beneath parent top menu items and retain active status whilst navigating pages Top menu is visible in non JavaScript browsers Top and sub menus are visible to all search engines e Dynamic Tab Menu A Horizontal Tab menu with horizontal DHTML sub menus Sub menus open automatically on mouse over of top menu items Top menu is visible in non JavaScript browsers Top and sub menus are visible to all search engines e CSS Tab Menu A horizontal CSS based tab menu No JavaScript with active tab Top menu is visible in non JavaScript browsers Top and sub menus are visible to all search engines e Tree Menu A DHTML Tree menu Traditional folder document menu Main Feature Differences Between Menu Systems Active Menu Wes Position Relative Relative Relative ae e Kres Relative Absolute Left Left Centre Centre Right Right Riaht Richt Top Menu HTA Pea Horizontal Vertical Vertical Horizontal Horizontal Orientation Vettical Vertical Vertical Sub Menu Vertical Vertical Vertical Vertical Vertical Horizontal Horizontal Orientation Auto Height Wves__ Wyes__ no _ Xno _ Wyes__ No No Auto Width
39. manually add menu links to new content each time new content is added Use Tables Blogs Hybrid Menu When this feature is turned on the menu source will automatically append content items as menu items to the menu structure in the following way If an existing menu item type is a content section blog or content section table Relevant categories are appended as a submenu to that menu item Relevant content items are then appended to each category menu item as more submenus Making two levels of submenus that are appended to the original existing menu item If an existing menu item type is a content category blog or content category table Relevant content items are then appended to the category as a submenu Making one level of submenu that is appended to the original existing menu item Tables Blogs Joomla Mambo arranges content in sections which contain categories which then contain the actual content articles items A page that is viewed as a blog shows the initial part of each content article related to that category or section on the page with a read more link for each article A page that is viewed as a table shows each related articles title in a table format the titles then link to the full content articles You can choose here if any auto generated category menu items are shown as blogs or tables This setting also applies to content only menus SWonline biz SimenuPro e005 by Sean White swMenuPro Current Content S
40. menu systems apart from the Tigra and Tree menus which are written purely as JavaScript Disadvantages Menu will not validate as lt style gt tag is within the document body JavaScript Import External This loads the style sheet by linking to an external CSS file via a JavaScript function You need to have exported the menu module for this option to work If you view the output HTML source from a page with a menu module published with this setting you will see a JavaScript function to load the style sheet in the page The JavaScript function written once within the page lt script type text javascript gt lt l function SWimportStyleSheet shtName var link document createElement link SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 12 of 37 link setAttribute href shtName link setAttribute type text css link setAttribute rel stylesheet var head document getElementsByTagName head item 0 head appendChild link gt lt script gt The JavaScript function that loads each menu module with this CSS style load setting lt script type text javascript gt lt SWimportStyleSheet http yoursite com modules mod_swmenupro styles menu css gt lt script gt Advantages Menu module will completely validate You can now also fine tune the menu or add new features by manually editing the associated CSS file using the swMenuPro Manual CSS Ed
41. n none important padding 2px Opx Opx 10px important color FFF2AB important font weight bold important text align left important m010iover90 font family Arial Helvetica sans serif important font size 12px important text decoration none important padding 2px Opx Opx 10px important color FFFFFF important font weight bold important text align left important m01000ut90 text decoration none important border 1px solid 124170 important background color 2F82CC important m01000ver90 text decoration none important border 1px solid 124170 important background color 6BA6DE important mOlliout90 font family Arial Helvetica sans serif important font size 12px important text decoration none important padding 2px Opx Opx 10px important color E18246 important font weight bold important text align left important m0lliover90 font family Arial Helvetica sans serif important font size 12px important text decoration none important padding 2px Opx Opx 10px important color FF9900 important font weight bold important text align left important m01100ut90 text decoration none important border 1px solid 124170 important background color FFF2AB important moz opacity 0 85 filter alpha opacity 85 m0lloover90 text decoration none important border
42. n be upgraded or downgraded this way without loss of any menu settings New Module Installation bots Installers Messages System 1 Log into the 2 On the Install New Modules Templates Site Joomla Mambo screen click on Browse Locate the b Templates Admin administration area In mod_swmenupro4 zip file on your T Languages the top menu locate local computer then press OK Then eee installers modules press Upload file amp Install A Module re A Mambots i ia i new Mmoquies 3 The module Upload Package File Browse Upload File amp Install ackage File should now automatically install and display a successful installation page Click continue to go back to the A Upload module Success BY Modules Installation screen SwMenuPro SWmenuPro should now be listed JoomlaMambo DHTML Menu Component as an installed module Continue Upgrade Existing Module Installation Unzip the mod_swmenupro4 zip file and upload all contents using FTP SSH or another means to the modules folder overwriting all existing files Any swMenuPro module can be upgraded or downgraded this way without loss of any menu settings SWonline biz Simen ro 2005 by Sean White swMenuPro User Manual Page 6 of 37 Getting Started ant Components Modules Mambot 1 To get started go to os i Components gt SwmenuPro gt Edit Menu Modules in ae Contacts r M
43. nlimited number of menu modules Each menu module can be any of 7 completely independently configurable menu systems e Trans Menu A DHTML pop out menu with a nice sliding effect Vertically aligned submenus slide out of Vertical or Horizontally aligned top menu items Top menu is visible in non JavaScript browsers and to search engines e MyGosu Menu A DHTML pop out menu with lots of options Vertically aligned submenus pop out of Vertical or Horizontally aligned top menu items Top menu is visible in non JavaScript browsers Top and sub menus are visible to all search engines e Tigra Menu A DHTML pop out menu Fully JavaScript Vertically aligned submenus pop out of Vertical or Horizontally aligned top menu items e Dynamic Click Menu A Vertical DHTML Click Menu Submenus open beneath parent top menu items and retain active status whilst navigating pages Top menu is visible in non JavaScript browsers Top and sub menus are visible to all search engines e Dynamic Tab Menu A Horizontal Tab menu with horizontal DHTML sub menus Sub menus open automatically on mouse over of top menu items Top menu is visible in non JavaScript browsers Top and sub menus are visible to all search engines e CSS Tab Menu A horizontal CSS based tab menu No JavaScript with active tab Top menu is visible in non JavaScript browsers Top and sub menus are visible to all search engines e Tree Menu A DHTML Tree menu Traditional folder document menu
44. nu Insidel the Color Wheel Picker get HFFFOAB get sub Menu Outsi below get HEF F58 yet Sub Menu Inside Border Color fin 24170 yet Sub Menu Background Sub Wenu Font Color Click GET to open the image manager in a pop up wondow and choose an image Sub Menu Over Font Color a Poet Sub Menu Color Sub Menu Over Color You can select colors with the color wheel Select colors on color wheel picker then click get next to color box to picker or they can be manually edited All apply selected color colors should be a valid hexadecimal color with the prefix for maximum browser compatibility In most cases an item can be made transparent by completely deleting the associated color value Clicking GET will open the image manager in a pop up window to select or upload background images Click on a color to select it To remove a background image open the Then click to apply the image manager then click OK without color to the selected item selecting an image This will remove the BEFEFFF previously selected background image More details on colors and backgrounds for the various menu systems is discussed below SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 21 of 37 Tigra Menu System Colors and Backgrounds Select colors and images for font and font color over for Top Menu Items font and font color over for Sub Menu Items bac
45. ortant font weight bold important background color CCC important dtree93 a nodeSel background color CCC important dtree93 clip overflow hidden Mygosu Menu Default CSS File ddmx9 1 border 0px solid FFFFFF important ddmx91 a item1 ddmx91 a iteml hover ddmx91 a iteml active ddmx91 a item1 active hover padding 5px 5px 5px 5px important top Opx left Opx font size 12px important font family Arial Helvetica sans serif important text align left important font weight bold important color FFF2AB important text decoration none important display block white space nowrap position relative background color 2F82CC important ddmx91 td item11 padding 0 important border top 1px solid 124170 important border left 1px solid 124170 important border right 1px solid 124170 important border bottom 0 limportant white space nowrap important ddmx91 td item11 last padding 0 important border 1px solid 124170 important white space nowrap ddmx91 a item2 background color FFF2AB important color E18246 important border top 1px solid 124170 important border left 1px solid 124170 important border right 1px solid 124170 important ddmx91 a item2 last background color FFF2AB important color E18246 important border bottom 1px solid 12
46. ortant display block white space nowrap click menu92 inbox1 hover color FFFFFF important background color 6BA6DE important click menu92 box1 open color FFFFFF important background color 6BA6DE important border 1px solid FFFFFF important click menu92 box1 open hover color FFFFFF important background color 6BA6DE important border 1px solid FFFFFF important click menu92 section border 1px solid FFF2AB important display none filter alpha opacity 85 click menu92 section a width 130px background color FFF2AB important color E18246 important font weight bold important font size 12px important font family Arial Helvetica sans serif important text align center important padding Spx Spx Spx 5px important border 1px solid FFFFFF important color E18246 important text decoration none important click menu92 section a hover background color FFFFCC important color FF9900 important text decoration none important border 1px solid FFFFFF important click menu92 inbox2 click menu92 inbox2 visited click menu92 inbox2 active color E18246 important font weight bold important font size 12px important font family Arial Helvetica sans serif important text align center important display block click menu92 click sub active92 click menu92 inbox2
47. pt hacks forums on the http www swonline biz website SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 27 of 37 Menu Image Editor The image editor allows you to edit individual normal and rollover images for any menu item as well as de activating actvating the menu item name and link swMenuPro i tom mei j M test3333 Menu Image Editor enu source te Auto Menu item Configuration Utility save preview cancel Step 1 Select tems Step 2 Select Attribute Image Preview Step 3 Press Apply Please Select Please Select apply Max Levels 10 Display 5 l Individual Menu item Configuration Show Mame W le Link e Edit Image tem Type content_categony tem Name Welcome to Joomii tem Level Sublevel 4 Parent tem Latest Hybrid tem No tem Type content_item_link tem Name Example News tem 1 tem Level Sublevel 4 Parent tem Latest Hybrid tem Ho tem Type content_item_link tem Name Example News kem 2 item Level Sublevel 4 Parent tem Latest Hybrid tem No Show Name W Set the maximul levels and menu items to display on this page Please note changing these values will cause the page to refresh resulting in the loss Edit Image Image Align Left Page Navigation Use to navigate through your menu items when there are too many to list on the one page Please note changing thes
48. s setting you will see the style sheet in the actual page Advantages swMenuPro includes a browser detection script which fixes some issues with width and padding values being handled differently between browsers this only applies to a few of the menu systems A style sheet loaded this way will be automatically adjusted to suit the users browser It is possible to tweak the CSS though to fix this if using one of the other CSS style loading methods Top menu items will also display correctly in non JavaScript browsers when using any of the menu systems apart from the Tigra amd Tree menus which are written purely as JavaScript Disadvantages Menu will not validate as lt style gt tag is within the document body Can also make the output HTML source look a bit messy Link External This loads the style sheet by linking to an external CSS file You need to have exported the menu module for this option to work If you view the output HTML source from a page with a menu module published with this setting you will see a link to the style sheet in the page eg lt link href http yoursite com modules mod_swmenupro styles menu css rel stylesheet type text css gt Advantages You can now fine tune the menu or add new features by manually editing the associated CSS file using the swMenuPro Manual CSS Editor The output HTML source also looks neater Top menu items will also display correctly in non JavaScript browsers when using any of the
49. ser Manual Page 10 of 37 Content Only Menu cone cn tet categorico content _ ES News News Latest Welcome to Joomla i El a atest Example News Item 1 ca Welcome to Joomla FAQs Examples Example FAQ Item 2 if Example News Item 1 Example FAQ Item 1 Ag FAs Newsflashes Newsflash Newsflash 1 O Examples Newsflash 2 ca Example FAQ Item 2 H D Example FAQ Item 1 Structure of example content items in a content only menu Eis Newsflashes lS Newsflash Newsflash 1 It is also possible to create a content only menu select use content only as the menu source This menu source creates itself dynamically from content items stored in the database The menu Example Content Only will also update itself automatically when new content is added to a Menu Source category Basic structure of a content only menu is shown below Newsflash Once again you can change the parent to just show a specific part of the content menu tree Top menu items are the content sections Level 1 submenus are the relevant content categories for each section Level 2 submenus are the content items for the relevant categories Content needs to be published and have a valid date to be displayed in this menu Content menu items are generated each time the menu is drawn there is no reference to them in the Joomla Mambo menu manager so it is not possible to adjust all the parameters you normally could with menu items of this type
50. side Border Width fo px Main Menu insida on the fifth tab Sub Menu Outside Border Width boo px Sub Menu Outside Border Style Sub Menu Inside Border Width 1 px Sub Menu Inside Border Style solid Sub Menu Opacity fe Sub Menu Cpen Close Delay fo me Menu Borders This Border is 1px Wide and Dashed This Border is 2px Wide and Dashed This Border is 1px Wide and Solid All browsers render the borders slightly different so end result may not always be the same Set the style and width values on this page To use no border set the style to This Border is 2px Wide and Solid n i none and the width to Opx This Border is 2px Wide and Dotted Diagram to the left is an actual screenshot of how firefox has rendered the borders described This Border is 4px Wide and Inset This Border is 4px Wide and Double Change border colors on the Colors amp This Border is 4px Wide and Ridged Backgrounds page For even more control over borders link the menu module to the exported CSS file and use the Manual CSS Editor to change border values in the CSS Special Effects The three pop out menu systems Tigra menu MyGosu menu and Trans menu offer some special effects These include Sub Menu Opacity Set the transparency level for the submenus Backgrounds will show through these menus giving a professional look Sub Menu Open Close Delay Set the time in milliseconds for displaying and hiding th
51. tically adds a class that encompasses any module By default this CSS class is called moduletable This class can cause CSS conflicts with some of the menu systems in some templates Adding a suffix will bypass any moduletable CSS that may already exist in the templates template_css css file and may fix some conflicts It also provides another way of adding additional CSS completely surrounding and specific for that menu module SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 13 of 37 Menu Module Settings Show Module Name Select wether the Menu Module Settings module name should be displayed above the menu module or not show Module Mame C no ves Published i ho ves Published Select wether the menu i Editor Hack 2a li module is published or not Only i No ves published menu modules are visible on Active Menu i Cono ves our site Maximum Levels i 0 aj Editor Hack This is only for MyGosu Farent Level i 0 E menu which can have JavaScript conflicts sub Menu Indicator i mo C ves with some of the front end editors available for Joomla Mambo When this feature is on the menu module is disabled if the page is being edited or a new page is being added through the front end Sub Menu Indicator This is only for the trans menu and if on it will place a right aligned image on submenu items that are parent items to other submenu items This image can be
52. tructure P News is a section T mMainmeni iu table menu item based iD Bee on the News section a Latest TE iL Welcome to Joomla ci Links i CER fy Example Mews tem 1 16 FAQs SE Elog a Examples I User Manual Current Menu Source Page 15 of 37 Hybrid Menu i a Mews Eh k Latest Hi n Welcome to Joomla Sa ar Example FAQ Item i LA si boa o RR 0 Example FAQ Item 1 Cam Bea SI FAOs Blog L Mewsflashes i FAQs is a ee B 9 use i seth category table i Joomla License s A Example FAQ Item i Di C Newsflash i menu item Ra SF Nasa based on the Example FAQ Item 2 FAQs Example S i Search s category ai ae Wrapper SE Contact Us In the example above the menu item News is a content section table based on the content section News and the menu item FAQs is a content category table based on the content category FAQs Examples The Hybrid menu shows the result of merging the existing content with the existing menu source It is recommended that you use the cache feature if using the hybrid menu Cache Settings Cache Settings Cache Menu tems i ia No ne i 1 hour aj Cache refresh time Gathering the menu items requires the program to query the mySql server In most cases this is just the one query and has no real effect on server load The hybrid menu feature and content only menu source feat
53. u95 clear both margin top Opx important ul submenu95 display inline padding 0 important clear both ul submenu95 li display inline padding 0 important list style type none important ul submenu95 a color 666 important font weight normal important font size 12px important font family Arial Helvetica sans serif important line height 20px important margin right 5px important padding 2px 5px 2px 5px important text decoration none important border none important border left 1px solid CCC important white space nowrap ul submenu95 a hover css tab sub active95 background E8EBFO important color 000000 important ul submenu95 last95 a border right 1px solid CCC important menu95 ul a hover css tab sub active95 color 000000 important SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 35 of 37 Dynamic Tab Menu Default CSS File tabtop296 padding 0 important background FFFFFF important width 100 padding top 5px important padding left 5px important padding right 5px important padding bottom Opx important border bottom 1px solid CCC important menu96 margin 0 important padding 0 important menu96 table menu96 td height 19px margin 0 important padding 0 important menu96
54. up window You can then select individual image and mouse over menu item images for normal and mouseover states image with the menu text mage Manager a The image manager allows you to manage your images for use as background and individual menu item images Navigate and create new folders Insert Image here for storing your menu images Image Manager rectory ficons a it j gt A Individual menu item images also take into account width height hspace and vspace values as recorded here when writing the it 32432 ii ge tags for the menu item Edit or delete images tt 25422 Tt 23423 Ba Y Space Alt a gif Height KE H Space Baseli Border W Constrain Proportions Refresh Click Browse to locate a file on your local hard drive Select an image from the centre preview Then Click upload to upload window and then press OK to apply the Cancel the file to the current open image To apply no image click OK without selecting an image first SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 29 of 37 All images are stored in the modules mod_swmenupro images folder This folder needs to be writeable for the image delete edit and upload facilities to function correctly You may also manually install images by uploading image files to this folder using FTP or another means Hspace Vspace Width and Height is recorded for images chosen for
55. ures do use more queries to gather the menu items and construct the menu source This can cause increased server load on busy sites or sites with lots of content Using the cache feature greatly reduces server load for these menu sources by storing the menu items in a flat text file that can be directly read by the server without the need for any queries The cache refresh time sets the time interval between the menu items being updated by the database This ensures that at the most the menu source is only updated once from the database in that time interval If you are adding new content you will not see the changes in the menu items until the cache file refreshes All previews in the admin area show what the menu will look like after the next cache refresh modules mod_swmenupro cache folder needs to be writeable for this feature to fully work SWonline biz SimenuPro 2005 by Sean White swMenuPro User Manual Page 16 of 37 Position amp Access eos Module positions are defined in the Joomla Mambo template you are using Module Position i left a Module Order Didi TH Module Position Each template uses different module positions in different Access Level n Registered spots on the page i Special hl To view the module positions within the template go to Site gt Template Manager gt Site Templates Select your template then click Edit HTML This opens the index php file for your template Your t
Download Pdf Manuals
Related Search