Step 1

Create a database and a table, as shown below.

  1. create table MainMenu(ID int primary key identity(1,1), Name varchar(50),Url varchar(50))
  2. create table SubMenu(Mid int primary key identity(1,1), SubName varchar(50),SubUrl varchar(50),ID int references MainMenu(ID))

Step 2

Add a few records into the tables.

MainMenu Table

  1. insert into MainMenu values('Electronics','/Electronics'),('Men','/Men'),('Women','/Women'),('Baby & Kids','/BabyKids')

Electronics

  1. insert into SubMenu values('Moto G4 Mobiles', '/MotoG4Mobiles', 1), ('Moto G5 Plus Mobiles', '/MotoG5PlusMobiles ', 1), ('Lenevo Mobiles', '/LenevoMobiles', 1), ('Samsung Mobiles', '/SamsungMobiles', 1), ('Apple Mobiles', '/AppleMobiles', 1)
  2. insert into SubMenu values('Lenevo Laptop', '/LenevoLaptop', 1), ('LG Laptop', '/LGLaptop', 1), ('HP Laptop', '/HPLaptop', 1), ('Dell Laptop', '/Dell Laptop', 1), ('Micromax Laptop', '/MicromaxLaptop', 1), ('Sony Laptop', '/SonyLaptop', 1)
  3. insert into SubMenu values('Mobile Cases', '/MobileCases', 1), ('Head Phones', '/HeadPhones', 1), ('Power Banks', '/Power Banks', 1), ('Screenguards', '/Screenguards', 1), ('Micromax Laptop', '/MicromaxLaptop', 1), ('Memory Cards', '/MemoryCards', 1), ('Chargers', '/Chargers', 1)

Mens

  1. insert into SubMenu values('Sport Shoes', '/SportShoes', 3), ('Casual Shoes', '/CasualShoes', 3), ('Formal Shoes', '/FormalShoes', 3), ('Sandels & Floaters', '/Sandels', 3)
  2. insert into SubMenu values('Fasttrack Watch', '/FasttrackWatch', 3), ('Sony Watch', '/SonyWatch', 3), ('Timex Watch', '/TimexWatch', 3), ('Sonata Watch', '/SonataWatch', 3)

Step 3

Create New Project

Go to File > New > Project > ASP.NET Web Application (under Web) > Entry Application Name > Click OK > select Empty template > Checked MVC > OK.

Step 4

Add Entity Data Model

Right click on Model Folder > Add > New item > Select ADO.NET Entity Data Model under Data > Enter model name > Add.

A popup Window will come (Entity Data Model Wizard) > select Generate from database > Next.

Choose your data connection > select your database > Next > select tables > Finish.

Note

Include foreign keys column in the model. This option should be checked before you click Finish button. See the snapshot given below.

Step 5

Model entity will appear, as shown below.

Step 6

Create MyApp.js File in Script Folder
Add the script given below.
  1. var app = angular.module('MyApp', []);
  2. app.controller('menuController', ['$scope', '$http', function($scope, $http) {
  3. $scope.SiteMenu = [];
  4. $http.get('/Home/GetMainMenu').then(function(data) {
  5. $scope.SiteMenu = data.data;
  6. }, function(error) {
  7. alert('Error');
  8. })
  9. }])

Step 7

Create a Controller called HomeContoller in Controllers folder.

Add the code given below.

  1. using System.Web.Mvc;
  2. using DynamicMenu.Models;
  3. namespace DynamicMenu.Controllers {
  4. public class HomeController: Controller {
  5. // GET: Home
  6. public ActionResult Index() {
  7. return View();
  8. }
  9. public JsonResult GetMainMenu() {
  10. DynamicMainMenuEntities dc = new DynamicMainMenuEntities(); {
  11. var menu = dc.MainMenus.Select(c => new {
  12. c.Name,
  13. c.Url,
  14. SubMenu = c.SubMenus.Select(s => new {
  15. s.SubName,
  16. s.SubUrl
  17. })
  18. });
  19. return new JsonResult {
  20. Data = menu, JsonRequestBehavior = JsonRequestBehavior.AllowGet
  21. };
  22. }
  23. }
  24. }
  25. }

Step 8

Add Bootstrap CSS and create navMenu.css for Customized styles.

