Navigation menu is most important in any web applications. While developing web applications, I used to create stuff more interactive by using jQuery and CSS. It’s quite different to create dynamic navigation menu in ASP.NET MVC. Whether it’s a horizontal or vertical menu, the idea remains same. This article will show you how to create jQuery Accordion menu dynamically in ASP.NET MVC web application.

 Accordion menu

Accordion menu displays collapsible content panel for presenting navigation links broken into logical sections like tabs. Each section has header and content panel. User can navigate both header and content navigation links.

While googling I have found there are many stylish Accordion menu. But all are static HTML markup, means our requirement is to create Accordion menu dynamically. Because our data comes from database and it’s often required to fetch data by role based.

Please follow the link to refer static jQuery Accordion menu which I’m going to create as dynamic one in our ASP.MVC appliction.

http://thecodeplayer.com/walkthrough/vertical-accordion-menu-using-jquery-css3  

First let me show you what exactly I’m going to do with this static Accordion menu. Just take a look below example that shows you how static HTML markup has been structured. 


<div id="accordian">

    <ul>

       <li>

           <h3>

               <span class="icon-dashboard"></span>Dashboard</h3>

           <ul>

               <li><a href="#">Reports</a></li>

               <li><a href="#">Search</a></li>

               <li><a href="#">Graphs</a></li>

               <li><a href="#">Settings</a></li>

           </ul>

       </li>

       <li class="active">

           <h3>

               <span class="icon-tasks"></span>Tasks</h3>

       </li>

       <li>

           <h3>

               <span class="icon-calendar"></span>Calendar</h3>

       </li>

       <li>

           <h3>

               <span class="icon-heart"></span>Favourites</h3>

       </li>

    </ul>

</div>

 Model

To achieve this task, First I’ll start from adding Model for representing Menu data. In Solution Explorer, right click the Models folder, select Add, and then select Class and enter the class name MenuModel. I have created three classes named as MenuModel, MainMenu and SubMenu.


using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace Accordion_Menu_MVC.Models

{

    public class MenuModel

    {

       public List<MainMenu> MainMenuModel { get; set; }

       public List<SubMenu> SubMenuModel { get; set; }

    }

    public class MainMenu

    {

       public int ID;

       public string MainMenuItem;

       public string MainMenuURL;

    }

    public class SubMenu

    {

       public int MainMenuID;

       public string SubMenuItem;

       public string SubMenuURL;

    }

}


Controller

Then we have to create a controller class. In Solution  Explorer, right-click the Controllers folder and then click Add,  then Controller. Then name your new controller "HomeController" and click Add. Once you added the Controller class please replace the content of the file with following code. Here I have created two public methods that will return generic list of items which holding parent and child menu items.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Accordion_Menu_MVC.Models;

namespace Accordion_Menu_MVC.Controllers

{

    public class HomeController : Controller

    {

       //

       // GET: /Home/

       public ActionResult Index()

       {

           MenuModel ObjMenuModel = new MenuModel();

           ObjMenuModel.MainMenuModel = new List<MainMenu>();

           ObjMenuModel.MainMenuModel = GetMainMenu();

           ObjMenuModel.SubMenuModel = new List<SubMenu>();

           ObjMenuModel.SubMenuModel = GetSubMenu();

           return View(ObjMenuModel);

       }

       public List<MainMenu> GetMainMenu()

       {

           List<MainMenu> ObjMainMenu = new List<MainMenu>();

           ObjMainMenu.Add(new MainMenu { ID = 1, MainMenuItem = "Mobile", MainMenuURL = "http://www.google.com" });

           ObjMainMenu.Add(new MainMenu { ID = 2, MainMenuItem = "Speaker", MainMenuURL = "#" });

           ObjMainMenu.Add(new MainMenu { ID = 3, MainMenuItem = "Watch", MainMenuURL = "#" });

           ObjMainMenu.Add(new MainMenu { ID = 4, MainMenuItem = "Clothes", MainMenuURL = "#" });

           return ObjMainMenu;

       }

       public List<SubMenu> GetSubMenu()

       {

           List<SubMenu> ObjSubMenu = new List<SubMenu>();

           ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Apple", SubMenuURL = "#" });

           ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Samsung", SubMenuURL = "#" });

           ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Nokia", SubMenuURL = "#" });

           ObjSubMenu.Add(new SubMenu { MainMenuID = 1, SubMenuItem = "Motorola", SubMenuURL = "#" });

           return ObjSubMenu;

       }

    }

}

 
View:

