Member Avatar for SaJiN_1

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

Edited by SaJiN_1 because: Spelling mistake
  • 2 Contributors
  • 1 Reply
  • 335 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

— the core issue is the table-based layout. is correct: navigation should be semantic (a <nav> with a UL/LI list) not built inside a layout table. Tables make responsive behavior and accessibility awkward; switch to semantic markup and CSS-driven layout. MDN: <nav> element (guidance) and WAI guidance on avoiding layout tables are useful references. (developer.mozilla.org)

Two practical server-side approaches for your XML source:

  • Render a UL/LI structure directly from the XmlDataSource by using a templated control (Repeater / nested Repeaters) or by building the markup in the Menu/DataBound code-behind.
  • If you must keep the ASP.NET Menu control, consider the CSS‑Friendly adapters (they make the Menu emit list markup), but for long-term maintainability the Repeater/template approach gives full control over the HTML and classes you need. See Microsoft docs for XmlDataSource and Repeater usage. (learn.microsoft.com)

A minimal client-side pattern (HTML/CSS/JS) you can generate from your XML (example: server emits the UL/LI below):

<nav class="site-nav" role="navigation">
  <button class="nav-toggle" aria-expanded="false" aria-controls="main-nav">Menu</button>
  <ul id="main-nav" class="nav-list">
    <li><a href="/">Home</a></li>
    <li>
      <a href="/products">Products</a>
      <ul class="subnav">
        <li><a href="/products/1">One</a></li>
      </ul>
    </li>
    <!-- server generates more items -->
  </ul>
</nav>

Use CSS Flexbox for the horizontal layout and an @media breakpoint to switch to a stacked/hidden menu on small screens; toggle the .open class on the UL from the button and set aria-expanded accordingly. See MDN Flexbox and Media Queries for examples and details. (developer.mozilla.org)

Quick troubleshooting tips:

  • Inspect the rendered HTML in the browser — if you still see tables, the server control is rendering them; switch to Repeater or build markup in code-behind.
  • Add keyboard/ARIA behavior to the toggle (aria-controls, aria-expanded) so mobile users and assistive tech get correct state.
  • Test at several widths and with a keyboard-only flow. Following the semantic-UL + CSS/Flexbox pattern will make the menu reliably responsive and accessible.
Member Avatar for gentlemedia

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.

Edited by gentlemedia
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.