脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery类似标签风格的导航菜单效果

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

 更新时间：2015年08月25日 15:25:27   作者：企鹅  
这篇文章主要介绍了jQuery实现类似标签风格的导航菜单效果代码,涉及jquery鼠标事件操作页面元素的遍历与样式动态修改技巧,具有一定参考借鉴价值,需要的朋友可以参考下

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-bq-style-nav-menu-codes/

具体代码如下：

<!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>&nbsp;</p>
<p>&nbsp;</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>&nbsp;</p>
</body>
</html>

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

您可能感兴趣的文章:

相关文章

  • jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例

    jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例

    下面小编就为大家分享一篇jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • JQuery实现自定义滚动条的方法

    JQuery实现自定义滚动条的方法

    这篇文章主要给大家介绍了关于JQuery实现自定义滚动条的方法,通过本文的介绍你可以换掉千篇一律的默认滚动条,让你的网站或web项目更具特色,文章通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • jquery限制输入字数,并提示剩余字数实现代码

    jquery限制输入字数,并提示剩余字数实现代码

    jquery限制输入字数,并提示剩余字数,本文将介绍如何实现这个功能，需要了解的朋友可以参考下
    2012-12-12
  • jQuery 源码分析笔记(4) Ready函数

    jQuery 源码分析笔记(4) Ready函数

    接下来回到最开始的jQuery.extend函数（268行）中的ready(fn)的定义。这个函数用来处理DOM加载完成的事件。差不多是jQuery最常用的函数之一了。
    2011-06-06
  • 原生和jQuery的ajax用法详解

    原生和jQuery的ajax用法详解

    Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。这篇文章主要介绍了原生和jQuery的ajax用法，需要的朋友参考下吧
    2017-01-01
  • 利用jQuery实现滑动开关按钮效果（附demo源码下载）

    利用jQuery实现滑动开关按钮效果（附demo源码下载）

    这篇文章主要介绍了利用jQuery实现滑动开关按钮效果，文中给出了详细的介绍，并在文末给出了完整的demo源码下载，有需要的朋友可以参考简介，下面来一起看看吧。
    2017-02-02
  • jQuery中index()方法用法实例

    jQuery中index()方法用法实例

    这篇文章主要介绍了jQuery中index()方法用法,实例分析了index()方法返回索引值的几种常见使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • 多个$(document).ready()的执行顺序实例分析

    多个$(document).ready()的执行顺序实例分析

    这篇文章主要介绍了多个$(document).ready()的执行顺序实例分析,对于加深理解$(document).ready()的加载与执行顺序有很大帮助,需要的朋友可以参考下
    2014-07-07
  • jquery项目中如何防重复提交详解

    jquery项目中如何防重复提交详解

    客户端的抖动,快速操作,网络通信或者服务器响应慢,都容易造成服务器重复处理,这篇文章主要给大家介绍了关于jquery项目中如何防重复提交的相关资料,需要的朋友可以参考下
    2021-11-11
  • jQuery中的常用事件介绍

    jQuery中的常用事件介绍

    这篇文章介绍了jQuery中的事件，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-03-03

最新评论