navMenu.css

  1. body {
  2. font - family: 'Open Sans', 'sans-serif';
  3. }#custom - bootstrap - menu.navbar -
  4. default.navbar - brand {
  5. color: rgba(255, 255, 255, 1);
  6. }#custom - bootstrap - menu.navbar -
  7. default {
  8. font - size: 14 px;
  9. background - color: rgba(240, 17, 132, 1);
  10. border - width: 1 px;
  11. border - radius: 4 px;
  12. }#custom - bootstrap - menu.navbar -
  13. default.navbar - nav > li > a {
  14. color: rgba(255, 255, 255, 1);
  15. background - color: rgba(248, 248, 248, 0);
  16. }#custom - bootstrap - menu.navbar -
  17. default.navbar - nav > li > a: hover, #custom - bootstrap - menu.navbar -
  18. default.navbar - nav > li > a: focus {
  19. color: rgba(51, 51, 51, 1);
  20. background - color: rgba(248, 248, 248, 0);
  21. }#custom - bootstrap - menu.navbar -
  22. default.navbar - nav > .active > a, #custom - bootstrap - menu.navbar -
  23. default.navbar - nav > .active > a: hover, #custom - bootstrap - menu.navbar -
  24. default.navbar - nav > .active > a: focus {
  25. color: rgba(85, 85, 85, 1);
  26. background - color: rgba(231, 231, 231, 1);
  27. }#custom - bootstrap - menu.navbar -
  28. default.navbar - toggle {
  29. border - color: #ddd;
  30. }#custom - bootstrap - menu.navbar -
  31. default.navbar - toggle: hover, #custom - bootstrap - menu.navbar -
  32. default.navbar - toggle: focus {
  33. background - color: #ddd;
  34. }#custom - bootstrap - menu.navbar -
  35. default.navbar - toggle.icon - bar {
  36. background - color: #888;
  38. }
  40. # custom - bootstrap - menu.navbar -
  41. default.navbar - toggle: hover.icon - bar, #custom - bootstrap - menu.navbar -
  42. default.navbar - toggle: focus.icon - bar {
  43. background - color: #f01184;
  44. }.mega - dropdown {
  45. position: static!important;
  46. }.mega - dropdown - menu {
  47. padding: 20 px 0 px;
  48. width: 100 % ;
  49. box - shadow: none; - webkit - box - shadow: none;
  50. }.mega - dropdown - menu > li > ul {
  51. padding: 0;
  52. margin: 0;
  53. }.mega - dropdown - menu > li > ul > li {
  54. list - style: none;
  55. }.mega - dropdown - menu > li > ul > li > a {
  56. display: block;
  57. color: #222;
  59. padding: 3px 5px;
  61. }
  63. .mega-dropdown-menu > li ul > li > a:hover,
  65. .mega-dropdown-menu > li ul > li > a:focus {
  67. text-decoration: none;
  69. }
  71. .mega-dropdown-menu .dropdown-header {
  73. font-size: 18px;
  75. color: # ff3546;
  76. padding: 5 px 60 px 5 px 5 px;
  77. line - height: 30 px;
  78. }

Step 9

Create a View like Index.cshtml.

  1. <html>
  3. <head>
  4. <title></title>
  5. <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
  6. <script src="~/Scripts/jquery-1.10.2.min.js"></script>
  7. <script src="~/Scripts/bootstrap.min.js"></script>
  8. <script src="~/Scripts/navMenu.js"></script>
  9. <link href="~/Content/navMenu.css" rel="stylesheet" /> </head>
  11. <body>
  12. <div class="container">
  13. <nav id="custom-bootstrap-menu" class="navbar navbar-default">
  14. <div class="navbar-header"> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse">
  16. <span class="sr-only">Toggle navigation</span>
  18. <span class="icon-bar"></span>
  20. <span class="icon-bar"></span>
  22. <span class="icon-bar"></span>
  24. </button> <a class="navbar-brand" href="#">My Store</a> </div>
  25. <div class="collapse navbar-collapse js-navbar-collapse" ng-app="MyApp" ng-controller="menuController">
  26. <ul class="nav navbar-nav">
  27. <li class="dropdown mega-dropdown" ng-repeat="menu in SiteMenu track by $index"> <a href="{{menu.ID}}" class="dropdown-toggle" data-toggle="dropdown">{{menu.Name}} <span class="caret"></span></a>
  28. <ul class="dropdown-menu mega-dropdown-menu">
  29. <li class="dropdown-header">{{menu.Name}}</li>
  30. <li class="col-sm-3" ng-repeat="item in menu.SubMenu track by $index">
  31. <ul>
  32. <li><a href="{{item.SubUrl}}">{{item.SubName}}</a></li>
  33. </ul>
  34. </li>
  35. </ul>
  36. </li>
  37. </ul>
  38. <ul class="nav navbar-nav navbar-right">
  39. <li><a href="#">My cart (0) items</a></li>
  40. </ul>
  41. </div>
  42. <!-- /.nav-collapse -->
  43. </nav>
  44. </div>
  45. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  46. <script src="~/Scripts/MyApp.js"></script>
  47. </body>
  49. </html>

Step 10

Run the Application.

Click Electronics tab and you will see the screenshot.