js实现当前导航菜单高亮显示

为了增加用户体验度,增加网页的易用性和美观度,往往需要把当前导航菜单以特殊方式显示,通常是高亮显示或有不同于其它菜单的背景,有两种方法可以实现,第一种是用纯css来实现,二是用js辅助css来实现,两个种方法都比较简单,相对而言js更简单些,下面介绍用js来实现的方法: 首页假设我们的导航代码是这样写的: <div id="navi"><ul><li><a href="1.html">主页</a></…

CSS+JS相应式导航菜单

响应式导航菜单响应式导航菜单就是当网页在其他不同视口的样式,不同的设备需要不同的样式需要掌握的知识 - 掌握媒体查询,如果你不是很懂那就看我写的CSS响应式布局掌握CSS重的display:none; 简单的JS方法下面是HTML代码 <!doctype html> <html> <head> <meta charset="utf-8"/> <title>响应式菜单</title> <link rel…

MVC导航菜单高亮显示实现思路

///代码不是我写的,但是已经亲自测试过了,按照我的理解写的注释,不对的地方大家评论指出 @{ @*这个是把当前的路由值格式化并保存到currentController这个变量中,这里是格式化为Controller->Action这种格式的,如果你的导航菜单所指向的路径都是在一个Controller下面,那就完全可以省掉Controller *@ var currentController = string.Format("[{0}->{1}]", ViewContext.…

用js实现超链接导航菜单点击切换选中时的状态

项目中使用到点解导航切换不同的颜色,如果只是li选项卡还好办,这次用到的超链接选项卡,因为a链接每次点击都会刷新,所以浏览器记不住点击的状态,也没法切换点击状态,因为项目中有好多地方要用到,在网上找了好多,总结一下. 效果 html代码 <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" id="nav" > <ul class="la…

Slideout.js – 触摸滑出式 Web App 导航菜单

Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是4KB . 在线演示源码下载您可能感兴趣的相关文章网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuer…

实用js+css多级树形展开效果导航菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ…

两种简单实现菜单高亮显示的JS类(转载)

两种简单实现菜单高亮显示的JS类近期在写一个博客管理后台的前端,涉及在同一页面两种高亮显示当前菜单的需求.记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类. 其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现…

JQuery 实现导航菜单的高亮显示

需求是这样的点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 网上说的思路是这样的: 在菜单层的链接加上一个rel属性,保存href属性即: <div id="menu" class="main-nav"> <dl> <dt><a href="/C000001916" class="curre…

左侧多级菜单,高亮显示js

