Menu
Menu
Follow Us
 
Installation & Activation
  1. Unzip the downloaded file
  2. Choose the appropriate "universal" installation package for your DNN site (DNN5, DNN6, or DNN7).
  3. Use the standard DNN module installation method:
    Host menu > Extensions > Install Extension Wizard
  4. Proceed through the wizard screens. Look for red error messages at the conclusion. Please contact PackFlash if you receive any red error messages via success@packflash.com, and include the error messages.
  5. If the installation is error free, there should be a new "PF Constellation" item under the Admin menu. (If this doesn’t show up immediately, try refreshing the page.) Go to this page.
  6. Click the "Licensing" button found under "Central Functions"
  7. Select the "Mega Module" tab.
  8. To activate the mega menu and set up the admin tool for your portal, simply enter your email address into the "License Key" box, and click "Update." You should get a green message indicating that the changes have been saved.
  9. If the activation was successful, you will see a new item in the admin menu: "PF Mega Dashboard."
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:
  1. After activation, you should have a PF Mega Dashboard item under the admin menu. Go there.
  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.
  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.
  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.
  5. We recommend that you go with "Smart Menu Mode," which provides the most flexibility in controlling your menu structure.
  6. Select "convert skin" and the skin will be copied and converted.
  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.
  8. You’ll be taken to the "manage 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.
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:
  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. Let’s save 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.)
  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.
  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.
  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.
  6. Right-click on the "Combo" node, and select "add child."
  7. In the "add new node" form, change the Node Type to "Smart Node."
  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.
  9. "Selected Node" - select one of the 2 root-level DNN pages which you removed from the original menu.
  10. You can experiment with the child depth or child count later if you like, but for now, accept the default values.
  11. Make sure that the parent is set to "Combo." (There is a bug where sometimes the parent isn’t properly selected.)
  12. Save. You’ll note that the child node should be placed under the "Combo" root node, and into "Column 1."
  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.
  14. Right-click on "Column 1" and choose, "Add column after." The system will create "Column 2" for you.
  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.
  16. Save the version again.
  17. Click the "publish menu now" button.
  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.
  19. Go back to the admin tool. It will default to the currently published menu, which happens to match "experiement_01" exactly. Make some other adjustment, perhaps deleting another root-level node. Then save a new version: "experiment_02."
  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.
  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.
Definitions
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 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 are 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 for 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.

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.
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 add content). The exact placement of content is in large part determined by the site CSS, although there are 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."
Menu Theming - Look and Feel
The look and feel of the menus are 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:
  1. It is easiest to start with one of the included themes as a starting point. We suggest applying all the samples (Menu Setup > Basic Settings) to determine which one is closest to your needs.
  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:
    [site root]/DesktopModules/PfDnnNavigation/Themes
    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.
  3. For information about managing the CSS to change the menu appearance, please expore the topics found in our forum
Showcase Sites
Get PackFlash Services
 
PackFlash| Superior DotNetNuke Solutions| 415 N. Lasalle Street, Suite 205, Chicago, IL 60654| success@packflash.com
Home | DotNetNuke Modules | Skins & Design | Website Services | Demos | About Us | Contact Us | Blog
Copyright 2019 by PackFlash