Picture of Simple Menu Tree Template For XMod Pro

Simple Menu Tree Template For XMod Pro

posted by Moore Creative - 07/14/2013

MooreCreative SiteMap Templates For XMod Pro

Site Map Simple Menu Tree

Need an expand/collapse menu tree style navigation to display the page hierarchy and structure of your DNN site? This Template code for XMod Pro gives your site the perfect site map quickly and easily, and best of all, it's built in XMP where you can have full control to edit the code!
Benefits & Features: We developed this Site Map for DotNetNuke project situations where we needed to present a simple expanding menu list. Many times, we'll use it in a left column as additional section menu for sub-pages. This one has styles that are more simple and is similar to a basic file menu expanding menu tree.
  • This XMod Pro Template displays a site map for the DNN Portal displayed in a graphic layout, CSS driven attractive style site directory.
  • CSS Styles & jQuery provide for expand / collapse menu functionality.
  • Settings within the module settings / xmp configure screen allow you to easily set the theme style for the menu tree including themes: red, black, gray, famfamfam, default
    Themes for the site map tree menu for XMod Pro
  • The sitemap display is intended for humans to view and appreciate but is also appreciated by Google and crawlers as it renders List Item LI tags for each page link and is SEO friendly. It creates clickable anchors styled as colored button shapes that also display the visible URL of the page.
  • Because this sitemap is built in XMod Pro, you can customize and edit it completely! It can be combined with jQuery code, further enhanced with CSS style changes, etc.
  • This XMod Pro Site Map Template allows you to specify data sets through the XMod Pro standard ListDataSource and includes a SQL Stored Procedure to list the Tabs of the DNN site. The SQL query reads from the standard DotNetNuke Tabs / pages table and can be made to honor or ignore "include in menu" data field.
  • You can change it, however with your own SQL query to become a custom navigation that lists out any other content such as article records from a DNN article module, catalog directory, custom table records, etc. Additionally, with edits to the SQL query and the list, it can be used to list pages/tabs across multiple portals.
  • The default Stored Procedure allows for site map page records to return the whole DNN Tab list for the current portal, show hidden pages or not, as well as whether to start from a specific parent tab and list only child tabs of that top-level root/parent. These values are modified by the DNN Admin in the XMod Pro Configure screen's Module Variable settings.
  • You can further use the XMod Pro core xmod:select case statement to format and exclude records as needed.
  • To use this XMP Template within your XMod Pro module instances, simply install as a standard module, a it to a page, and follow the instructions to finish installation on that page. The installer process will create all necessary data Stored Procedures, install required jQuery libraries and images.
  • By default, the Module Kit installer will setup an XMod Pro module instance with the Site Map displaying the main DNN site Tabs.
  • Be sure to check out the other Moore Creative XMod Pro SiteMap Kits for additional styles and site map presentation options.
XMod Pro Menu Tree Template


This Kit & Code Are Made For XMod Pro

Made For XMod Pro

This Kit / Code works in XMod Pro and is a collection of Forms, Templates and Feeds that together create a solution or module for DNN. This code will not work without XMod Pro 3+ installed in your DNN instance. If you do not already have a licensed copy of XMod Pro, go get one!
Get XMod Pro now from The DotNetNuke Store »

Fancy jQuery SiteMaps!

The sitemaps we build to work in XMod Pro are often combinations of style, code, SQL and XMP to create a fully-editable code base for you to use!

This site map features the jQuery magic and fantastic style of a basic jQuery TreeView with TreeView documentation on GitHub. While the project isn't actively maintained any longer, it does have many options and items that you can customize.

Notes & Instructions

You have two options on how to install and begin using the module kit:
  • Option 1. Install Manually
    With the provided .ZIP file of contents, you will find the necessary XMod Pro custom control and example form code that you can copy and paste into new forms that you create within the XMod Pro Control Panel. Additionally, if there are associated images and JavaScript files you will find these in the .ZIP as well.
  • Option 2. Use the Kit Module Installer
    The kit module installer allows you to use the standard DotNetNuke module install process to install the XMod Pro forms and template files as well as create the example database table necessary.
    • To use the kit installer, simply install it in the same manner as a standard module.
    • Then, place the module on a page
    • follow the instructions displayed on the module and click a button to complete installation
    • the completion of the installation process will remove the temporary kit installer module from the page and your DNN instance
    • you are now ready to specify the template, forms, etc within a module of XMod Pro like normal