Then we have to add View, Right click the Views\Home folder and click Add, then click View. In the Add View dialog box, enter Index and leave Razor as default View Engine and then click OK.

 

@model Accordion_Menu_MVC.Models.MenuModel  

@{

ViewBag.Title = "Dynamic Accordion Menu Using jQuery in ASP.NET MVC";

}

<link href="Css/styles.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {

       $("#accordian h3").click(function () {

           $("#accordian ul ul").slideUp();

           if (!$(this).next().is(":visible")) {

               $(this).next().slideDown();

           }

       });

    });

</script>

@using (Html.BeginForm("Index", "Home"))

{

<div id="accordian">

         <ul>

                  <li>

                  @{

  foreach (var MenuItem in Model.MainMenuModel)

  {

      var SubMenuItem = Model.SubMenuModel.Where(m => m.MainMenuID == MenuItem.ID);

    

          <h3><a href="@MenuItem.MainMenuURL"> @MenuItem.MainMenuItem </a></h3>

           

            if (SubMenuItem.Count() > 0)

            {

                 <ul>

                          @foreach (var SubItem in SubMenuItem)

                          {

                              <li><a href='@SubItem.SubMenuURL'>@SubItem.SubMenuItem</a></li>

                          }

                 </ul>

            }

    

    }

  }

         </ul>

</div>   

}


Style.css

 

<style>

/*Basic reset*/

* {margin: 0; padding: 0;}

body {

         background: White;

         font-family: Nunito, arial, verdana;

}

#accordian {

         background: #004050;

         width: 250px;

         margin: 100px auto 0 auto;

         color: white;

         /*Some cool shadow and glow effect*/

         box-shadow:

                  0 5px 15px 1px rgba(0, 0, 0, 0.6),

                  0 0 200px 1px rgba(255, 255, 255, 0.5);

}

/*heading styles*/

#accordian h3 {

         font-size: 12px;

         line-height: 34px;

         padding: 0 10px;

         cursor: pointer;

         /*fallback for browsers not supporting gradients*/

         background: #003040;

         background: linear-gradient(#003040, #002535);

}

/*heading hover effect*/

#accordian h3:hover {

         text-shadow: 0 0 1px rgba(255, 255, 255, 0.7);

}

/*iconfont styles*/

#accordian h3 a {

         color: white;

         text-decoration: none;

         font-size: 12px;

         line-height: 27px;    

         padding: 0 15px;

         /*transition for smooth hover animation*/

}

#accordian h3 a:hover {

 color:#E1E1E1;   

  }

/*list items*/

#accordian li {

         list-style-type: none;

  background:#4D6974;

}

/*links*/

#accordian ul ul li a {

         color: white;

         text-decoration: none;

         font-size: 11px;

         line-height: 27px;

         display: block;

         padding: 0 15px;

         /*transition for smooth hover animation*/

         transition: all 0.15s;

}

/*hover effect on links*/

#accordian ul ul li a:hover {

         background: #003545;

         border-left: 5px solid lightgreen;

}

/*Lets hide the non active LIs by default*/

#accordian ul ul {

         display: none;

}

#accordian li.active ul {

         display: block;

}

</style>



I hope you enjoyed this article, Please comment below if you’ll get any error or any doubt while doing this.

Happy coding..!! :)

 


View demo Download
http://www.dotnetfox.com/Document/1123/acc-demo.png

If you enjoyed this article, get email updates (it's free).


Related Articles
  • Ajax Accordian control in ASP.NET In this article I’m going to explain how to use Ajax Accordian control in asp.net. The Accordian is a web control that allows you to provide multiple panes and display them at a time and only one panes expanded at a time. Accordian control has a templates for header and content. Also we can add server controls to the Accordian.
  • How to create JQuery UI Accordion in ASP.NETIn this article I’m going to explain how to use JQuery Accordion in ASP.NET. Accordion displays collapsible content panels for presenting information in a limited amount of space. The markup of your accordion container needs pairs of headers and content panels. Here I’ll show you how to create JQuery UI Accordion in ASP.NET. First we have to use following JQuery library and StyleSheet
  • Dynamic Accordion menu or Vertical menu using jQuery in ASP.NET MVCNavigation menu is most important in any web applications. While developing web applications, I used to create stuff more interactive by using jQuery and CSS. It’s quite different to create dynamic navigation menu in ASP.NET MVC. Whether it’s a horizontal or vertical menu, the idea remains same. This article will show you how to create jQuery Accordion menu dynamically in ASP.NET MVC web applicati...

Comments
comments powered by Disqus

Thanks for downloading..!!

×
Subscribe via Email
    
message to display in fancybox