jQuery实现类似标签风格的导航菜单效果代码


Posted in Javascript onAugust 25, 2015

本文实例讲述了jQuery实现类似标签风格的导航菜单效果代码。分享给大家供大家参考。具体如下:

这是一款基于jquery实现的类似TAB标签样式的网站导航菜单,引入了jquery,若运行代码后左上角提示错误,刷新页面即可正常。你可点击菜单查看到整体的效果。点击后对应菜单项下移,可扩展成二级菜单,也可以改成TAB标签布局,感兴趣的朋友自己研究吧。

运行效果截图如下:

jQuery实现类似标签风格的导航菜单效果代码

在线演示地址如下:

具体代码如下:

<!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-Type" content="text/html; charset=gb2312" />
<title>jquery标签式导航菜单</title>
 <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $(".menubt").click(function(){
  $(this).blur();
  if($(this).siblings("div").css("display") == "none") {
   $(".menucount:visible").slideUp(200,function(){ $(this).parent().css("zIndex","100");});
   $(this).siblings("div").slideDown(200,function(){ $(this).parent().css("zIndex","10");});
   $(this).siblings("div").attr("id","#boxOpen");
  } else {
   $(this).siblings("div").slideUp(200,function(){ $(this).parent().css("zIndex","100");});
  }
 })
})
</script>
<style type="text/css">
body{margin:0;padding:0;}
.menubox{position:absolute;width:100%;z-index:100;}
.menucount{display:none;height:80px;overflow:hidden;background:#999999;}
#boxOpen{height:80px;display:block;}
.menubt{display:block;float:right;position:absolute;display:block;background:url(images/menubg23.gif);color:#FFFFFF;text-decoration:none;width:78px;height:21px;text-align:center;font-size:12px;}
.menubtOpen{display:block;float:right;position:absolute;display:block;background:#0066FF;color:#FFFFFF;text-decoration:none;width:50px;}
</style>
</head>
<body>
<div class="menubox">
<div class="menucount"></div>
<a class="menubt" style="right:240px;" href="#">菜单一</a>
</div>
<div class="menubox">
<div class="menucount"></div>
<a class="menubt" style="right:160px;" href="#">菜单二</a>
</div>
<div class="menubox">
<div class="menucount"></div>
<a class="menubt" style="right:80px;" href="#">菜单三</a>
</div>
<div class="menubox">
<div class="menucount"></div>
<a class="menubt" style="right:0;" href="#">菜单四</a>
</div>
<p>若左下角有错误,请刷新本页面,点击菜单可查看效果。</p>
<p> </p>
<p> </p>
<table width="728" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td>
 <p align="center"></p>
 <p align="center"></p></td>
 </tr>
</table>
<p> </p>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
Jul 05 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 Javascript
vue实现留言板todolist功能
Aug 16 Javascript
vue.js中created方法作用
Mar 30 Javascript
vue router动态路由设置参数可选问题
Aug 21 Javascript
原生js实现俄罗斯方块
Oct 20 Javascript
jQuery下拉美化搜索表单效果代码分享
Aug 25 #Javascript
jQuery实现下滑菜单导航效果代码
Aug 25 #Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 #Javascript
js实现的tab标签切换效果代码分享
Aug 25 #Javascript
JavaScript实现向右伸出的多级网页菜单效果
Aug 25 #Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 #Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 #Javascript
You might like
php类
2006/11/27 PHP
php 如何获取数组第一个值
2013/08/06 PHP
php文件缓存方法总结
2016/03/16 PHP
PHP简单实现合并2个数字键数组值的方法
2017/05/30 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
详解python中的 is 操作符
2017/12/26 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
Python文本处理简单易懂方法解析
2019/12/19 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
高中政治教学反思
2014/01/18 职场文书
护理助产毕业生的求职信
2014/03/02 职场文书
社区交通安全实施方案
2014/03/22 职场文书
法制教育演讲稿
2014/09/10 职场文书
初中学习计划书范文
2014/09/15 职场文书
代理人委托书
2014/09/16 职场文书
工作检讨书怎么写
2015/01/23 职场文书
暂停营业通知
2015/04/25 职场文书
联村联户简报
2015/07/21 职场文书
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js
js判断两个数组相等的5种方法
2022/05/06 Javascript