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

前端技术 2023/09/10 JavaScript

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.phpstudy.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\">
<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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/26594

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案