基本上,是个网站就会有菜单导航,目前流行的菜单是不是这样样子的?

似乎是bootstrap引领的风格,我们就用EasyMvc实现吧,上代码:

  1. @{
  2. var data = new List<MenuItem>()
  3. {
  4. new MenuItem() {Id = "1", Text = "主页", Url = "http://zwc.cn"},
  5. new MenuItem() {Id = "2", Text = "文章管理"},
  6. new MenuItem() {Id = "3", ParentId = "2", Text = "文章删除"}
  7. };
  8. }
  9. <br><br><br>
  10. @Html.Q().Menu().SourceItems(data)

  怎么样,是不是还是一如既往的简单?准备数据,调用EasyMvc的Menu控件。。

不过,有点细节需要交代下:大家注意到Id和ParentId没:如果是一级菜单,ParentId是不需要赋值的;对于二级菜单,那么就需要将一级菜单的某个Id值赋给二级菜单的ParentId了,详见上面代码的ParentId赋值情况。

继续往下讲,我们可以给菜单加上图标,以提供些档次,上代码:

  1. @{
  2. var data = new List<MenuItem>()
  3. {
  4. new MenuItem() {Id = "1", Text = Html.Q().Ico().Type(EasyMvcHelper.IcoType.Home).ColorGray() + "主页", Url = "http://zwc.cn"},
  5. new MenuItem() {Id = "2", Text = Html.Q().Ico().Type(EasyMvcHelper.IcoType.Document).ColorGray() + "文章管理"},
  6. new MenuItem() {Id = "3", ParentId = "2", Text =Html.Q().Ico().Type(EasyMvcHelper.IcoType.Del1).ColorPrimary() + "文章删除"}
  7. };
  8. }
  9. <br><br><br>
  10. @Html.Q().Menu().SourceItems(data)

  效果截图如下:

大家看到没:菜单和按钮运用图标的方法是不是一样的?:)

考虑到很多时候存在竖直方向的菜单,EasyMvc也提供了如下风格的菜单,请查看:

  • 竖直菜单

效果图:

实现代码如下:

  1. @{
  2. var data = new List<MenuItem>()
  3. {
  4. new MenuItem() {Id = "1", Text = "主页", Url = "http://zwc.cn"},
  5. new MenuItem() {Id = "2", Text = "文章管理"},
  6. new MenuItem() {Id = "3", ParentId = "2", Text = "文章删除"}
  7. };
  8. }
  9. <br><br><br>
  10. @Html.Q().Menu().SourceItems(data).AsVerticalSide()

  

  • 左侧边菜单

效果图:

代码实现如下:

  1. @{
  2. var data = new List<MenuItem>()
  3. {
  4. new MenuItem() {Id = "1", Text = "主页", Url = "http://zwc.cn"},
  5. new MenuItem() {Id = "2", Text = "文章管理"},
  6. new MenuItem() {Id = "3", ParentId = "2", Text = "文章删除"}
  7. };
  8. }
  9. <br><br><br>
  10. @Html.Q().Menu().SourceItems(data).AsLeftSide()

  


总结:菜单导航和图片轮播导航基本是前端网站开发必备的,对了还有一个叫Banner的,基本这三个完成后,前端网页就搞定了一大半(不好意思,说的是中小型网站。。)希望后续这些都能帮到大家。

更多使用示例请浏览在线示例:http://core.zwc.cn

