Hi Team,
Thanks for advance,
I have implemented webexplorerbar in asp.net page actually i have requirement like while onmouse over i need to display itemtempleate fields liek underline.
next other requirement :
1.Onmouse over --> item templeate underline.
2.How to design item templeate different border width & style
help me some sample code would be greatly appricate.
Thanks
Hello ranganathanpalanisamy,
I suggest you to set CssClass and HoverCssClass properties of the groups and items in WebExplorerBar - for example:
Hope this helps.
Thanks for your reply,
Actually i am done for mouse over it's working fine for me,changing property name called "EnableHotTracking=False to True".Still i am having problem with itemtempleate group boder with while expending.
Problem :
1.Item templeate border width ,while expending the menu item.
Code example : <igEx:WebExplorerBar ID="ProMISMenu" ImageDirectory="images" runat="server" BarWidth="100%" Width="145px" Height="100%" AnimationDuration="100" GroupExpandBehavior="AnyExpandable" AnimationEquationType="Bounce" EnableAjaxViewState="False" EnableTheming="True" GroupContentsHeight="" ItemIndent="7px" StyleSetName="Default" BorderStyle="None"> <ClientEvents ItemCollapsed="ProMISMenu_ItemCollapsed" ItemExpanded="ProMISMenu_ItemExpanded" ItemClick="ProMISMenu_ItemClick" /> </igEx:WebExplorerBar>
CSS Example:
.igeb_Control{ background-color:Transparent; font-size:large; /*font-weight:bold;*/ font-family:Verdana, Segoe UI, Helvetica, sans-serif; border:solid 1px #6593CF; border-top-width:2px; overflow: hidden; _overflow: hidden!important; color:Black; /*border-color:#6593CF; border-style:solid; border-width:0px;*/}
.igeb_Group{ background-repeat:repeat-x; background-image: url(images/igwlb_group_bt_normal.jpg); margin-top:5px; vertical-align:middle; text-align:left; background-color: #FEE17B; border-color:#6593CF; border-style:solid; border-width:1px; color:#003366; }
.igeb_GroupSelected{ background-repeat:repeat-x; background-position:0px -60px ; color:#003366; background-image: url(images/igwlb_group_bt_normal.jpg);}
.igeb_GroupActive{ background-repeat:repeat-x; background-position:0px -60px ; /*background-image: url(images/igeb_GroupBg.png);*/ color:#0060BF; background-image: url(images/igwlb_group_bt_normal.jpg);}
.igeb_GroupHover{ background-repeat:repeat-x; background-position:0px -30px ; background-image: url(images/igwlb_group_bt_normal.jpg); color:#0060BF;}
.igeb_Item{ background-color:White;}
.igeb_ItemImage{ padding-top:5px; padding-right:5px; padding-left:0px;}.igeb_ItemSelected{ text-align: left; color: #48AAF3; text-decoration: underline; padding-left: 5px; cursor:hand;}
.igeb_ItemActive{ /*background-color:#FFCC33; /* selected Item in the field yellow */ text-align:left; color:White; text-decoration:underline;}
.igeb_ItemHover{ background-color: #48AAF3;/* selected Item in the field yellow*/ cursor:hand; text-align: left; text-decoration: underline; padding-left: 5px; /*background-image: none; color: Black; background-position: 0px 0px;*/}
.igeb_ItemHover a:hover{ text-decoration: underline;}
.igeb_ItemDisabled{}
.igeb_GroupContents{ margin-top:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-bottom:0px; padding-left:0px; list-style: none; /*border-color:#6593CF; border-style:solid; border-width:1px; */}
.igeb_GroupLabel{ font-weight:bold; font-size:9.5px; font-family: Verdana, Arial, Helvetica, sans-serif; /*margin-left:0px; padding-left:0px; text-align:center; /*margin-top:2px;*/ color: #204D89; border-width:0px;}
.igeb_GroupDisabled{ background-repeat:repeat-x; background-position:0px -90px ; background-image: url(images/igeb_GroupBg.png); color:Gray;}
.igeb_GroupExpanderImage{ /*margin-top:5px;*/ margin-right:5px; float: right; /*up & down arrow change*/}
.igeb_ItemLabel{ font-weight:normal; font-size:9.5px; font-family:Verdana, Segoe UI, Arial, Sans-Serif; display: block;}
.igeb_Holder{}
.igeb_GroupLink{ margin-bottom:0px; padding-bottom:0px; padding-left:6px; display: block; color: inherit; text-decoration:none; border-color:#6593CF; border-style:solid; border-width:1px;}
.igeb_ItemLink{ padding-top:2px; padding-bottom:2px; display: block; color:#333333; text-decoration:none; /*color: #204D89; text-decoration: none;*/}
.igeb_ItemParent{ background-repeat:no-repeat; background-image: url(images/igeb_Bullet.png);}
/* IE 7 Disabled item fix */.igeb_ItemDisabled a visited, .igeb_ItemDisabled a{ color:Gray;}
.igeb_Group a visited{ color:#003366;}
/* IE 7 fix to icon bad alignment*/.igeb_Item ,.igeb_ItemActive ,.igeb_ItemSelected{ min-height: 30px; _height: 30px; /*border style */ text-decoration:underline; /* background-color: #6593CF;*/}
.igeb_GroupActive a{ color:#003366;}
.igeb_GroupSelected a visited{ color:#003366;}
.igeb_GroupSelected a{ color:#003366;}
.igeb_GroupActive a visited{ color:#003366;}
.igeb_GroupHover a{ color:#0060BF; }
.igeb_ItemHolder img{ vertical-align:middle;}
.igeb_Group a{ color:#003366; border-color:#6593CF; border-style:solid; border-width:1px;}
.igeb_ItemHolder{ }
.igeb_ItemContents{ margin-left:0px; padding-left:0px; list-style: none;}
.igeb_GroupHover a visited{ color:#0060BF;}
please guide me to reslove above problem
Ranganathan