首页
所有分类
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 window.onload 加载多个函数的方法
Nov 02 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
jquery高效反选具体实现
May 05 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
JavaScript插件化开发教程 （四）
Jan 27 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
浅析jQuery中使用$所引发的问题
May 29 Javascript
JavaScript全屏和退出全屏事件总结（附代码）
Aug 17 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 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
Ruby面试题(15) 推荐信(292) 岗位职责(1324) 自我鉴定(671) 自荐信(981) 求职信(1029) 创业计划书(312) SOA面试题(9) Delphi面试题(13) 自我评价(886)
You might like
提高php运行速度的一些小技巧分享
2012/07/03 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
Laravel实现搜索的时候分页并携带参数
2019/10/15 PHP
强制设为首页代码
2006/06/19 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
javascript 面向对象编程基础：继承
2009/08/21 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
用JS实现图片轮播效果代码（一）
2016/06/26 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
纯JavaScript 实现flappy bird小游戏实例代码
2016/09/27 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
解决$store.getters调用不执行的问题
2019/11/08 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
[14:20]刀塔大凶女神互压各路奇葩屌丝
2014/05/16 DOTA
Python文件去除注释的方法
2015/05/25 Python
浅谈Python 列表字典赋值的陷阱
2019/01/20 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
使用OpenCV实现仿射变换—缩放功能
2019/08/29 Python
python字符串的拼接方法总结
2019/11/18 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
IDLE下Python文件编辑和运行操作
2020/04/25 Python
python适合做数据挖掘吗
2020/06/16 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
英国工作场所设备购买网站：Slingsby
2019/05/03 全球购物
小小的船教学反思
2014/02/21 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
公司周年庆典标语
2014/10/07 职场文书
会计岗位职责
2015/02/03 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
一年级语文教学随笔
2015/08/14 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
合作意向书范本
2019/04/17 职场文书
诚信高考倡议书
2019/06/24 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python