RadMenu for ASP.NET
Contents
How to create an ImageOnly menu with ShowPath functionality Send comments on this topic.
DNN > How to create an ImageOnly menu with ShowPath functionality

Glossary Item Box

This is a step-by-step guide on how to create an ImageOnly RadMenu with Show Path functionality. The menu uses only images for the different states (normal, hover and selected) and indicates on which page the user is by showing the corresponding menu item as selected.

The challenge with implementing such functionality is how to set a specific image for each menu item. We solve this problem using a neat trick - the *PageName* token replaces the first part of the image name.

 

  1. Create images for the three states of the menu items (normal, over and selected) and name them according to the following convention:
      
         [Page name]_Normal.[ext]
         [Page name]_Over.[ext]
         [Page name]_Selected.[ext]

    For example, if your site has the following structure:

    home         products            about us
                            - dnn
                            - asp net
                            - winforms

    you should have the following images:
                
                   home_Normal.gif                         home_Over.gif                                  home_Selected.gif
                   products_Normal.gif                    products_Over.gif                            products_Selected.gif
                   about us_Normal.gif                    about us_Over.gif                            about us_Selected.gif
                   dnn_Normal.gif                             dnn_Over.gif                                     dnn_Selected.gif
                   asp net_Normal.gif                      asp net_Over.gif                               asp net_Selected.gif
                   winforms_Normal.gif                   winforms_Over.gif                           winforms_Selected.gif
  2. Once you have prepared the menu items' images as suggested in step one, copy them to the folder of your dnn web site located in the portals folder . For example, if you create a new portal for a new site to test this approach, copy the images in:

                 C:\DotNetNuke\Website\Portals\1
  3. Find the DNN RadMenu in the skin.ascx file located at 

     C:\DotNetNuke\Website\Portals\_default\Skins\RadMenu (assuming you have a default installation)
  4. Set the dnn RadMenu as follows:

      Copy Code
    <dnn:RADMENU runat="server" id="dnnRADMENU" SkinsPath="*SkinPath*/Menu/"

                    Skin="none"
                    ShowPath="true"
                    ImagesOnlyMenu="true"

                    RootItemImageUrl="~/Portals/1/*PageName*_Normal.gif"
                    ItemImageUrl="~/Portals/1/*PageName*_Normal.gif"

                    RootItemImageOverUrl="~/Portals/1/*PageName*_Over.gif"
                    ItemImageOverUrl="~/Portals/1/*PageName*_Over.gif"

                    SelectedPathItemImage="~/Portals/1/*PageName*_Selected.gif"
                    SelectedPathHeaderItemImage="~/Portals/1/*PageName*_Selected.gif"

                    style="float:right;" />

Note, that there are two separate properties which you have to set if you want images for both the root and the child items. If, for example, you want images only for the root items, just set the corresponding properties for the root items only.

Also, note how the *PageName* token replaces the first part of the image name.