jQuery左右侧栏导航菜单插件PageSlide，目前比较流行的导航菜单展现形式，特别是在手机端或者触屏页面，效果还是不错的，支持自定义展现的方向，菜单内容可自行定义，支持加载页面，或者模态的窗格中显示此页的隐藏的内容，推荐使用。 使用方法：1.加载插件和jQuery2.使用方式2.1 向右，滑动并从辅助页加载内容Link text $("a.first").pageslide(); 2.2 滑到左边，并在模态的窗格中显示此页的隐藏的内容Modal 2.3 函数打开代码如下...
本文实例讲述了JavaScript实现简单的二级导航菜单的方法。分享给大家供大家参考。具体如下：css菜单演示0 " ": "") + "sfhover";}sfEls[i].onMouseDown=function() {this.className+=(this.className.length>0 " ": "") + "sfhover";}sfEls[i].onMouseUp=function() {this.className+=(this.className.length>0 " ": "") + "sfhover";}sfEls[i].onmouseout=function() {this.className=this.className.replace(new RegExp("( |^)sf...
本文实例讲述了jQuery实现的动态伸缩导航菜单。分享给大家供大家参考。具体实现方法如下：jquery selectbody {padding:10px; font-family:"宋体"} * {margin:0; padding:0; font-size:12px;} a{ color: #333;} ul,li { list-style-type:none; } .menu_list li a { display:block; line-height:30px; text-align:center; height:30px; background:#e8e8e8; border-bottom:1px solid #ccc; } .hover { background:#e8e8e8; } .div1{ ...
本文实例讲述了javascript实现带下拉子菜单的导航菜单效果。分享给大家供大家参考。具体实现方法如下：带下拉子菜单的导航菜单body { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; } a:hover { color: #F00; } #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;} #menu ul { list-style: none; margin: 0px; padding: 0px; } #menu ul...
效果图：目前市场上越来越流行IOS风格的操作系统和导航方式，在今天的jQuery教程中，我们介绍如何生成一个iphone风格的菜单导航。 HTML代码 我们使用镶嵌的来生成菜单内容，并且包含在标签中，如下：导航菜单专题教程HTML专题教程GBin1专题之HTML5教程 - 第一篇：HTML5介绍 GBin1专题之HTML5教程 - 第二篇：HTML5元素 GBin1专题之HTML5教程 - 第三篇：HTML5 Video元素 GBin1专题之HTML5教程 - 第四篇：HTML5 Video Doc GBin1专题之...
这是一款基于jquery实现动感漂浮导航菜单的特效代码，菜单可以上下浮动，动感十足，为自己的网站增加了活力，是一款非常实用的导航菜单特效源码。运行效果图：点击下载源码 为大家分享的jquery动感漂浮导航菜单代码如下jQuery Floating Menu$(document).ready(function () {//get the default top valuevar top_val = $('#menu li a').css('top');//animate the selected menu item$('#menu li.selected').children('a').stop().an...
这是一款基于jquery实现的垂直导航菜单特效代码，总共有三级，实现效果简单大方，最后一级还可以进行图片展示说明，是一款非常实用的导航菜单特效源码。 效果演示 源码下载 为大家分享的jQuery垂直多级导航菜单代码如下jQuery垂直多级导航菜单代码脚本之家 目录B 二级目录A 二级目录B 三级目录A 三级目录B 三级目录B主要内容 三级目录C 三级目录D 三级目录D主要内容 二级目录C 二级目录D 三级目录A 三级目录B 三级...
项目需求： 实现原理：当选中当前元素时，给当前元素添加样式，同级元素移除样式。 点击不同的导航菜单实现当前点击的菜单是高亮的,点击导航下面的某个分类,分类所属的导航也必须是高亮的,点击某一篇文章,文章所属的导航菜单也必须是高亮的. 效果图如下：示例代码一： 具体示例代码如下：我爱学习body,ul,ol,li,div,p{margin:0px;padding:0px;} ul{list-style-type:none;border:1px solid blue;background:#4f5b93;height:45px;} u...
本文实例讲述了js实现带圆角的两级导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款使用JS做的圆角菜单，支持两级菜单显示，本人比较喜欢的风格，修改使用方便，新手也能上手快。使用有几张圆角图片来修饰了菜单，喜欢的朋友可以下载代码留作收藏使用。真心不错的蓝色导航条代码。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-cicle-nav-menu-style-codes/ 具体代码如下：圆角蓝色横向二级...
本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款js实现的黑背景灰色二级导航菜单，兼容IE6、firefox的js+css横向二极导航菜单。挺简洁，不过很清新，二级菜单是水平显示在主菜单的下方，采用流行的微软雅黑字体，若不想用这种字体，可换成默认的宋体即可。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/ 具体代...
本文实例讲述了jQuery实现的背景动态变化导航菜单效果。分享给大家供大家参考。具体如下： 这里介绍一款使用jQuery插件制作完成的导航菜单，一大特点是，菜单的背景有动态效果，与使用的背景图片完全变换，动态效果是在鼠标悬停时出现，也就是把鼠标放在菜单上的时候，背景即开始滚动起来，看上去漂亮极了，而且兼容性也是相当不错的，推荐给网页设计者使用。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/...
本文实例讲述了jQuery三级下拉列表导航菜单。分享给大家供大家参考。具体如下： jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js，可无限极分类，可智能判断是否有下级菜单，鼠标经过上次菜单显示下级菜单。 运行效果图： -------------------查看效果-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jQuery三级下拉列表导航菜单代码如下jQuery三级下拉列表导航菜单 *...
本文实例讲述了jQuery实现类似标签风格的导航菜单效果代码。分享给大家供大家参考。具体如下： 这是一款基于jquery实现的类似TAB标签样式的网站导航菜单，引入了jquery，若运行代码后左上角提示错误，刷新页面即可正常。你可点击菜单查看到整体的效果。点击后对应菜单项下移，可扩展成二级菜单，也可以改成TAB标签布局，感兴趣的朋友自己研究吧。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-bq-st...
本文实例讲述了jQuery ui实现动感的圆角渐变网站导航菜单效果代码。分享给大家供大家参考。具体如下： 今天给大家分享一款基于jQuery UI的网站渐变导航菜单，可作为主导航，带渐入渐出效果，鼠标移过菜单后，菜单项上显示圆角背景，本地测试时，请注意引入的几个JS脚本文件，最好是保存到你本地，菜单兼容性也不错。 先来看运行效果截图：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-ui-cicle-button-style-web-nav-c...
本文实例讲述了js实现横向伸展开的二级导航菜单代码。分享给大家供大家参考。具体如下： 这是一款js实现的横向伸展开二级导航菜单，鼠标放在一级菜单的第四个菜单项上，就能展开二级的菜单，菜单没有过多美化，只是一般的修饰，使用的朋友可根据您自己的网站风格重新美化菜单风格。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/js-r-show-menu-style-codes/ 具体代码如下：横向伸展开来的二级导航菜单.suc...