Tuesday 23 August 2016

Dropdown menu in MVC4 using Bootstrap

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Menu</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <nav class="navbar navbar-inverse" style="background-color:#808080;">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav" >
      <li class="active">@Html.ActionLink("Home","Home","TestHome")</li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Child Detail <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li>@Html.ActionLink("New Child Registration","NewChildRegistration","TestHome")</li>
          <li>@Html.ActionLink("Update Detail","UpdateDetail","TestHome")</li>
          <li>@Html.ActionLink("Total","Total","TestHome")</li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
 
<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>
</body>
</html>

No comments:

Post a Comment