Bootstrap Default Menu
In bootstrap , menu can be created using div tag with class “navbar”
<div class=”navbar navbar-inverse navbar-fixed-top”></div>
navbar-inverse: This is used when we do not want default coloring(transparent) , It will create menu with black background.
navbar-fixed-top: This class is used when we want to fix our header , means header position is fixed when user scroll down page
Defining the menu links
As we know that to create menu we can use ul element of HTML with class nav navbar-nav.
<div class=”navbar navbar-inverse navbar-fixed-top”>
<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li><a href=”Home”>Home</a></li>
<li><a href=”ContactUs”>Contact Us</a></li>
<li><a href=”About Us”>About Us</a></li>
</ul>
</div>
</div>
Above example will show simple menu .
<div class=”navbar navbar-inverse navbar-fixed-top”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse”
data-target=”.navbar-collapse”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<!–@Html.ActionLink(“Application name”, “Index”, “Home”,
new { area = “” }, new { @class = “navbar-brand” })–>
</div>
<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li><a class=”navbar-brand” href=”Home”>Home</a></li>
<li><a href=”ContactUs”>Contact Us</a></li>
<li><a href=”About Us”>About Us</a></li>
</ul>
</div>
</div>
Now I am going to create menu bar with simple collapse features, mean when user change the screen size or view website on small devices menu will display as collapsed bar.Screen Output is shown below.
