Hi vchetwynd,
Use below CSS and change according to your need.
<style type="text/css">
.navbar-default
{
color: #FFFFFF !important;
background-color: #0090CB !important;
}
.navbar-header > a
{
color: #FFFFFF !important;
}
.navbar-default .navbar-nav > li
{
background-color: #0090CB !important;
}
.navbar-default .navbar-nav > li > a
{
color: #FFFFFF !important;
}
.navbar-default .navbar-nav > li > a:hover
{
background-color: #00a950 !important;
color: #000000 !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus
{
background-color: #00a950 !important;
color: #000000 !important;
}
</style>
Check the sample code.
Master Page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.navbar-default
{
color: #FFFFFF !important;
background-color: #0090CB !important;
}
.navbar-header > a
{
color: #FFFFFF !important;
}
.navbar-default .navbar-nav > li
{
background-color: #0090CB !important;
}
.navbar-default .navbar-nav > li > a
{
color: #FFFFFF !important;
}
.navbar-default .navbar-nav > li > a:hover
{
background-color: #00a950 !important;
color: #000000 !important;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus
{
background-color: #00a950 !important;
color: #000000 !important;
}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<link rel="stylesheet" media="screen" href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' />
<script type="text/javascript" src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span
class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ASPSnippets</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" RenderingMode="List"
BackColor="Red" IncludeStyleBlock="false" StaticMenuStyle-CssClass="nav navbar-nav"
DynamicMenuStyle-CssClass="dropdown-menu">
</asp:Menu>
</div>
</div>
</div>
<script type="text/javascript">
Sys.WebForms.Menu._elementObjectMapper.getMappedObject = function () {
return false;
};
$(function () {
$(".navbar-nav li, .navbar-nav a, .navbar-nav ul").removeAttr('style');
$(".dropdown-menu").closest("li").removeClass().addClass("dropdown-toggle");
$(".dropdown-toggle").find("a[href='javascript:;']").attr("data-toggle", "dropdown");
$(".dropdown-toggle").find("a[href='javascript:;'].level1").append("<span class='caret'></span>");
$(".dropdown-toggle").find("a[href='javascript:;']:not(.level1)").closest('li').addClass('dropdown-submenu');
$("a.selected").closest("li").addClass("active");
$("a.selected").closest(".dropdown-toggle").addClass("active");
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function (event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
</script>
<hr />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = this.GetData(0);
PopulateMenu(dt, 0, null);
}
}
private DataTable GetData(int parentMenuId)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[4] {
new DataColumn("ParentMenuId"),
new DataColumn("MenuId"),
new DataColumn("Title"),
new DataColumn("Url") });
dt.Rows.Add(0, 1, "Home", "~/Home.aspx");
dt.Rows.Add(0, 2, "Services", "javascript:;");
dt.Rows.Add(0, 3, "About", "~/About.aspx");
dt.Rows.Add(0, 4, "Contact ", "javascript:;");
dt.Rows.Add(2, 5, "Consulting", "~/Consulting.aspx");
dt.Rows.Add(2, 6, "Outsourcing ", "~/Outsourcing.aspx");
dt.Rows.Add(4, 7, "Phone", "javascript:;");
DataTable dtFinal = dt.Clone();
DataRow[] dr = dt.Select("ParentMenuId=" + parentMenuId);
if (dr.Length > 0)
{
dtFinal = dr.CopyToDataTable();
}
return dtFinal;
}
private void PopulateMenu(DataTable dt, int parentMenuId, MenuItem parentMenuItem)
{
string currentPage = Path.GetFileName(Request.Url.AbsolutePath);
foreach (DataRow row in dt.Rows)
{
MenuItem menuItem = new MenuItem
{
Value = row["MenuId"].ToString(),
Text = row["Title"].ToString(),
NavigateUrl = row["Url"].ToString(),
Selected = row["Url"].ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
};
if (parentMenuId == 0)
{
Menu1.Items.Add(menuItem);
DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
}
else
{
parentMenuItem.ChildItems.Add(menuItem);
if (parentMenuId > 0)
{
DataTable dtChild = this.GetData(int.Parse(menuItem.Value));
PopulateMenu(dtChild, int.Parse(menuItem.Value), menuItem);
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Dim dt As DataTable = Me.GetData(0)
PopulateMenu(dt, 0, Nothing)
End If
End Sub
Private Function GetData(ByVal parentMenuId As Integer) As DataTable
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn(3) {New DataColumn("ParentMenuId"), New DataColumn("MenuId"), New DataColumn("Title"), New DataColumn("Url")})
dt.Rows.Add(0, 1, "Home", "~/Home.aspx")
dt.Rows.Add(0, 2, "Services", "javascript:;")
dt.Rows.Add(0, 3, "About", "~/About.aspx")
dt.Rows.Add(0, 4, "Contact ", "javascript:;")
dt.Rows.Add(2, 5, "Consulting", "~/Consulting.aspx")
dt.Rows.Add(2, 6, "Outsourcing ", "~/Outsourcing.aspx")
dt.Rows.Add(4, 7, "Phone", "javascript:;")
Dim dtFinal As DataTable = dt.Clone()
Dim dr As DataRow() = dt.[Select]("ParentMenuId=" & parentMenuId)
If dr.Length > 0 Then
dtFinal = dr.CopyToDataTable()
End If
Return dtFinal
End Function
Private Sub PopulateMenu(ByVal dt As DataTable, ByVal parentMenuId As Integer, ByVal parentMenuItem As MenuItem)
Dim currentPage As String = Path.GetFileName(Request.Url.AbsolutePath)
For Each row As DataRow In dt.Rows
Dim menuItem As MenuItem = New MenuItem With {
.Value = row("MenuId").ToString(),
.Text = row("Title").ToString(),
.NavigateUrl = row("Url").ToString(),
.Selected = row("Url").ToString().EndsWith(currentPage, StringComparison.CurrentCultureIgnoreCase)
}
If parentMenuId = 0 Then
Menu1.Items.Add(menuItem)
Dim dtChild As DataTable = Me.GetData(Integer.Parse(menuItem.Value))
PopulateMenu(dtChild, Integer.Parse(menuItem.Value), menuItem)
Else
parentMenuItem.ChildItems.Add(menuItem)
If parentMenuId > 0 Then
Dim dtChild As DataTable = Me.GetData(Integer.Parse(menuItem.Value))
PopulateMenu(dtChild, Integer.Parse(menuItem.Value), menuItem)
End If
End If
Next
End Sub
Screenshots
Web View
Mobile View (Responsive)
