首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 27, 2015

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

这里演示了三种背景颜色左右滑动jquery菜单导航效果，IE下有问题，本菜单使用了CSS3的部分属性，因此建议使用火狐或Chrome等浏览器获取最佳效果。当把鼠标移到菜单上的时候，对应菜单项的背景会变化，而且本菜单具有圆角的效果。

运行效果截图如下：

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=utf-8" />
<title>三种背景颜色左右滑动菜单导航</title>
<style>
.webwidget_menu_glide{
 padding: 5px;
 -moz-border-radius-topright: 10px;
 -moz-border-radius-topleft: 10px;
 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -khtml-border-radius-topright: 10px;
 -khtml-border-radius-topleft: 10px;
 border-radius-topright: 10px;
 border-radius-topleft: 10px;
 -moz-border-radius-bottomright: 10px;
 -moz-border-radius-bottomleft: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
 -khtml-border-radius-bottomright: 10px;
 -khtml-border-radius-bottomleft: 10px;
 border-radius-bottomright: 10px;
 border-radius-bottomleft: 10px;
 border-radius:10px;
}
.webwidget_menu_glide .webwidget_menu_glide_sprite{
 width: 100px;
 height: 20px;
 background-color: fuchsia;
 position: absolute;
 -moz-border-radius-topright: 10px;
 -moz-border-radius-topleft: 10px;
 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -khtml-border-radius-topright: 10px;
 -khtml-border-radius-topleft: 10px;
 border-radius-topright: 10px;
 border-radius-topleft: 10px;
 -moz-border-radius-bottomright: 10px;
 -moz-border-radius-bottomleft: 10px;
 -webkit-border-bottom-left-radius: 10px;
 -webkit-border-bottom-right-radius: 10px;
 -khtml-border-radius-bottomright: 10px;
 -khtml-border-radius-bottomleft: 10px;
 border-radius-bottomright: 10px;
 border-radius-bottomleft: 10px;
 border-radius:10px;
}
.webwidget_menu_glide ul{
 padding: 0px;
 margin: 0px;
 font-family:Arial;
}
.webwidget_menu_glide ul li{
 float: left;
 list-style: none;
 position: relative;
 text-align: center;
 margin-right: 10px;
 width: 100px;
}
.webwidget_menu_glide ul li a{
 color: black;
 text-decoration: none;
 font-weight: bold;
}
.webwidget_menu_glide ul li ul{
 -moz-border-radius-bottomright: 7px;
 -moz-border-radius-bottomleft: 7px;
 -webkit-border-bottom-left-radius: 7px;
 -webkit-border-bottom-right-radius: 7px;
 -khtml-border-radius-bottomright: 7px;
 -khtml-border-radius-bottomleft: 7px;
 border-radius-bottomright: 7px;
 border-radius-bottomleft: 7px;
 border-radius:7px;
 padding-bottom: 5px;
 position: absolute;
 z-index: 999999;
 display: none;
}
.webwidget_menu_glide ul li ul li{
 -moz-border-radius-topright: 0px;
 -moz-border-radius-topleft: 0px;
 -webkit-border-top-left-radius: 0px;
 -webkit-border-top-right-radius: 0px;
 -khtml-border-radius-topright: 0px;
 -khtml-border-radius-topleft: 0px;
 border-radius-topright: 0px;
 border-radius-topleft: 0px;
 border-radius:0px;
 margin: 0px;
 float: none;
 border:none;
 word-wrap:break-word;
}
.webwidget_menu_glide ul li ul li a{
 padding-left: 5px;
 padding-right: 5px;
 font-weight: normal;
}
</style>
</link>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
(function(a){
 a.fn.webwidget_menu_glide=function(p){
  var p=p||{};
  var f=p&&p.menu_text_size?p.menu_text_size:"12px";
  var g=p&&p.menu_text_color?p.menu_text_color:"blue";
  var h=p&&p.menu_margin?p.menu_margin:"10px";
  var i=p&&p.menu_width?p.menu_width:"100px";
  var j=p&&p.menu_height?p.menu_height:"20px";
  var k=p&&p.menu_sprite_color?p.menu_sprite_color:"red";
  var l=p&&p.menu_background_color?p.menu_background_color:"black";
  var m=p&&p.sprite_speed?p.sprite_speed:"fast";
  f += "px";
  h += "px";
  i += "px";
  j += "px";
  var n=a(this);
  if(n.children("ul").length==0||n.find("li").length==0){
   n.append("Require menu content");
   return null
   }
   s_m(n.children("ul").children("li"),h,i,j);
  s_m_t_c(n.find("a"),g,j,f);
  n.css("background-color",l);
  if(n.children("ul").children("li").is(".current")){
   var o=n.children("ul").children("li").filter(".current").offset()
   }else{
   var o=n.children("ul").children("li:first").offset()
   }
   var q=o.left+'px';
  s_m_s_c(n.find(".webwidget_menu_glide_sprite"),k,i,j,q);
  n.children("ul").children("li").hover(function(){
   var b=$(this).offset();
   var c=b.left+'px';
   n.find(".webwidget_menu_glide_sprite").stop().animate({
    left:c
   },m)
   },function(){
   n.find(".webwidget_menu_glide_sprite").stop().animate({
    left:q
   },m)
   });
  n.children("ul").children("li").children("ul").children("li").hover(function(){},function(){});
  function s_m_t_c(a,b,c,d){
   a.css("color",b);
   a.css("line-height",c);
   a.css("font-size",d)
   }
   function s_m(a,b,c,d){
   style="margin-right:"+b+"; width: "+c+"; height: "+d+";";
   a.attr("style",style)
   }
   function s_m_s_c(a,b,c,d,e){
   a.css("background-color",b);
   a.css("width",c);
   a.css("height",d);
   a.css("left",e)
   }
  }
})(jQuery);
</script>
</head>
<body>
<table width="600">
 <tr>
 <td><h2>Demo1</h2>
  <br/>
  <br/>
  <script language="javascript" type="text/javascript">
   $(function() {
    $("#webwidget_menu_glide1").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#FFF", menu_sprite_color:"red", menu_background_color:"#C91A3E", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide1" });
   });
  </script>
  <div id="webwidget_menu_glide1" class="webwidget_menu_glide">
  <div class="webwidget_menu_glide_sprite"></div>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">News</a></li>
   <li class="current"><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">More...</a></li>
  </ul>
  <div style="clear: both"></div>
  </div></td>
 </tr>
 <tr>
 <td><h2>Demo2</h2>
  <br/>
  <br/>
  <script language="javascript" type="text/javascript">
   $(function() {
    $("#webwidget_menu_glide2").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#CCC", menu_sprite_color:"#666", menu_background_color:"#000", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide2" });
   });
  </script>
  <div id="webwidget_menu_glide2" class="webwidget_menu_glide">
  <div class="webwidget_menu_glide_sprite"></div>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">News</a></li>
   <li class="current"><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">More...</a></li>
  </ul>
  <div style="clear: both"></div>
  </div></td>
 </tr>
 <tr>
 <td><h2>Demo3</h2>
  <br/>
  <br/>
  <script language="javascript" type="text/javascript">
   $(function() {
    $("#webwidget_menu_glide3").webwidget_menu_glide({menu_width:"100", menu_height:"23", menu_text_size:"12", menu_text_color:"#FFF", menu_sprite_color:"#86C7EF", menu_background_color:"#0F67A1", menu_margin:"2", sprite_speed:"normal", container:"webwidget_menu_glide3" });
   });
  </script>
  <div id="webwidget_menu_glide3" class="webwidget_menu_glide">
  <div class="webwidget_menu_glide_sprite"></div>
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">News</a></li>
   <li class="current"><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">More...</a></li>
  </ul>
  <div style="clear: both"></div>
  </div></td>
 </tr>
