首页
所有分类
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 相关文章推荐
判断日期是否能跨月查询的js代码
Jul 25 Javascript
JS制作简单的三级联动
Mar 18 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
微信小程序 form组件详解及简单实例
Jan 10 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
vue params、query传参使用详解
Sep 12 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
vue项目总结之文件夹结构配置详解
Dec 13 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
基于JavaScript实现表格隔行换色
May 08 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
CAD(1) 404(1) Sunmao(1) 403(1) sout(1) 输入法(2) macos(1) Sentry(1) svg(1) 滚动条(1)
You might like
PHP技术开发技巧分享
2010/03/23 PHP
PHP中break及continue两个流程控制指令区别分析
2011/04/18 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
thinkPHP实现递归循环栏目并按照树形结构无限极输出的方法
2016/05/19 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
PDO::query讲解
2019/01/29 PHP
js格式化时间小结
2014/11/03 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
jQuery实现自定义事件的方法
2015/04/17 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
BootStrap实现带有增删改查功能的表格(DEMO详解)
2016/10/26 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
2017/02/16 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
JS 实现分页打印功能
2018/05/16 Javascript
Vuex 使用及简单实例(计数器)
2018/08/29 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
django+js+ajax实现刷新页面的方法
2017/05/22 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
Python 分发包中添加额外文件的方法
2019/08/16 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
印度尼西亚最好的小工具在线商店：Erafone.com
2019/03/26 全球购物
竞选学生会主席演讲稿
2014/04/24 职场文书
给学校的建议书范文
2014/05/15 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
公司开会通知
2015/04/20 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python