NavigationBar Appearance Properties|KT.UI for ASP.NET AJAX

NavigationBar Appearance Properties in ASP.NET

Home > How to > NavigationBar Controlling Appearance

Information to Navigation Bar Appearance

The appearance of navigation bar directly determines its feel and look. To help users customize the appearance of navigation in the most direct and flexible way, the PerNavigationBar control not only offers lots of properties to tailor the layout and feel of the navigation bar but also allows users to add images to the items on the navigation bar. And the appearance of items on the navigation bar can be also designed by setting proper CSS class.

In this article, we will mainly talk about the way to change the appearance of navigation bar via adding images to items on the bar.

Adding Images to Items

The PerNavigationBar control offers various properties to help users add images to navigation bar items in their designed way for changing the appearance of the navigation bar.

Here we list the properties that you can use when adding images to navigation bar items.

ImageUrl: this property is used to specify the image that you want to add to the item.
HoveredImageUrl: this property is used to specify the image that you want to show when the mouse hovers on the item.
SelectedImageUrl: this property is used to specify the image that you want to show on the navigation bar when the item is selected.
ExpandedImageUrl: this property is used to specify the image that you want to show on the navigation bar when the item is expanded.
DisabledImageUrl: you can use this property to specify the image that you want to show on the navigation bar when the item is disabled.

Here we attach a programming example to show you how use above mentioned properties to add images to navigation bar. In this sample, the ImageUrl and ExpandedImageUrl properties are used. The original image is red and it will be changed to blue image when the RootItem is expanded (showing its child items).

Note: please make sure that your ASP.NET web application has installed NET Framework 3.5 or above versions and that you have installed all the necessary dlls from our ASP.NET AJAX SDK into your ASP.NET web application.

<kettic:PerNavigationBar ID="PerNavigationBar1" Skin="Black" runat="server" 
            ExpandMode="FullExpandedItem" Height="300px">
            <Items>
                <kettic:PerNavigationItem ImageUrl="../../../../Images/NavigationBar/red.png" Text="Color1" ExpandedImageUrl="../../../../Images/NavigationBar/blue.png"
                   Expanded="True">
                    <Items>
                        <kettic:PerNavigationItem runat="server" Text="SubColor"  />                       
                    </Items>
                </kettic:PerNavigationItem>
                <kettic:PerNavigationItem ImageUrl="../../../../Images/NavigationBar/red.png" ExpandedImageUrl="../../../../Images/NavigationBar/blue.png" Text="Color2" >
                    <Items>
                        <kettic:PerNavigationItem runat="server" Text="SubColor" />                       
                    </Items>
                </kettic:PerNavigationItem>
                <kettic:PerNavigationItem ImageUrl="../../../../Images/NavigationBar/red.png" ExpandedImageUrl="../../../../Images/NavigationBar/blue.png" Text="Color3" >
                    <Items>
                        <kettic:PerNavigationItem runat="server" Text="SubColor"  />                        
                    </Items>
                </kettic:PerNavigationItem>                
            </Items>
            <CollapseAnimation Duration="0" Type="None" />
            <ExpandAnimation Duration="0" Type="None" />
        </kettic:PerNavigationBar>

Here we attach an image which shows the result of above programming example here.

Related Tutorial for Navigation Bar Style

If you want to know how to change the skin style of Navigation Bar programmatically, you can visit this Skin Style of Navigation Bar.

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control ASP.NET AJAX Calendar UI Control

ASP.NET AJAX NavigationBar UI Control

Overview Getting Started Elements Templates Features

Data Binding

ObjectDataSource Data Database Data XML Data

Client Prpgramming

Item Event

Server Programming