首页
所有分类
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 void(0)的妙用
Oct 21 Javascript
JS 遮照层实现代码
Mar 31 Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 Javascript
Jquery.addClass始终无效原因分析
Sep 08 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
5个实用的JavaScript新特性
Jun 16 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
queue(1) 云服务器(1) 外键约束(1) Foreign Key(1) 腾讯云(1) JDK(1) 数据备份(2) 内存池(1) expdp(1) Vite(1)
You might like
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
thinkPHP基于ajax实现的菜单与分页示例
2016/07/12 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
jquery radio 操作代码
2011/03/16 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
js代码延迟一定时间后执行一个函数的实例
2017/02/15 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
javascript回调函数详解
2018/02/06 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
React学习之JSX与react事件实例分析
2020/01/06 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python实现在sqlite动态创建表的方法
2015/05/08 Python
Python快速排序算法实例分析
2017/11/29 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
阿根廷旅游网站：almundo阿根廷
2018/02/12 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
自荐书模板
2013/12/19 职场文书
新三好学生主要事迹
2014/01/23 职场文书
全国优秀辅导员事迹材料
2014/05/14 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
幼儿园教师师德师风演讲稿：爱我所爱 无悔青春
2014/09/10 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
大学体育课感想
2015/08/10 职场文书
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js