Hi,

I have a menu bar with its source derived from an xml data source. I have successfully created the menu bar, but now I want to make that menu bar responsive. I have tried many options but I can't get a correct solution. I hope for a answer here. The code is given as below.

<div id="abchome_menu_bar">
<table>
<tr>
<td width="auto" align="center" valign="middle" style="text-align:center">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" Width="94%" ondatabound="Menu1_DataBound">
<DynamicMenuStyle CssClass="IE8Fix" />
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass= "mainmenu" />
<asp:MenuItemStyle CssClass= "levelmenu" />
<asp:MenuItemStyle CssClass="sublevelmenu" />
</LevelMenuItemStyles>
<StaticSelectedStyle CssClass="selected" />
<DataBindings>
<asp:MenuItemBinding DataMember="Menu" TextField="text" ValueField="text" NavigateUrlField="url" />
<asp:MenuItemBinding DataMember="SubMenu" TextField="text" ValueField="text" NavigateUrlField="url" />
<asp:MenuItemBinding DataMember="Home" NavigateUrlField="url" TextField="text" ValueField="text" />
</DataBindings>
</asp:Menu>
<asp:XmlDataSource ID="XmlDataSource1" runat="server"></asp:XmlDataSource>
</td>
<td style="width: 100%" align="right">
<asp:Label ID="lblWelcome" runat="server" Style="font-style: italic;" ForeColor="White"></asp:Label>
</td>
<td style="text-align: right; width: 62px">
<asp:LinkButton ID="lbtnLogOut" runat="server"  ForeColor="White" Font-Size="10pt" Width="60px">Log Out</asp:LinkButton>
</td>
</tr>
</table>
</div>

Thanks & Regards,
Sajin A

Tables are monsters in getting a great responsive user experience. For the rest I see lots of tags that are unknown to me, so I can't help you further with that. All I can say is that tables are inflexible as hell. Your menu should be build with an unordered list.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.