技术文章
当前位置:首页 > jQuery技术文章 > jquery实现最简单的滑动菜单效果代码

jquery实现最简单的滑动菜单效果代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:103

这篇文章主要知识点是关于jquery、滑动菜单、jQuery实现带滑动条的菜单效果代码 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript和jQuery实战手册
  • 类型:JavaScript大小:103 MB格式:PDF出版:机械工业出版社作者:大卫·索耶·麦克法兰德
立即下载

更多jQuery相关的学习资源可以参阅 jQuery电子书程序设计电子书 等栏目。

jquery实现最简单的滑动菜单效果代码

本文实例讲述了jquery实现最简单的滑动菜单效果代码。分享给大家供大家参考。具体如下:

这是一款最简单的jQuery下拉滑出菜单,jQuery代码实现,这里没有过多的去修饰菜单,仅是一些基本的实现,特别是对学习jQuery是个不错的参考实例,这里使用了一个jquery封装库文件jquery.tools.min.js,从外部引入,测试时候可能会因载入不成功而看不到效果,刷新一下网页即可解决此问题。

运行效果截图如下:

jquery实现最简单的滑动菜单效果代码

在线演示地址如下:

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

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>下拉滑出的菜单</title>
<script src="jquery.tools.min.js"></script>
<script type="text/javascript">
$(function() {
 $("#list li").hover(function() {
 $(this).children("ul").slideDown();
 }, function() {
 $(this).children("ul").slideUp();
 });
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
ul{list-style:none outside none}
#list{font-size:14px;width:500px;margin:55px auto}
#list ul{font-size:12px;display:none}
#list .li{float:left;width:100px;margin-right:1px;background:orange}
</style>
</head>
<body>
<ul id="list">
 <li class="li">
  <a href="#">游戏</a>
  <ul>
   <li><a href="#">单机游戏</a></li>
   <li><a href="#">网络游戏</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">音乐</a>
  <ul>
   <li><a href="#">流行歌曲</a></li>
   <li><a href="#">摇滚</a></li>
  </ul>
 </li>
 <li class="li">
  <a href="#">编程语言</a>
  <ul>
   <li><a href="#">Javascript</a></li>
   <li><a href="#">PHP</a></li>
  </ul>
 </li>
</ul>
</body>
</html>

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

jQuery实现带滑动条的菜单效果代码

本文实例讲述了jQuery实现带滑动条的菜单效果代码。分享给大家供大家参考。具体如下:

这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,动画效果是基于jquery的animate(),对此有兴趣学习的正好可参考下代码。

运行效果截图如下:

jQuery实现带滑动条的菜单效果代码

在线演示地址如下:

http://demo.jb51.net/js/2015/jquery-move-buttom-line-style-codes/

具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>带滑动条的jQuery滑动菜单</title>
<style>
body{ font:12px/1.5 Arial,\5b8b\4f53,sans-serif;background:#fff; color:#333; position:relative}
.header { width:990px; min-width:990px; margin:0 auto; height:68px; position:relative; z-index:200; overflow:hidden}
.headerTab { height:44px; padding:24px 0 0 0; position:relative; width:990px; min-width:990px; margin:0 auto; }
.headerTab a { padding:0 5px; float:left; font-size:14px; color:#333; height:42px; overflow:hidden; line-height:44px;font-family:\5FAE\8F6F\96C5\9ED1,\5B8B\4F53; margin-left:10px; display:inline}
.headerTab a:hover { text-decoration:none; color:#333}
.headerTab .tabLine { position:absolute; top:66px; height:2px; background:#35b0f2; left:0; width:100%; overflow:hidden; font-size:0; line-height:0;}
</style>
</head>
<body>
<div class="headerTab" id="headerTab"><a href="#" title="">码农之家</a><a href="#" title="">下载中心</a><a href="#" title="">最新更新</a><a href="#" title="">广告中心</a><a href="#" target="_blank" title="">Delphi源码</a><a href="#" target="_blank" title="">VC++源码</a><a href="#" title="">更新日志</a><i class="tabLine"></i></div>
</body>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script>
var headerTabArray = $("#headerTab a"),headTabLine = $("#headerTab .tabLine"),tabIndex,headerTabArrayLength = headerTabArray.length,headerTabWidthArray = [],headerTabPositonArray = [],defaultNum = 0;
for(var i=0;i<headerTabArrayLength;i++){
  headerTabWidthArray[i] = headerTabArray.eq(i).width() + 10;
  headerTabPositonArray[i] = headerTabArray.eq(i).position().left + 10;  
}
headerTabArray.mouseover(function(){
  $("#headerTab i:animated").stop();
  tabIndex = $(this).index();
  headTabLine.animate({width:headerTabWidthArray[tabIndex],left:headerTabPositonArray[tabIndex]},300);
})
headerTabArray.mouseout(function(){
  $("#headerTab i:animated").stop();
  tabIndex = $(this).index();
  headTabLine.animate({width:headerTabWidthArray[defaultNum],left:headerTabPositonArray[defaultNum]},300);
})
defaultNum = 0;
headTabLine.animate({width:headerTabWidthArray[defaultNum],left:headerTabPositonArray[defaultNum]},300);
</script>
</html>

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

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到jQuery构造函数init参数知识、 jQuery实现鼠标经过图片变、 Jquery节点遍历next与nextAl、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jQuery中Find选择器的用法和实例

下一篇:jQuery表格元素动态创建功能的实现方法

展开 +

收起 -

jquery滑动菜单 相关电子书
学习笔记
网友NO.162722

jQuery实现可用于博客的动态滑动菜单完整实例

本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码。分享给大家供大家参考。具体如下: 这是一款基于jQuery1.3.2的动态滑动菜单特效代码,常用于博客,鼠标滑过菜单,菜单会不断伸出,貌似很漂亮,我比较喜欢,发上来供大家使用或学习参考。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blog-move-style-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" lang="en" xml:lang="en"headtitlejQuery滑动菜单插件/titlescript type="text/javascript" src="jquery1.3.2.js"/scriptscript type="text/javascript" (function($){ $.fn.extend({ tagdrop: function(options) { var defaults = { tagPaddingTop: '90px', tagDefaultPaddingTop: '30px', bgColor: '#B1CCED', bgMoverColor: '#7FB0F0', textColor: '#e0e0e0', textDefaultColor: '#f……

网友NO.916464

jQuery实现菜单感应鼠标滑动动画效果的方法

本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法。分享给大家供大家参考。具体分析如下: 此代码测试环境为IE9 以及GG、FF浏览器,IE8及以下浏览器可能不支持,希望理解。 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上stop方法就可实现鼠标移出后,不再执行滑动效果。 复制代码 代码如下: !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=utf-8" / title非常不错的jQuery鼠标滑动效果/title script src="js/jquery.min.js" type="text/javascript"/script style body{font-size:12px;font-family:Tahoma,Arial,Verdana;color:#fff; background:#000; width:100%; height:100%;} body,div,dl,dt,dd,ul,ol,li,h1,h2,……

网友NO.698012

jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)

功能很实用,代码非常的简单 效果1. 效果2. 样式代码如下: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0 } span{ color:#FF2B13 } a{ text-decoration:none; color:#515050 } a:hover{ text-decoration:underline; color:red } .box_all{ overflow:hidden; width:350px; font-family:"微软雅黑"; font-size:14px; border:1px solid #EEEEEE; border-top:2px solid #F57A04; padding:0 0 10px 0; margin:0 auto } .box{ padding-left:45px; padding-top:5px } .box li{ line-height:20px; margin-right:30px; width:120px; text-align:left; float:left; list-style-type:none } .boxdown{ cursor:pointer; border:1px solid #EEEEEE; width:60px; height:14px; background:#FFFFFF url(../images/down.png) no-repeat 20px; margin-left:150px; margin-top:-2px; border-top:none; margin:0 auto } .up{ cursor:pointer; border:1px solid #EEEEEE; width:60px; height:14px; background:#FFFFFF url(../images/up.png) no-repeat 20px; margin-left:150px; mar……

网友NO.310021

jquery实现左右滑动菜单效果代码

本文实例讲述了jquery实现左右滑动菜单效果代码。分享给大家供大家参考。具体如下: 这里演示了三种背景颜色左右滑动jquery菜单导航效果,IE下有问题,本菜单使用了CSS3的部分属性,因此建议使用火狐或Chrome等浏览器获取最佳效果。当把鼠标移到菜单上的时候,对应菜单项的背景会变化,而且本菜单具有圆角的效果。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-right-move-style-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"headmeta http-equiv="Content-Type" content="text/html; charset=utf-8" /title三种背景颜色左右滑动菜单导航/titlestyle.webwidget_menu_glide{ padding: 5px; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 1……

网友NO.878168

jQuery实现背景滑动菜单

话不多说,直接附上源码,仅供大家参考 div class="menu" ul id="menu" lia href="#"JavaScript/a/li li value="1"a href="#"Graphic Design/a/li lia href="#"HTML/a/li lia href="#"User Interface/a/li lia href="#"CSS/a/li /ul div id="slide"/div/div * {margin:0; padding:0}body {font:14px Helvetica, sans-serif; font-weight:bold; background:#FFF}.menu {position:relative; background:url(images/bg.gif) no-repeat; height:35px; width:459px}.menu ul {list-style:none; z-index:10; position:absolute; z-index:100; padding:9px 5px}.menu li {float:left}.menu a, .menu a:active, .menu a:visited, .menu a:hover {text-decoration:none; color:#FFF; padding:10px}#slide {position:absolute; top:6px; height:24px; background:#89957a; z-index:10;} (function($){ $.fn.extend({ bgslide:function(value){ //可选参数 value=$.extend({ "fw":12, "sw":2, "ftime":100, "stime":300 },value); //初始化背景的位置 var liw = $("ul li:eq(0)",value.menu).width();//获取第一个li的宽 var $slide = $(this).chil……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

版权投诉 / 书籍推广 / 赞助:520161757@qq.com

上传资源(网友、会员均可提供)

查看最新会员资料及资源信息