Mega Menu Module User Manual
Contents
1. packt Change the Way You DNN Mega Menu Module User Manual PACKFLASH COM Mega Menu Manual PackFlash com 415 N Lasalle Street Suite 205 Chicago IL 60654 Phone 888 433 2260 Fax 773 787 1787 Thank you for purchasing our PackFlash Mega Menu Module and make sure to check out all of PackFlash s other premium modules for your future projects Our goal at PackFlash is to give administrators the tools they need to create truly professional websites Let us know if there is anything we can do better The following instructions will lead you step by step through the installation of the module s We strongly recommend that you back up your website and database prior to doing any module installations PackFlash has performed rigorous testing on all of our products but it is impossible to account for every scenario It is best practice and again strongly recommend that you back up your website and database prior to any module uploads to your DNN website Table of Contents Installation Instructions for PackFlash Mega Menu Module 1 1 1 Installation DotNetNuke 06 00 00 or higher aaaeeeeeeeerrrr 1 1 2 Using Licensing to Activate Module s cccceeeeeeeeeeeeneeeeeeeeeeeeeeeeeeees 3 Il Getting Started with the Mega Menu eee0ananra err 5 2 1 System ata MAAC Onesie A NN Ne ee eas 5 2 2 Converting a SKIN 20 2 2 ee eeeeeeeceee eee eeeeeeeeeeceeeeeeeeeeeeteeeaaaeeee2. then you can 20 PF MEGA MENU AND NAVIGATION SYSTEM set NoTheme to true for either object to eliminate a redundant reference to the theme css file Or if you wish to consolidate your CSS into a non theme file such as skin css then this setting will eliminate the un needed stylesheet reference This setting correlates to the NoTheme skin object property Theme Location Determines where the system looks for theme files The standard location is found in the path lt root gt DesktopModules PfDnnNavigation Themes The other option is to include the theme file under your skin folder in which case it is expected to live in the following path Portals 0 skins SkinName Themes ThemeName theme css This setting correlates to the ThemeCssInSkinFolder skin object property Selected Theme The system will look in the selected location and provide a list of any themes which are found This setting correlates to the Theme skin object property Max Menu Depth Use this to control how many levels of hierarchy are included in your menu This global value can be overridden within individual smart nodes This setting correlates to the MaxMenuLevel skin object property Advanced Skin Configuration Data Mode This mode allows you to specify the data source for the menu It is recommended that Smart Mode is always used unless you are using a legacy skin in classic mode This setting correlates to the DataSource skin
3. 2 6 5 For information about managing the CSS to change the menu appearance please explore the topics found in our forum http www packflash com navigation discussion packflash See the Sliding menu vs Fixed menu section of the Definitions above for insight into the naming convention for the included themes 10 PF MEGA MENU AND NAVIGATION SYSTEM 11 PF MEGA MENU AND NAVIGATION SYSTEM lll Examples of Usage of the PF Navigation Skin Object within Skins For PackFlash skins we sometimes include 2 instances of the navigation object within a single skin In this scenario the menus are use for 1 The main menu a horizontal menu living in the site mast head header This main menu might be a Mega Drop Down or a static button bar 2 The sub menu a vertical menu along the left side of the site showing children of the currently active top level root level page 42k LOGOUT SUPERUSER ACCOUNT Friday January 07 2011 Mo L SEARCH J Home Caliper Skin Luau Skin Wright Skin Caliper Skin Caliper Skin E Se eee O ome 1 Black Caliper palette v PREVI Main menu About Caliper 1 Use the drop down mer int color palette I ks at a sma audee I The Mega Drop Down Container Gallery This is the clear container without a title The text will look like this and a link will 12 Color Combos look like this link to another pl
4. Wombats You ano Cortera vit Bowr Cases Marsupials Kagrroot Additional images and content can be added through the admin tool found under the Admin menu 13 PF MEGA MENU AND NAVIGATION SYSTEM IV Determining Menu Structure This chapter discusses how to determine which links appear in your menu The PackFlash Mega Menu system is different from most other DNN menu systems in that the menu can include more than just DNN pages Every link in you menu is called a node Menu nodes exist within a hierarchy of parent and child relationships At the top of the hierarchy are root level nodes which have no parents 4 1 Smart Nodes Smart nodes are called smart because the system will automatically build out the hierarchy of child links under the node If new children are added at a later date these child items will be automatically populate under the smart node The simplest example of a smart node would a root level or top level DNN page An administrator can choose to smart node of type DNN Page select the appropriate DNN page and the system will find all the children of that page and add them to the menu Types of Smart Nodes e DNN Pages any node in the DNN Page hierarchy can be added as a smart node e PackFlash Categories a list of categories from other PackFlash modules can be added to the menu e DNN Social Groups a list of social groups can be added to the menu e DN
5. object property Display Format 21 PF MEGA MENU AND NAVIGATION SYSTEM Controls the HTML output format of the menu The menu object is very flexible and can be used for a number of purposes however most people simply want a mega menu and the value of Mega Drop Down Complex is the appropriate setting in this case This setting correlates to the DisplayFormat skin object property Content Type This setting should always be set to All Pages for a mega menu The other options are only needed for classic mode or for when the desired output is a sub menu This setting correlates to the ContentType skin object property Settings Source Mode This option is what provides the capability to manage the settings for the menu via the admin tool settings managed here If the option is set to settings managed in skin then the properties attributes set within the skin object code will take effect This setting correlates to the UseDynamicSettings skin object property Advanced Menu Settings Enforce Columns This setting only applies when the menu is in classic mode and will set the number of columns to be generated across every tab in the menu This setting correlates to the AutoColumnsToGenerate skin object property Expand All Only applies if Content Type is Sub menu and Auto Sub Menu If set to true then the entire menu hierarchy will be exposed open or expanded oth
6. under the parent If you specify a limit you can also specify a more link Child Depth lets you limit the number of levels of child items to display Columns columns are treated as special nodes within the mega menu and are used to manage groupings of other nodes Column nodes can only be added as children of root level nodes If column nodes are left empty without children they will not have any effect on the display While all of the included themes render the display of columns vertically thus the name column this simply a function of the underlying CSS which sets the float property of DIV elements which use the class of Column It is possible to create a mega menu theme where columns stack on top of each other in which case they ate rendered more as rows Content in the context of the mega menu Content refers to any extra HTML that is placed before or after a menu node This HTML can include images or links if desired Theme a theme is a collection of CSS rules that control the look and feel of the menu Around a dozen themes are included with the menu installation and these can be used as starting points for your own custom themes The standard themes are included as stand alone CSS files which are linked to It is possible to toggle a menu setting so that the menu does not use a packaged theme in which case you should include the CSS rules for your menu in your skin css file Themes can live in one of two loc
7. ExcludedTabs skin object property DNN Page Icon After Text By default DNN page icons will be included in the menu before the display text for the menu item This setting pushes the icon to display after the display text This setting correlates to the IconAfterMenuText skin object property Suppress DNN Page Icons Use this setting to have the menu NOT display DNN page icons This setting correlates to the SuppressIcons skin object property Root Tab ID If the Content Type is set to Sub Menu this setting is used to specify the Tab ID whose descendents will populate the menu 23 PF MEGA MENU AND NAVIGATION SYSTEM This setting correlates to the RootTabID skin object property 24 PF MEGA MENU AND NAVIGATION SYSTEM Vil Styling the Menu You can control the menu appearance though CSS These CSS rules can exist in any stylesheet referenced by your skin including the skin css 7 1 Creating a Portable Theme The styling can be made portable by creating a theme To create a theme e Create a Themes within the folder for the skin that you are using e Create a sub folder under Themes which will act as the name of your theme For instance If you ate using a skin called MyCustomSkin assumed to be in the _default folder for now and want to create a theme called MyCustomTheme you ll create the following path e lt root gt Portals _default skins MyCustomSkin Themes MyCustomThe
8. N Profile Console this allows you to add links utility links for the user to your menu Example console links Activity Feed My Profile Friends Messages Options for Smart Nodes Not all smart node types have the same options Here is some info on the options are common 14 PF MEGA MENU AND NAVIGATION SYSTEM Selected Node if the node type is hierarchical such as DNN Page or PackFlash Categories you can select a node within the hierarchy to be the root of the smart node tree Child Depth lets you specify how deep into the selected node s downstream hierarchy to render For instance the selected node might have 4 direct children and 20 grandchildren Setting the Child Dept to 1 level of Children will result in only the 4 direct children being rendered Child Count let s you specify a limit on how many children are displayed regardless of depth In the example immediately above if the depth limit is set there are potentially 24 child nodes to be rendered You can use the Child Count value to limit this to a more manageable number Note that the count doesn t differentiate between hierarchical levels Auto Columns to Generate because the children of smart nodes are automatically populated and potentially can change over time you can explicitly control how the children are populated into columns However you can tell the system how many columns to create and it will add the children to these columns N
9. OTE this option is only available to smart nodes created at the root Parent use this to control where the smart node is placed within the mega menu hierarchy More Info About Smart Nodes 4 2 The children of smart nodes are always built out automatically You cannot manually add a child node to a smart node The children of smart nodes are shown within the menu tree as being gray for this reason Smart nodes can be created as children of static nodes or columns but not vice versa see above You can add content to children of smart nodes Static Nodes Static nodes are nodes which are manually created and managed by administrators Here are the reasons you may wish to create static nodes You wish to create nodes that are not DNN pages or any of the other entities supported by smart nodes For instance you may wish to add a link to a specific product within an e commerce module You might want to have specific control over how menu nodes are distributed across the columns of a root level node rather than rely on auto columns option that is provided when you create a smart node based on DNN pages 15 PF MEGA MENU AND NAVIGATION SYSTEM e You might want to mix different types of smart node entities For instance you can create a static root node which has 2 columns with the first column having some DNN pages and the second column having PackFlash categories See the exercise listed in section 2 3 for an e
10. ace Sub Menu Option Cras scipit nisi id velit accums gra unc lacus tellus Add Marketing Content Sub menu s sit amet commodo eu enim Ungulates Clear Container Lorem ipsum dolor sit amet consectetur adipiscing elit Curabitur elemer Zebras erdiet venena ugue mauris feugiat enim at malesuac l g a feugiat eu fringillain leo A neu Buffalo actetur eget convallis a tristique in nunc Wild Boar yndimentum eu lobortis metus sollicitudin natis at ullamcorper eget maur Giraffes ec odio accumsan adipiscing Nulla vitae aliquam f velit auctor m ada Nullam ultrices nisi vitae s V u m sagittis lor ullamcorper c quat turpis magna Marsupials at turpis Nam sit a orci nibh ut imperdi elit vestibulum ut comr at condimentum ac neque Cum sociis natoque penatibus Kangaroos et magnis montes nascetur ridiculus mu rabitur id tincidunt Opossums libero Pra r Koalas NOTE the Admin Menu shown in this illustration is no longer applicable for DNN version 6 or higher 12 PF MEGA MENU AND NAVIGATION SYSTEM LOGOUT SUPERLSER ACCOUNT Tuesday Mewary O04 2011 moun C COMPANY About Caliper Ungulates Marsupials Primates Chump an ee The Mega Kangaroot Add Content And Images via the Admin Tool Drop Down Buttaky Opossums Gordes Container Galery Wid Bow zozas Orangutans Coir Combos 12 Cy ra Ga fies Tarnawa Devis Gibbons Sab Mer ODON Watak i h Marketing
11. ackflash module license key retrieval If you have not already purchased a module follow the instructions on page http www packflash com DotNetNukeModules Module Trials ModuleTtiallnstr uctions tabid 261 Default aspx With the license key copied click on the Licensing icon or link This will bring up the screen below Click the module name that you wish to install on the menu on the left and paste the license key into the corresponding box for that module Then click Update The text License is Valid for XXX where XXX is the name of the module being activated If the license is not valid or expired a message related to this will be presented Repeat this same process for all modules that need to be activated PF MEGA MENU AND NAVIGATION SYSTEM ll Getting Started with the Mega Menu The Mega Menu system is designed to replace the standard DotNetNuke menu component a skin object providing advanced control over the menu that is displayed on your site In this getting started section we mill walk through how to use the included Mega Menu Admin module to convert your skin to use the PackE lash Mega Menu object Once that is complete there will be an exercise to demonstrate Rey concepts of the administrative system The contents of this section include 2 1 System at a Glance Converting a Skin Managing the Menu Structure Definition of Terms Managing Menu Content Menu Themes Custo
12. ake some other adjustment perhaps deleting another root level node Then save a new version experiment 02 2 3 20 Now exit the admin tool WITHOUT publishing the menu Go view the page that is using the PackFlash menu You will see that it still displays the experiement 01 menu 2 3 21 Return to the Mega Menu admin tool and select experiement_02 from the load different menu selector It will pull up your saved menu Now if you publish you will see that your 2nd experiment will be visible on your test page PF MEGA MENU AND NAVIGATION SYSTEM 2 4 Definition of Terms Node a page or link if you prefer within a menu Nodes might have children or parents Root node a menu node which is at the very top of the hierarchy and which does not have a parent Static node this is a custom node where you can define the exact display text of the menu item and the link which is optional Smart node this is a PackFlash concept A smart node will automatically build out any children which are found under the node For example if you create a smart node based on DNN pages all the sub pages will be pulled into the menu according to hierarchy established within the DNN pages Smart nodes can be children of static nodes but not vice versa The children of smart nodes are displayed as gray text to indicate that you cannot change the structure Child Count the total number of descendants children grandchildren etc to display
13. anage menu screen and the skin within the admin tool will be updated to show you the PackFlash Mega Menu where your old menu used to be applying whatever theme you selected 2 3 Managing the Menu Structure After you have successfully converted a skin to using the PackFlash Mega Menu you have a great deal of control over the menu structure Upon first loading the manage menu screen after converting a skin the system will detect that the skin is newly converted and it will generate smart nodes for each root level menu item in your site For a full definition of terms see below The best way to learn about manipulating the menu is to right click on a node and see your options You can move nodes around edit them or add sibling or child nodes You can also delete nodes You have the opportunity to completely change the menu structure from the hierarchy established by DNN pages Remember that you can safely edit and experiment with the menu in the admin area Until you click publish your changes will only be seen by you in the admin screen And until your the new skin created in the skin conversion process above is applied to user facing pages the published menu won t be visible to anyone So don t be afraid to play around Here is an exercise to demonstrate the power of the menu 2 3 1 The goal of this exercise will be to combine two root level DNN tabs along with their children into a new menu tab 2 3 2 Let s sav
14. ations e site root DesktopModules PfDnnNavigation Themes theme name theme css e site root Portals portal root skins skin folder Themes theme name theme css Important it is not required that you have theme rules packaged in a specific theme css file You can include all of our menu CSS rules in the skin css file if you prefer In this case you should toggle the menu setting under Menu Setup for this menu uses a packaged theme to false not checked PF MEGA MENU AND NAVIGATION SYSTEM Sliding mega vs Fixed mega in some situations when you have a lot of sub pages or extra content you may want all of your mega drop downs to be large panels that go nearly the full width of your page In this instance the panel might be in the exact same position no matter which root level tab you hover over We refer to this as a fixed menu As an example the PackFlash com site uses a fixed position mega menu In other cases when you have less content you may want the mega menu panels to be smaller and for them to shift position left or right as you hover over different root level tabs We refer to this as sliding menu Our Constellation demo site http constellation packflash com has this kind of menu 2 5 Managing Menu Content HTML content can be added before or after any menu node including to the children of smart nodes to be clear you cannot change the structure of children found under smart nodes but you can a
15. corner of the module will get brighter Hover over the Manage button to produce the action menu Within the action menu choose Installation Extension Wizard under the top Edit section Making this PF MEGA MENU AND NAVIGATION SYSTEM 1 1 4 11 5 1 1 6 1 1 7 1 1 8 selection will produce a modal popup window for the installation process represented in the screen below Upload New Extension Package DotNetNuke can be extended in many ways This wizard helps you upload and install DotNetNuke extension packages Use the Browse button to browse your local file system to find the extension package you wish to install then click Next to continue FE 7 Your site is configured with a maximum file upload size of 8 MB Use the Browse button of the popup window to choose the most recent installation file for the module in question that was downloaded from packflash com Then click the Next button This will produce a screen like below Click the Next button on the Package Information screen Click the Next button on the Release Notes screen This screen may have important information on the latest release of the module s Check the box to accept the license and click the Next button on the Review License screen NOTE Accepting the license is accepting the terms of the license agreement so please read the license agreement carefully before proceeding The next screen will show al
16. d gt Manage Menu Select a page where would you like add the content from a sub menu from the tree navigation on the left side of the page RIGHT click on a page and select Edit Content Add the content text image HTML in the editor before or after preferred menu item Choose Content Alignment from a drop down menu Above Above and Centered Above and Left Aligned Above and Right Aligned Left of the Menu Text Right of the Menu Text or leave option Apply no inline styles like it is Click Save Content at the end found at the bottom of the page The following illustration shows how to manage content for a given menu item 17 PF MEGA MENU AND NAVIGATION SYSTEM Manage Menu Right click on a node to associate content with it Content can go before or after menu node Q About Us HTM enu Item Zoology Edit Content styling that can be specified below thg text efi Q Zoology Box Rich Text Editor Move Up More Info Delete B9 A Custom Links Add Sibling Before H 15 O i S x i Add Sibling After Add Sibling After Arial Helvetica 3 Iil I ll ll o Apply CSS Cla Enter content here Words 0 Characters 0 4 d an inline CSS style can be applied to the content for Content Alignment if dsi Flyer 28e Apply no inline styles HTA gt Menu Item Zoology 5 2 About Columns The PackFlash Mega Menu System provides multiple ways of controllin
17. dd content The exact placement of content is in large part determined by the site CSS although there ate options to override the CSS and force the CSS rules to push content above to the left below or to the right of the menu node To add content right click on any menu node and choose Edit content 2 6 Menu Themes Customization The look and feel of the menus ate managed via themes These are stylesheet files that become reference by the rendered HTML page You can easily change the theme by going to Menu Setup selecting a skin with a mega menu and then changing the theme option found under Basic Settings There are about a dozen packaged themes that are included with the mega menu installation To create a custom theme 2 6 1 It is easiest to start with one of the included themes as a starting point We suggest that you view all the samples by applying them to your skin Menu Setup gt Basic Settings to determine which one is closest to your needs 2 6 2 After selecting a starting theme you should duplicate it This requires FTP access The duplication process simple you just copy the theme folder and rename it The theme folders are found at the following location 2 6 3 site root DesktopModules PfDnnNavigation Themes 2 6 4 If you wish to use DogEarFixedMega as your starting point simply copy this folder to the same location and rename it After this is done the new theme will be available within Menu Setup
18. e a version of the menu Find the menu version management area in the blue box on the right side of the page Click into the text box labeled Currently Managing and type in the name experiment 01 and save You have just saved the initial state of the experimental menu If you have just converted the skin then this initial state will look exactly like the DNN page hierarchy 2 3 3 Select 2 of the existing root level items in the menu and delete them by right clicking on them and choosing delete For this exercise to work the best select root level items that have at least a few sub pages 2 3 4 Right click on one of the remaining root level nodes and choose the option to add sibling before or after the current node Your choice 2 3 5 The add new node form appears Let s leave the node type as Static Node Enter Combo as the Display Text Leave the URL blank Click the save button Your new Combo node should show up in the tree with a hand icon next to it The hand icon indicates that this is a static or manual node 2 3 6 Right click on the Combo node and select add child PF MEGA MENU AND NAVIGATION SYSTEM 2 3 7 In the add new node form change the Node Type to Smart Node 2 3 8 The data source will be set to DNN Pages by default Keep it like this but note that you have options to create a node based on PackFlash categories authors or DNN social groups 2 3 9 Selected Node select
19. eeeeeeeeetsnnaaeeeeeeees 6 2 3 Managing the Menu Structure cccccceeeeceeeeeeeeeeeeeneeeeeeeeeeeeeeeeenieeeeeeees 7 2 4 Definition of RSM Geek a eke eevee tare econ s 9 2 5 Managing Menu Content ccccccceeeeeeeeeeeceeeeeeeeeeeeeeeeneaeeeeeeeeeeeeeeeeenaeees 10 2 6 Menu Themes Customization cccceeececeeeeeeeeeeeeeeeeeeeeeeeeeeteeeeenaaees 10 Ill Examples of Usage of the PF Navigation Skin Object within Skins 12 IV Determining Menu Structure 020000000 eeen 14 4t Smart Nodes RN NN RN 3 ii a ota Ht ota 14 4 2 Static Nodes inne n a aces cteteee este ket eee 15 AS RINSE meU RF S 16 V Managing Menu Content and Column Layout cceeeeree 17 5 1 Adding Content to a Menu Node ccc cccecceeeeeeeeeeeeeeeeeeeeeeeeeeeeeneaeeees 17 5 2 ADOULCOMMNS a aia nA Ea R aA a 18 VI Menu Setup OPNA kA A a At A 20 6 15 Converting SKINS sasssa MN Dun 20 6 2 Multiple Menus in a Skin 00 00000 00000nnneeeerrerrr rann 20 BORN DON Ss a i a A ta tead dads ty 20 VIIL Styling the Menu Bement kere ten creates a GR earner i 25 7 1 Creating a Portable Theme 000eeeeeeerrrrrrnnnnnnrrrrrrrrr rr 25 PF MEGA MENU AND NAVIGATION SYSTEM Ci l I Installation Instructions for PackFlash Mega Menu Module NOTE Installation instructions vary slightly from DNN 5 DNN6 and DNN7 For demonstration purposes instructions are presented for DotNe
20. erwise only the currently active sub path will be expanded This setting correlates to the ExpandAll skin object property Include Anchor Titles If true then the various menu nodes will have the display name passed into the title attribute of the anchor tag 22 PF MEGA MENU AND NAVIGATION SYSTEM Menu Class Specifies the class to be applied to the wrapper div that encloses the menu HTML This setting is useful if you have multiple menu objects on a page and you need to apply different classes to them in order to format them independently This setting correlates to the MenuClass skin object property New Window for External Links If this setting is activated then external links i e those links going to a different domain will open in a new browser window tab The use of this setting must be coordinated with the Internal Domain List setting This setting correlates to the OpenExternalLinkInNewWindow skin object property Internal Domain List If the menu is set to open external links in a new window see above setting then the menu object needs a list of which domains are considered internal Use this setting to provide the list separating domain names by commas This setting correlates to the InternalDomains skin object property Excluded Tabs List Use this setting to specify a list of pages DNN Tab IDs which should not be included in the menu This setting correlates to the
21. g the columns of menu items within your menus Column management is different for smart nodes and static manual nodes e For root level smart nodes right click the node and select edit node You can then specify the auto columns to generate For smart nodes you can specify how many columns you would like and the system will automatically assign nodes to the columns in the order that they are found 18 PF MEGA MENU AND NAVIGATION SYSTEM e For static nodes you can manually add as many columns as you like and then precisely populate the columns according to your needs adding either smart nodes or static nodes as children of the columns e Columns can only be added to root level nodes e Columns MUST have child menu nodes You cannot add HTML content directly to a column If this is a desire then simply create a static node under your column and incorporate content around it Home Caliper Skin Luau Skin Wright Skin About Luau Crustaceans Bony Fish Sharks The Mega Drop Piranhas Hammerhead Down Great White Container Gallery Blacktip Reef Shark Color Palette Blue Shark Options Bull Shark Sub Menu Option Mollusks _______ Whale Shark a mica The admin tool can give you precise control over the column layout allowing you to combine items into shared columns The skin object that generates the mega menu is 19 PF MEGA MENU AND NAVIGATION SYSTEM Vi Menu Setup Options The menu setup area
22. has 2 main functions e It houses the skin conversion utility via the Configure a New Skin button e It provides control over various settings for skins menus which are already configured 6 1 Converting Skins Please see section 2 2 under Getting Started for step by step instructions on how to convert your first skin Be aware that every skin file that you use on your site must be converted independently After the first skin is converted you can use the Configure a New Skin option to convert any other skins you may use 6 2 Multiple Menus in a Skin It is possible that you may want to have multiple menus within a skin The most typical example is a case where you want to have a main menu going horizontally across the top of your skin and a sub menu on the left side of your page When you go through the skin configuration process the utility will find all instances of the skin in your skin and create a separately manageable item which populates the drop down selector at the top of the Menu Setup screen In this case be sure that you ate operating on the desired menu instance if you are changing the settings 6 3 Skin Settings Basic Settings Menu Has a Theme This setting controls whether or not a reference to a theme CSS file is added to the header There are two scenarios where you may not wish to include this reference if you are including multiple menu objects in the same skin and both use the same theme
23. l of the events of the installation process in order that the occurted Scroll through the entire list making sure that there are no red errors or warnings If there are any errors please report them immediately to success packflash com with the error message PF MEGA MENU AND NAVIGATION SYSTEM 1 2 Using Licensing to Activate Module s 1 2 1 After installation a page named Constellation will be added to the Admin menu of the Control Panel in the upper left corner The Constellation Module will be automatically added to the Constellation page Click the Constellation page to view the Constellation options like the image below Main Modules D g News amp Blogs Events Gallery Video E Contacts Slideshow Comments Mega Oo B Central Functions E B Licensing Portal Sharing PF MEGA MENU AND NAVIGATION SYSTEM 1 2 2 1 2 3 1 2 4 1 2 5 1 2 6 With a new installation no modules will be activated and all module icons in the top section will be greyed out Access to the module and functionality will not be provided before activating the module through licensing Without an active license the module will automatically re direct the user to the licensing screen and will not provide the ability to administer the module Any modules previously installed and activated via licensing will be retained on an upgrade To activate a module first obtain a license key by visiting http www packflash com p
24. me e Create a file called Theme css within this folder 2 6 6 Put your styling rules for the menu in this folder best process is to start with one of the theme css files which are included with the installation and found at this path site root DesktopModules PfDnnNavigation Themes e Update your skin settings to point to the theme o Theme Location Custom Theme Under Skin Folder o Selected Theme MyCustomTheme 25
25. mization System at a Glance The PackFlash Mega Menu and Navigation system consists of the following components e A DotNetNuke skin object this skin object is responsible for rendering the menu HTML according to whatever rules have been within the Admin tool e Mega Menu Admin module The admin module should be automatically added to a DNN page under the standard DNN admin menu This DNN module is used by administrators to perform the following tasks PF MEGA MENU AND NAVIGATION SYSTEM o Conversion of skins from using the standard DNN menu skin object to the PF Mega Menu skin object o Configuring the settings applied to a given menu object within a skin For instance a menu theme can be changed which would update the appearance of the menu o Controlling the menu structure including deciding which links are included in the menu The admin tool allows you to present a menu hierarchy that is different from the page hierarchy established within DNN Furthermore non page entities such as authors or categories can be included in the menu o Adding additional content administrators can take advantage of the screen real estate provided by the mega menu and add explanatory imagery or text or marketing content to the menus e Menu Themes the appearance of the menu is managed via CSS files which are called themes There are many theme files which are included with the installation These can be used as starti
26. ng points for creating a custom theme which matches your skin precisely 2 2 Converting a skin The mega menu admin tool can convert an existing skin taking out the standard DNN menu control and replacing it with a PackFlash Mega Menu Here s how 2 2 1 After activation you should have a PF Mega Dashboard item under the admin menu Go there 2 2 2 The admin tool will detect that this is your first use and ask you to Select a Skin to Convert Select the skin that you d like to convert to using the PackFlash Mega Menu and click the Analyze button 2 2 3 The tool will have a look at the skin and likely conclude that it doesn t already have a PackFlash Mega Menu set up and give you the option to copy and convert the skin A new name for the skin to be copied will be suggested which you can change if you like 2 2 4 You can also select a menu theme which determines what the menu will look like There are several starter themes which are provided Select any of them it s easy to change later 2 2 5 We recommend that you go with Smart Menu Mode which provides the most flexibility in controlling your menu structure 2 2 6 Select convert skin and the skin will be copied and converted PF MEGA MENU AND NAVIGATION SYSTEM 2 2 7 After the new skin is created you ll get a message that the menu on this skin is ready to be managed Click the button Yes Load the Skin to proceed 2 2 8 You ll be taken to the m
27. one of the 2 root level DNN pages which you removed from the original menu 2 3 10 You can experiment with the child depth or child count later if you like but for now accept the default values 2 3 11 Make sure that the parent is set to Combo There is a bug where sometimes the parent isn t properly selected 2 3 12 Save You ll note that the child node should be placed under the Combo root node and into Column 1 2 3 13 Go to the version management area blue box on the right and Save the version again it should still indicate that you are currently working with experiment_01 It s good to establish a habit of saving often 2 3 14 Right click on Column 1 and choose Add column after The system will create Column 2 for you 2 3 15 Right click on Column 2 and choose Add child This will bring up the add new node form again Create another Smart node and specify the selected node as the other DNN page which you deleted previously 2 3 16 Save the version again 2 3 17 Click the publish menu now button 2 3 18 Now you can go to a non admin page on your site Perhaps a hidden page since this is an experiment And you can set the skin for the page to be the new skin that was converted to use the PackFlash menu It should display your experimental menu now 2 3 19 Go back to the admin tool It will default to the currently published menu which happens to match experiement_01 exactly M
28. tNuke 6 and higher 1 1 Installation DotNetNuke 06 00 00 or higher 1 1 1 Login as host to the DotNetNuke website 1 1 2 Within the Host Menu in the Control Panel at the top left corner of the screen choose Extensions in the left column of the dropdown list This will show the screen below EXTENSIONS Expand All Available Extensions Purchased Extensions More Extensions installed Extensions This application contains an Update Service which displays an icon when a new version of an Extension is available The icon displayed will contain a visual indication if a currently installed Extension contains a potential security vulnerability If a security vulnerability is identified itis highly recommended that you upgrade to the newer version of the Extension Clicking the icon will redirect you to a location where you will be able to acquire the Extension for immediate installation Find available language packs El Not Specified M Modules a Name Description Version InUse Upgrade x gt Authentication Allows you to manage authentication settings 1 0 0 No _ for sites using Windows Authentication 2 x B Banners Banner advertising is managed through the 1 0 0 No B Vendors module in the Admin tab You can select the number of banners to display as well as the banner type 1 1 3 While making the mouse hover under the main area of the Extensions screen the Manage button in the upper left
29. xample of mixing static nodes and smart nodes 4 3 First Time Use When you first use the admin tool with a newly converted skin the system will detect that there are no existing menu nodes In this instance it will automatically create a smart node for each visible root level DNN page The result is that your menu will be automatically populated according to the DNN page hierarchy e Going forward if another root level DNN page is created it will NOT automatically show up in your menu You must manually add the new smart node using the admin tool e If you ever want to start over you can always delete all your menu nodes in the admin tool When you delete the last node and your menu is once again empty the system will re populate smart nodes based upon the DNN page hierarchy 16 PF MEGA MENU AND NAVIGATION SYSTEM V Managing Menu Content and Column Layout The admin tool allows you to add HTML content text or images to ANY menu node This additional content can be added so that it displays before or after the node or both before AND after The admin tool also allows you to manage columns Columns can only be added as children of root level nodes 5 1 Adding Content to a Menu Node You can add HTML content to your mega menus The HTML content must be associated with a menu item usually a page on your site but it could also be a PackFlash Category or another entity Go to Admin menu gt PF Mega Dashboar
Download Pdf Manuals
Related Search