In order to install the control you need to extract zip file and then move files under Website folder to your website in same directory structure. Now there is a styles folder which at the moment contains two versions of easynavigation.css. These both contain the style changes that I did to create two sample images attached in this thread. All you need is to to copy desired style sheet file and move it under your current theme folder. For example if you are running default out of the box ablecommerce theme then you need to place file under Website/App_Themes/AbleCommerce. Note that if you want to run multiple instances of EasyNavigation control with different styles for example to run control in sidebar and footer at same time. Then you need to provide one instance of control a different CssClass value and then update corresponding stylesheet for example if CssClass="footerMap" then in easynavigation.css file replace all locations of ul.easyNavigation with ul.footerMap.
CategoryId- Id of category from which control will fetch webpages and links.
ShowTitle - Set to true if you want category name to appear as title heading.
ShowThumbnails Set to true if you want to show webpage and link item thumbnails along with their name.
ShowTitleThumbnail Set to true if you want to show category thumbnail along with title text
TitleHeading Use this property if you want to set a custom title instead of category name.
CssClass Allows you set a CSS class on control instance. This will be really handy where you will try to use multiple instance of easy navigation with custom styles.
TitleThumbnailUrl You can set title heading image URL using this property. if not provided it will default to thumbnail URL of category.
Sidebar Usage Example
Code: Select all
[[ConLib:Custom\EasyNavigation CategoryId="12" ShowTitleThumbnail="true"]] [[ConLib:Custom\EasyNavigation CategoryId="13" ShowTitleThumbnail="true"]] [[ConLib:Custom\EasyNavigation CategoryId="14" ShowTitleThumbnail="true"]] [[ConLib:Custom\EasyNavigation CategoryId="15" ShowTitleThumbnail="true"]]