Skip to main content

Asp.net Menu Control - Styling with Bootstrap

Thanks to an interesting post titled "Responsive ASP.NET Menu Control With Twitter Bootstrap", I was able to update the Bootstrap with master pages example with asp.net menu controls instead of being hard coded.

For the menu control, you basically add the below code in lace of the div with "nav-collapse collapse". The menu in this code is based off the Bootstrap Example "Basic marketing site".

The one downside to the menu control is that the control will inject inline styles.  Also, to display the search form in the menu bar, use the code from the bootstrap documentation, then change the <form> to a <span>.

Before:

<form class="navbar-search pull-left">
    <input type="text" class="search-query" placeholder="Search">
</form>
<div class="nav-collapse collapse">
    <ul class="nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li class="nav-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
        </ul>
        </li>
    </ul>
</div>

After:

<span class="navbar-search pull-left">
    <input type="text" placeholder="Search">
</span>
<asp:Menu ID="NavigationMenu" runat="server" EnableViewState="false"
    IncludeStyleBlock="false" Orientation="Horizontal"
    CssClass="nav-collapse collapse"
    StaticMenuStyle-CssClass="nav"
    StaticSelectedStyle-CssClass="active"
    DynamicMenuStyle-CssClass="dropdown-menu">
    <Items>
        <asp:MenuItem Text="Home" ToolTip="Home" />
        <asp:MenuItem Text="Demos" ToolTip="Demos">
            <asp:MenuItem Text="Contact" ToolTip="Contact" />
            <asp:MenuItem Text="Google Map" ToolTip="Google Map" />
        </asp:MenuItem>
        <asp:MenuItem Text="Movies" ToolTip="Movies">
            <asp:MenuItem Text="Action" ToolTip="Action" />
            <asp:MenuItem Text="Drama" ToolTip="Drama" />
            <asp:MenuItem Text="Musical" ToolTip="Musical" />
        </asp:MenuItem>
    </Items>
</asp:Menu>

Here is a link to the entire master file in Github.