MVC导航菜单高亮显示实现思路】的更多相关文章

///代码不是我写的,但是已经亲自测试过了,按照我的理解写的注释,不对的地方大家评论指出 @{ @*这个是把当前的路由值格式化并保存到currentController这个变量中,这里是格式化为Controller->Action这种格式的,如果你的导航菜单所指向的路径都是在一个Controller下面,那就完全可以省掉Controller *@ var currentController = string.Format("[{0}->{1}]", ViewContext.…
为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两个种方法都比较简单,相对而言js更简单些,下面介绍用js来实现的方法: 首页假设我们的导航代码是这样写的: <div id="navi"><ul><li><a href="1.html">主页</a></…
在需要处理很多分类以及导航的时候,树形导航菜单就比较适合.例如在汽车之家上: 页面主要分两部分,左边是导航菜单,右边显示对应的内容.现在,我们就在ASP.NET MVC 4 下临摹一个,如下: 实现的效果包括:1.点击导航菜单上的品牌,左侧显示该品牌下的所有车型.2.点击导航菜单上的车系,左侧显示该车系下的所有车型.3.点击左侧上方的字母导航,锚点跳到导航菜单的对应部分.4.页面加载完毕,显示所有品牌和车系,即树形导航完全展开.5.点击导航菜单上的品牌,收缩或展开对应的车系,收缩时,品牌前面图标…
需求是这样的 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 网上说的思路是这样的: 在菜单层的链接加上一个rel属性,保存href属性即: <div id="menu" class="main-nav"> <dl> <dt><a href="/C000001916" class="curre…
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta name="author" content="Nancle" /> <title>jQuery弹性滑动导航菜单</title> <style type="text/css"> body{ font-family:…
效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html…
效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&quo…
主要使用css的hover伪类来实现该功能. 主要思路:先搭出三级菜单的框架,然后使用css的:hover来实现! 对li添加类selected,对该类添加position:relative属性,然后对其二级三级菜单添加position:absolute属性,并设置其top:-1px(因为有1像素的边框)left:-999px:使其在也页面中向左偏移出窗口. 对li设置:hover伪类,当鼠标指针移动到li上时,改变二级三级菜单的left值,这样就可以实现一个简单的三级导航菜单! 代码如下: <…
每一个网站都会有导航菜单(通常不止一个),ASP.NET Boilerplate(后文简称ABP)提供了一种创建和使用菜单的通用架构,利用架构我们可以方便的创建菜单并显示给用户.本文主要说明菜单的创建,以及结合AngularJS上菜单的显示,如何从数据库动态取得菜单数据不再本文范围. 创建菜单 一个应用程序可能有多个不同的模块,每个模块有它对应的菜单项.为了定义这些菜单项,我们需要创建一个继承自 NavigationProvider 的子类.      假设我们有一个如下所示的主菜单: 工作台…
说到下拉导航菜单这个东西用得还真不少,细心算一下做开发以来这样的菜单已经写了第三次了,但基本都是不能复用.感觉特累人.不经意看到同事写一个类似的下拉菜单,但他引用了开源库仿大众菜单的库,大致看了一下,感觉挺不错的,复用性也比较好,但要 是换成别的样式就要去修改代码了,感觉这有点不方便也比较容易出错.于是参照他的大致思路写了一个仿下拉菜单. 具体的实现就不多说了,觉得有意思的话可以下来看看.下面说一下使用方法吧: 1.添加navbarview包下的代码与对应资源 2.布局文件中添加: <com.m…