在常规的后台管理系统或者前端界面中,通常都有一个导航菜单提供给用户,方便选择所需的内容。基于Metronic的Bootstrap开发框架,是整合了Metroinc样式,以及Boostrap组件模块的内容,所以菜单的效果天然也是和Bootstrap一脉相承的。基于常用的几种菜单样式,本文进行了相关的介绍和展现。javascript
菜单的展现能够作成各类各样的效果,本文只是针对性的介绍其中的三种,两种左侧竖放的菜单,一种是水平横放的菜单。css
样式1:html
菜单收缩后界面以下所示。前端
样式2:java
样式3:数据库
水平样式的菜单以下所示:bootstrap
因为这几种布局方式,它们的框架布局页面(也就是Layout页面)内容有所不一样,通常状况下咱们能够把它分别定义为一种Layout页面,这样在实际使用的时候包含它便可。缓存
我根据上面几种样式,分别定义了几个不一样的Layout页面,以下所示数据结构
通常状况下,咱们生成一个视图页面,会提示咱们选择不一样的视图布局页面的,确认以后会在页面顶部应用对应的Layout页面。框架
若是咱们须要动态指定页面的布局内容,能够在上面使用一个变量来处理,以下代码所示。
@{ Layout = ConfigData.ViewLayoutFile;// "~/Views/Shared/_Layout.cshtml"; ViewBag.Title = "角色信息"; }
实际上,咱们通常的页面布局肯定好后,就相对比较少变动的,因此为了避免打破这个生成页面的布局内容,咱们能够把前面处理好的Layout1/2/3等这些复制到Layout页面里面进行处理便可。
不过页面里面仍是须要根据不一样布局页面,指定不一样的资源的。
咱们添加样式的资源以下所示。
//开始全局必需样式引用 css_metronic.Include("~/Content/metronic/assets/global/plugins/font-awesome/css/font-awesome.min.css", "~/Content/metronic/assets/global/plugins/simple-line-icons/simple-line-icons.min.css", "~/Content/metronic/assets/global/plugins/bootstrap/css/bootstrap.min.css", "~/Content/metronic/assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css", .......................... //主题全局样式 "~/Content/metronic/assets/global/css/components-rounded.css", "~/Content/metronic/assets/global/css/plugins.min.css", //主题布局样式 "~/Content/metronic/assets/layouts/" + Layout + "/css/layout.css", "~/Content/metronic/assets/layouts/" + Layout + "/css/themes/default.min.css", "~/Content/metronic/assets/layouts/" + Layout + "/css/custom.min.css" );
上面红色的Layout是咱们根据不一样布局页面得到的一个变量,从而可以使得不一样布局页面的样式和脚本顺利引入的。
/// <summary> /// 系统定义的一些经常使用变量 /// </summary> public class ConfigData { /// <summary> /// Web开发框架所属的系统类型定义 /// </summary> public const string SystemType = "WareMis"; /// <summary> /// 配置视图的样式布局 /// </summary> public static LayoutType Layout = LayoutType.Layout2; } /// <summary> /// 布局样式枚举 /// </summary> public enum LayoutType { Layout, Layout2, Layout3 }
为了实现菜单动态的生成,咱们须要了解这几种方式的菜单结构,而后咱们根据它们的特色进行数据结构的生成便可。
第一第二种布局方式的菜单结构数据是同样的,它们的内容以下所示。
<ul class="page-sidebar-menu page-header-fixed " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200"> <li class="nav-item start" id="1"> <a href="/Home/index?tid=1" class="nav-link nav-toggle"> <i class="icon-home"></i> <span class="title">首页</span> <span class="selected"></span> <span class="arrow open"></span> </a> </li> @Html.Raw(@ViewBag.MenuString) </ul>
咱们能够经过后台生成:@Html.Raw(@ViewBag.MenuString)
而后输出的界面里便可。
咱们来看看前两种菜单的结构,简单的结构以下所示
<li class="nav-item start" id="1"> <a href="/Home/index?tid=1" class="nav-link nav-toggle"> <i class="icon-home"></i> <span class="title">首页</span> <span class="selected"></span> <span class="arrow open"></span> </a> </li>
若是有子菜单的,那么两级菜单的结构以下所示。
<li class="nav-item " id="3"> <a href="javascript:;" class="nav-link nav-toggle"> <i class="icon-rocket"></i> <span class="title">客户管理</span> <span class="arrow"></span> </a> <ul class="sub-menu"> <li class="nav-item " id="31"> <a href="second?tid=3&sid=31"> <i class="glyphicon glyphicon-th-list"></i> <span class="title">客户管理</span> </a> </li> <li class="nav-item " id="32"> <a href="second?tid=3&sid=32"> <i class="icon-basket"></i> <span class="badge badge-roundless badge-danger">new</span> <span class="title">客户联系人</span> </a> </li> </ul> </li>
若是是三级菜单的结构,以下所示:
<li class="nav-item active open" id="2"> <a href="javascript:;" class="nav-link nav-toggle"> <i class="icon-basket"></i> <span class="title">行业动态</span> <span class="selected"></span> <span class="arrow open"></span> </a> <ul class="sub-menu"> <li class="nav-item active open" id="21"> <a href="javascript:;" class="nav-link nav-toggle"> <i class="icon-home"></i> <span class="title">行业动态</span> <span class="arrow"></span> <span class="selected"></span> </a> <ul class="sub-menu"> <li class="nav-item active open" id="211"> <a href="second?tid=2&sid=21&ssid=211"> <i class="icon-home"></i> <span class="badge badge-danger">4</span> <span class="title">政策法规</span> </a> </li> <li class="nav-item " id="212"> <a href="second?tid=2&sid=21&ssid=212"> <i class="icon-basket"></i> <span class="badge badge-warning">4</span> <span class="title">通知公告</span> </a> </li> </ul> </li> </ul> </li>
根据这些内容,咱们在后台动态输出菜单结构便可。
例如咱们在基类控制器里面,经过判断视图的处理,实现菜单内容的输出。
/// <summary> /// 重载视图展现界面,方便放置一些常规的ViewBag变量。 /// 若是放在OnActionExecuting,则会致使任何请求都会执行一次,从而致使屡次执行,下降响应效率 /// </summary> protected override ViewResult View(string viewName, string masterName, object model) { //登陆信息统一设置 if (CurrentUser != null) { ViewBag.FullName = CurrentUser.FullName; ViewBag.Name = CurrentUser.Name; //ViewBag.MenuString = GetMenuString(); ViewBag.MenuString = GetMenuStringCache(); //使用缓存,隔一段时间更新 } return base.View(viewName, masterName, model); }
为了提升菜单的响应处理,避免屡次递归耗时,咱们能够把生成好的菜单内容,放到缓存里面,经过键值实现处理。
/// <summary> /// 使用分布式缓存实现菜单数据的缓存处理 /// </summary> /// <returns></returns> public string GetMenuStringCache() { string itemValue = MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache_" + CurrentUser.ID , delegate() { return GetMenuString(); }, null, DateTime.Now.AddMinutes(5) //5分钟之后过时,从新获取 ); return itemValue; }
而对于水平方向的菜单处理,和前面二者有所不一样。
如二级菜单数据展现以下所示。
<li class="menu-dropdown classic-menu-dropdown "> <a href="index.html" class="nav-link "> <i class="icon-bar-chart"></i> Default <span class="arrow"></span> </a> </li> <li class="menu-dropdown classic-menu-dropdown active"> <a href="javascript:;" class="nav-link nav-toggle "> <i class="icon-basket"></i> Dashboard <span class="arrow"></span> </a> <ul class="dropdown-menu pull-left"> <li class=" active"> <a href="index.html" class="nav-link active"> <i class="icon-bar-chart"></i>Dashboard <span class="arrow"></span> </a> </li> </ul> </li>
三级菜单展现的数据以下所示。
<li class="menu-dropdown classic-menu-dropdown "> <a href="javascript:;" class="nav-link nav-toggle "> <i class="icon-briefcase"></i> Pages <span class="arrow"></span> </a> <ul class="dropdown-menu pull-left"> <li class="dropdown-submenu "> <a href="javascript:;" class="nav-link nav-toggle "> <i class="icon-basket"></i> eCommerce <span class="arrow"></span> </a> <ul class="dropdown-menu"> <li class=" "> <a href="ecommerce_index.html" class="nav-link "> <i class="icon-home"></i> Dashboard </a> </li> <li class=" "> <a href="ecommerce_orders.html" class="nav-link "> <i class="icon-basket"></i> Orders </a> </li> </ul> </li> <li class="dropdown-submenu"> <a href="javascript:;" class="nav-link nav-toggle"> <i class="icon-notebook"></i> Login <span class="arrow"></span> </a> <ul class="dropdown-menu pull-left"> <li class=""> <a href="page_user_login_1.html" class="nav-link " target="_blank"> Login Page 1 </a> </li> <li class=""> <a href="page_user_login_2.html" class="nav-link " target="_blank"> Login Page 2 </a> </li> </ul> </li> </ul> </li>
咱们所须要作的就是把咱们数据库里面的菜单数据,动态构建这种递进式的数据结构便可。
若是感兴趣Bootstrap开发框架系列,能够参考学习下面的文章,感谢您的阅读。