EasyMvc入门教程-基本控件说明(11)菜单导航的更多相关文章

  1. EasyMvc入门教程-基本控件说明(8)提醒导航

    提醒导航顾名思义就是提醒大家注意某些文字了..请看下面的例子: 实现代码如下: @Html.Q().BlockRemind().Text("我可以作为提醒使用") 有的同学会说:这 ...

  2. EasyMvc入门教程-基本控件说明(13)选项卡导航

    选项卡Tab导航主要用于企业页面显示不同子类或者子页面的信息内容. 先来一个基本的使用例子:代码如下: @{ var data = new List<TabItem>() { new Ta ...

  3. EasyMvc入门教程-图形控件说明(21)线形图+柱状图+饼形图

    本章将介绍一些基本但常用的图形:线型图,柱状图和饼形图. 以上三种图形对于的数据都是键值对数组,请参考第一个例子: @{ var data = new List<LineItem>(); ...

  4. EasyMvc入门教程-基本控件说明(1)按钮

    按钮是我们最常用的控件之一了,先看下我们提供的按钮风格: 不同颜色的: 实现代码: @Html.Q().Button().Text("Danger").ColorDanger() ...

  5. EasyMvc入门教程-基本控件说明(4)折叠面板

    折叠面板一般出现在管理后台,大家用的OutLook里就是用了折叠面板,样子大概是这样的: 把其中的内容替换成图标按钮,是不是就是我们常见的样子了?:)那么如何实现呢?请看例子: @{ var data ...

  6. EasyMvc入门教程-基本控件说明(6)进度条

    进度条的发明是很牛逼的,就如12306采用了队列解决了系统崩溃的问题一样..:) 进度条大家都见过,那么我们先来实现一个简单的进度条,请看例子: @Html.Q().Progress().Value( ...

  7. EasyMvc入门教程-基本控件说明(12)栏目导航

    栏目导航一般用来显示当前页面所在的模块层级位置关系,如下图所示: 当然也有前端网站作为小栏目导航,凡是没有绝对,只要不违和就好:),下面上代码: @{ var data = new List<N ...

  8. EasyMvc入门教程-基本控件说明(9)引言导航

    休息片刻后,继续开工... 这次我们继续学习引言导航,引言导航主要用于知识点的开始,起到知识点导航的作用.直接例子: 实现代码如下: @Html.Q().BlockRef().Title(" ...

  9. EasyMvc入门教程-基本控件说明(2)定时器

    我们有时候希望系统能自动刷新后台数据或者做某个动作,那么定时器的作用就体现出来了. EasyMvc默认提供的服务器可以定时调前端方法与定时调后端方法,先看例子: 定时调客户端事件 实现代码: @Htm ...

随机推荐

  1. adb命令模拟按键事件

    //这条命令相当于按了设备的Backkey键 adb shell input keyevent 4 //可以解锁屏幕 adb shell input keyevent  82 //在屏幕上做划屏操作, ...

  2. 项目实战:CRM客户关系管理系统开发

    21-CRM第一节内容概要 21.1 Stark组件介绍:实现基本的增删改查+自定义复杂操作: 21.2 单例模式:最简单的单例模式: 21.3 路由系统(分发): 21.4 制作启动文件-Djang ...

  3. WPF TextBlock 调整下划线与文字的距离

    <TextBlock Foreground="> <TextBlock.TextDecorations> <TextDecorationCollection&g ...

  4. HDU3977 Evil teacher 求fib数列模p的最小循环节

    In the math class, the evil teacher gave you one unprecedented problem! Here f(n) is the n-th fibona ...

  5. HDU3232 Crossing Rivers 数学期望问题

    Crossing Rivers                                                                                     ...

  6. 错误:支持“EFDbContext”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkId

    支持"EFDbContext"上下文的模型已在数据库创建后发生更改.请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/ ...

  7. 历史Linux镜像的问题修复方案

    历史Linux镜像创建的ECS云服务器,可能存在NTP没有配置,YUM没有配置,还可能存在最近暴漏较高的安全漏洞,请按照以下步骤进行修复,可以让您的云服务器更加安全,还可以使用阿里云提供的YUM服务进 ...

  8. 【bzoj3924】[Zjoi2015]幻想乡战略游戏 动态点分治

    题目描述 傲娇少女幽香正在玩一个非常有趣的战略类游戏,本来这个游戏的地图其实还不算太大,幽香还能管得过来,但是不知道为什么现在的网游厂商把游戏的地图越做越大,以至于幽香一眼根本看不过来,更别说和别人打 ...

  9. bzoj 2563 贪心 思想

    BZOJ2563阿狸和桃子的游戏   2563: 阿狸和桃子的游戏 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 952  Solved: 682[Su ...

  10. Ubuntu 查看默认软件安装位置

    tags: Linux 方法 1:在命令行输入:dpkg -L 软件包名: 方法 2:在/var/cache/apt/archives找的你安装程序的包,然后用gdebi-gtk+软件包名可以查看具体 ...