</table>
</body>
</html>

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

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
JavaScript设计模式之外观模式介绍
Dec 28 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
Bootstrap CSS布局之表单
Dec 17 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
Vue.js分页组件实现：diVuePagination的使用详解
Jan 10 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
jQuery实现响应鼠标背景变化的动态菜单效果代码
Aug 27 #Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 #Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 #Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 #Javascript
JavaScript中的Function函数
Aug 27 #Javascript
jquery带动画效果幻灯片特效代码
Aug 27 #Javascript
javascript中判断json的方法总结
Aug 27 #Javascript
连接器(1) 有序排列(1) pycryto(1) shell脚本(1) key(1) kafka(2) 曝光融合(1) 数据加密(1) 公共键(1) 遍历文件夹(1)
You might like
雄兵连三大错觉：凯莎没了，凉冰阵亡了，华烨觉得自己又行了
2020/04/09 国漫
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
php实现加减法验证码代码
2014/02/14 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
php中switch语句用法详解
2015/08/17 PHP
php图片添加水印例子
2016/07/20 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
javascript中clone对象详解
2014/12/03 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
2016/10/10 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
2017/03/25 jQuery
详谈for循环里面的break和continue语句
2017/07/20 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
详解React 条件渲染
2020/07/08 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python多线程http下载实现示例
2013/12/30 Python
Python实现简单网页图片抓取完整代码实例
2017/12/15 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
10个示例带你掌握python中的元组
2020/11/23 Python
资生堂美国官网：Shiseido美国
2016/09/02 全球购物
法国高保真音响和家庭影院商店：Son Video
2019/04/26 全球购物
LN-CC中国：高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
卡拉威高尔夫官方网站：Callaway Golf
2020/09/16 全球购物
What is the purpose of Void class? Void类的作用是什么？
2016/10/31 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
中学生期末评语
2014/02/03 职场文书
大二学习计划书范文
2014/04/27 职场文书
服务标语大全
2014/06/18 职场文书
利用python调用摄像头的实例分析
2021/06/07 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle