Tabbed Look Using .Net Multiview Control
Here is a trick to display tabbed menu using Multiview control and little bit CSS styling..
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>Tabbed pages</title> <style type="text/css"> .style1 { height: 31px; } </style> <style type="text/css"> .Initial { display: block; padding: 4px 18px 4px 18px; float: left; background: url("Images/InitialImage.png") no-repeat right top; color: Black; font-weight: bold; } .Initial:hover { color: White; background: url("Images/SelectedButton.png") no-repeat right top; } .Clicked { float: left; display: block; background: url("Images/SelectedButton.png") no-repeat right top; padding: 4px 18px 4px 18px; color: Black; font-weight: bold; color: White; } </style> </head> <body> <form id="form" runat="server"> <table cellspacing="10"> <tr> <td class="style1"><asp:LinkButton ID="Link1" runat="server" CssClass="Initial">Package</asp:LinkButton></td> <td class="style1"><asp:LinkButton ID="Link2" runat="server" CssClass="Initial">Itenary</asp:LinkButton></td> <td class="style1"><asp:LinkButton ID="Link3" runat="server" CssClass="Initial">Link 3</asp:LinkButton></td> </tr> </table> <asp:MultiView ID="MyMultiView" runat="server"> <asp:View ID="View1" runat="server"> Tab 1 - insert your content here </asp:View> <asp:View ID="View2" runat="server"> Tab 2 - insert your content here </asp:View> <asp:View ID="View3" runat="server"> Tab 3 - insert your content here </asp:View> </asp:MultiView> </form> </body> </html>
No comments:
Post a Comment
Thank You for Your Comments. We will get back to you soon.