左侧多级菜单,如果本页面是当前栏目,则左侧菜单高亮显示 <ul class="nav navbar-stacked" id="navs"> {dede:channelartlist typeid='46,46'} <li _id="#couse_1" class=""><a id="bb33" href="[field:typelink/]">[fie…

JS滑动下划线导航菜单实现原理

效果如下:http://campus.51job.com/test/zengxl/js html: <div class="mainnav"> <div class="navwrap"> <ul class="navul"> <li class="navlist"><a class="nav_a" href="index.html"&…

响应式导航菜单（css+js）

1.响应式导航菜单先来看下效果图把: 当视口大于640px的时候,导航条会显示在外,当视口小于768px的时候,导航菜单需要隐藏起来!代码如下: <!doctype html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width"> <title>响应…

HTML+CSS代码橙色导航菜单

效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>超漂亮的HTML导航菜单CSS代码 - 何问起</title> <style> #top { display: block; text-align: left; hei…

jq倾斜的动画导航菜单

效果预览网址: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…

jquery和css3实现滑动导航菜单

效果预览: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…

仿腾讯QQ竖直滑动导航菜单

菜单就像qq软件的分组,鼠标经过自动显示相应组的内容. 效果体验网址:http://keleyi.com/a/bjad/nf86w2dv.htm 以下是源代码: <html> <head> <title>仿腾讯QQ竖直滑动导航菜单-柯乐义</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <style…

前端框架bootstrap 表单和导航菜单的 Demo（第二篇）

表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript" src="…

jQuery漂亮图标的垂直导航菜单

效果展示 http://hovertree.com/texiao/nav/3/ jQuery漂亮图标的垂直导航菜单是一款当鼠标滑过菜单项时,会有一个背景遮罩层跟着鼠标移动,效果非常炫酷,图标还是矢量图. 源码下载效果图如下: HTML文件代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv=&…

Smint – 用于单页网站制作的 jQuery 导航菜单插件

Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置页面滚动的速度,默认是 500 毫秒,你可以设置为需要的任何值. 您可能感兴趣的相关文章 Manifesto – HTML5 离线应用程序缓存校验工具 Codrops 教程:基于 CSS3 的全屏网页过渡特效 Zoom.js:一款效果非常独特的页面内容缩放插件 Codrops 教程:基于 CSS3…

JavaScript实战（带收放动画效果的导航菜单）

虽然有很多插件可用,但为了共同提高,我做了一系列JavaScript实战系列的实例,分享给大家,前辈们若有好的建议,请务必指出,免得误人子弟啊! ( 原创文章,转摘请注明:苏福:http://www.cnblogs.com/susufufu/p/5768402.html ) 今天是第一战:带收放动画效果的菜单,效果如下图:(样式有点丑(-^-)) ( 由于在写本文时,用的编辑器不同,暂时添加不了演示效果,这里有:最终完整代码和演示 ) 动画效果:鼠标hover改变所有目标的背景和字体颜色,鼠标移…

导航菜单：jQuery粘性滚动导航栏效果

粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单会固定在顶部:当点击菜单时,页面会平滑的滚动到对应的区域. 兼容性由于 smint 使用了 position: fixed,所以它不兼容 IE6.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 引入文件 <link href="cs…

使用jQuery开发iOS风格的页面导航菜单

在线演示1 本地下载申请达人,去除赞助商链接 iOS风格的操作系统和导航方式现在越来越流行,在今天的jQuery教程中,我们将介绍如何生成一个iphone风格的菜单导航. HTML代码我们使用镶嵌的<li>来生成菜单内容,并且包含在<nav>标签中,如下: <nav> <h1>导航菜单</h1> <ul> <li> <h2>专题教程</h2> <ul> <li>…

homepage左边的导航菜单怎么做的？

homepage左边的导航菜单怎么做的? 为啥只在homepage页面写了一个div 然后用一个homepage.js来填充这个div 然后用一个外部容器ID作为homepage.js的参数…

jquery仿天猫商城左侧导航菜单

之前看到有博友写了一个仿天猫商城左侧导航菜单,可惜不提供免费下载,也没有代码.以前自己也写过类似的效果,只是都是一小块一小块的,现在重新拼凑.我将一步一步的实现拼凑过程,希望对你有所帮助. Demo在ie8 . 谷歌. 火狐.遨游.ie6 浏览器下运行,效果良好!但在ie6下有个bug,就是滚动条可以无限滚动,没有找到好的解决方案,哪位朋友知道怎么改告诉我一下,谢谢!如果没有更好的方法我就打算用js来解决! 好了,可以先下载例子来看看(Demo). 看看效果图: 一.定位左侧整体菜单栏 .sli…

jquery火焰等效果导航菜单

jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=450 效果描述为:当鼠标经过某一导航选项的时候,后面的背景图片(上图“圣诞节”后圆角背景)会弹性缓动到该导航选项,如果没有发生单击动作,鼠标移开后,背景图又回到原来的位置. 您可以狠狠地点击这里:demo效果页面使用说明: 1.需要链接的文件需要调用的文件有:jQuery库(1.2…

jQuery 简单漂亮的 Nav 导航菜单

自己写的一个简单的导航菜单,先看效果: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等,另一个 div 则是底部的蓝条,需要给第一项和最后一项设置不同的 class ,样式需要用到: <div id="nav"> <div class="navItem indexNavItem"> <ul class="navUl&qu…

纯CSS3带动画效果导航菜单

随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3.网页能表达的东西越来越多,css3兴起已经很多年了,不多由于国内网站要求对IE的兼容,html5+css3的发展很缓慢. html5+css3的出现给前端开发者提供了更多的可能性,以前很多只能通过JS实现的效果用纯粹的css3就能实现了. 下面介绍一个博主在css3学习过程中写的一个纯css3实现的带动画效果的导航菜单. 下面是效果图: 查看示…