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..!! :)