html左侧分级导航,jquery实现无限分级横向导航菜单的方法
本文实例讲述了jquery实现无限分级横向导航菜单的方法。分享给大家供大家参考。具体实现方法如下:
1. jquery插件版本代码如下:
(function($){
$.fn.extend({
droplinemenu: function(configs) {
var configs = $.extend({
over: 200,
out: 100,
rightdown:'css/down.gif'
},configs||{});
this.find(">ul").addClass("dropmenu");
this.find("ul li:has(ul)").addClass('hasmenu').find(">a").append("");
var currentobj;
return $('li.hasmenu').hover(function(){
if ($.browser.msie) {//清除ie下生成的overflow:hidden
$(this).parent("ul").css({'overflow': 'visible'});
}
$(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs.over);
},function(){
$(this).find(">ul").stop(true, true).slideUp(configs.out);
});
}
});
})(jQuery);
2. 样式代码
* {margin:0;padding:0}
.droplinebar{
position: absolute;
z-index: 20;
width: 700px;
}
.droplinebar ul.dropmenu {
position: relative;
}
.droplinebar ul{
width: 100%;
float: left;
font: bold 13px Arial;
background: #242c54 url(bluedefault.gif) center center repeat-x; /*default background of menu bar*/
}
.droplinebar ul li{
float:left;
}
.droplinebar ul ul {
width: 700px;
display:none;
z-index: 100;
position:absolute;
left:0;
background: #303c76;
zoom: 1;
}
.droplinebar ul li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
display:block;
}
.droplinebar ul li.hasmenu a img {border:none;margin-left:5px;}
.droplinebar ul li a:hover, .droplinebar ul li .current{ /*background of main menu bar links onMouseover*/
color: white;
background: transparent url(blueactive.gif) center center repeat-x;
}
/* Sub level menu links style */
.droplinebar ul li ul li a{
font: normal 13px Verdana;
padding: 6px;
padding-right: 8px;
margin: 0;
border-bottom: 1px solid navy;
}
.droplinebar ul li ul li a:hover{ /*sub menu links' background color onMouseover */
background: #242c54;
}
3. HTML代码如下
$(document).ready(function(){
$("#mydroplinemenu").droplinemenu();
});
- Home
- CSS Examples
- Activities 1
- Activities 2
- Activities 3
- Water Sports 1
- Water Sports 1
- Water Sports 1
- Water Sports 1
- Activities 4
- Tools
- JavaScript
- Traveling 1
- Traveling 2
- Traveling 3
- Traveling 4
- Africa 1
- Africa 2
- Africa 3
- Africa 4
- Kenya 1
- Kenya 2
- Kenya 3
- Kenya 4
- Kenya 5
- Traveling 5
- Gallery
4. 无插件版本代码:
$(document).ready(function(){
var configs_over = 200,configs_out = 100;
$("#mydroplinemenu").find(">ul").addClass("dropmenu").find("li:has(ul)").addClass('hasmenu').find(">a").append("");
$('.dropmenu li.hasmenu').hover(function(){
if ($.browser.msie) {//清除ie下生成的overflow:hidden
$(this).parent("ul").css({'overflow': 'visible'});
}
$(this).find(">ul").stop(true, true).css('top',$(this).height()).slideDown(configs_over);
},function(){
$(this).find(">ul").stop(true, true).slideUp(configs_out);
});
});
希望本文所述对大家的jQuery程序设计有所帮助。
html左侧分级导航,jquery实现无限分级横向导航菜单的方法相关推荐
- 简单的无限分级类 category, menus, jquery tree view
1. 简单的无限分级类 category, menus <?phpmysql_connect("localhost","root","root& ...
- 使用jstree创建无限分级的树(ajax动态创建子节点)
首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 publi ...
- php简单网站源码包含数组_PHP无限分级阶梯递归数组排列 以及多层嵌套数组在网页中的解析源码...
数组递归 PHP无限分级 将数组递归转化成阶梯型数组 数组中包含数组 使用更方便 查看也很方便,网上找的都不是很好,自己写的才是王道 简单的递归 没有什么特别之处 只是自己写的容易理解一点而已! 代 ...
- 无限分级和tree结构数据增删改【提供Demo下载】
无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以 ...
- 一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
- JQuery图片无限循环滚动源码
平常项目中经常用到图片循环滚动,所以就写些必要的CSS定位,JS基本算法,最后就封装成JQuery图片无限循环滚动插件类,其实本质上是li块无限循环滚动,li块里面不管是图片还是其它内容,都OK的. ...
- 仿酒仙网的一款jQuery侧栏弹出导航栏特效
2019独角兽企业重金招聘Python工程师标准>>> 仿酒仙网的一款jQuery侧栏弹出导航栏特效 一款常用于商城左侧商品导航的jquery菜单导航特效. 非常不错的一款商品分类特 ...
- 楼梯式导航 html,jQuery仿京东商城楼梯式导航定位菜单|jquery网站楼层导航
jQuery京东浮动网站楼层导航代码是一款仿京东商城网页左侧浮动楼层导航特效代码.具有一定的参考价值,感兴趣的小伙伴们可以参考一下. CSS样式如下: *{ margin:0; padding:0; ...
- html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件
这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件.我们曾经在很多网站上都看到过这种顶部固定导航菜单特效.Disqus For Websites的导航菜单就是一个很好的例子. HTML结 ...
最新文章
- dns tunnel 使用 nishang 下载TXT里的cmd(TXT里)实现CC command+ ceye实现数据外发
- 修改Nginx与Apache配置参数解决http状态码:413上传文件大小限制问题
- Learning hard C#学习笔记 孤军深入
- kubernetes in action - Replication Controller
- 转译和编译_10个有趣又能编译为JavaScript的语言,你用过哪些?
- Visual Studio 2017新版发布,极大提高开发效率丨附下载 1
- 超时时间已到,但是尚未从池中获取连接。出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大[转]...
- JS报错:Uncaught(in promise)DOMException:play()
- apl脚本入门-控制语句
- 虚拟机的安装中遇到的问题(WIN10主机)
- 深度学习中的一些概率函数分布
- Xshell是做什么用的?Xshell使用教程分享
- 超好用的图床-生成图片在线链接
- Android Jetpack组件(九)DataStore
- java 事件冷却,基于“牛顿冷却定律”的机器学习算法
- php resque demo,php-resque 极简php消息队列
- 利用selenium库实现QQ空间点赞
- VAS价值存托公链体系创世录 第一章
- JMeter官方文档翻译----如何开始JMeter-1
- yanzhenjie:permission:1.0.5 使用
热门文章
- TalkingData:用好大数据,为企业转型赋能
- 如何安装透明窗口主题Emerald在Ubuntu 13.04/12.10/12.04中-PPA
- Eclipse上安装GIT插件EGit及使用
- 如何从eclipse迁移到idea
- CSP认证201609-2	火车购票[C++题解]:模拟、vector、排序
- python方向键映射_python交互界面无法使用方向键
- 计算机考研专业课资料,计算机考研专业课资料.doc
- 爬虫+数据分析,制作一个世界疫情人数增长动态柱状竞赛图
- 融云php sdk下载安装,LICENSE · 融云 RongCloud/server-sdk-php-composer - Gitee.com
- 为客户端加入输入线程