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 事件流和事件绑定
Jul 16 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
原生JS实现垂直手风琴效果
Feb 19 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
JS定义函数的几种常用方法小结
May 23 Javascript
js实现转动骰子模型
Oct 24 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 JSON 数据解析代码
2010/05/26 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
vue 防止页面加载时看到花括号的解决操作
2020/11/09 Javascript
[15:35]教你分分钟做大人:天怒法师
2014/10/30 DOTA
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
Python3.6正式版新特性预览
2016/12/15 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择
2020/02/26 Python
Python同时处理多个异常的方法
2020/07/28 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
用python 绘制茎叶图和复合饼图
2021/02/26 Python
介绍CSS3使用技巧5个
2009/04/02 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
12岁生日感言
2014/01/21 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
小学语文国培感言
2014/03/04 职场文书
公司晚会主持词
2014/03/22 职场文书
拔河比赛口号
2014/06/10 职场文书
2014会计年终工作总结
2014/12/20 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
怒海潜将观后感
2015/06/11 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
Springboot配置suffix指定mvc视图的后缀方法
2021/07/03 Java/Android