Jquery to achieve left and right slide-out secondary menu effect code like a fence

Home>2020-03-10 09:16

Jquery to achieve left and right slide-out secondary menu effect code like a fence

Here demonstrates that jquery implements a left-right slide-out secondary menu like a fence,Slides left or right,Support Chinese and English,Don't forget to introduce the jquery plugin when using it.

The screenshot of the running effect is as follows:

The online demo address is as follows:

The specific code is as follows:

<! Doctype html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>jquery fence menu left and right menu</title>
<title>grooveshark-style menu</title>
<script type="text/javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript">
//jquery.grooveshark.js
jquery.fn.grooveshark=function () {
 return this.each (function () {
  var raw=this;
  var elm=jquery (this);
  var width=elm.width ();
  var tel=1;
  var smw=(width-150) + "px";
  jquery (". ui-gs-panel", raw) .css ("left", width + "px"). hide ();
  jquery (". ui-gs-panel li", raw) .css (width, smw);
  jquery (". ui-gs-main li", raw) .click (function () {
   var panel=jquery (this) .attr ("rel");
   jquery (". ui-gs-main li", raw) .each (function () {
    var el=jquery (this);
    if (el.hasclass ("ui-active")) el.removeclass ("ui-active");
   });
   jquery (this) .addclass ("ui-active");
   jquery (". ui-gs-main", raw) .animate ({width:"150px"}, 1000);
   jquery ("." + panel, raw) .css ("z-index", tel +=1) .show (). animate ({"left":"150px"}, 1000, function () {
    jquery (". ui-gs-panel", raw) .each (function () {
     if (jquery (this) .hasclass (panel) == false) {
      jquery (this) .css ("left", width + "px");
      jquery (this) .css ("z-index", "1");
      jquery (this) .hide ();
     }
    });
   });
  });
 });
};
jquery.fn.backhome=function () {
 return this.each (function () {
  var raw=this;
  var width=jquery (raw) .width ();
  jquery (". ui-active", raw) .each (function () {
   jquery (this) .removeclass (". ui-active");
  });
  jquery (". ui-gs-main", raw) .animate ({width:"100%"}, 1000) .removeclass ("ui-active");
   jquery (". ui-gs-panel", raw) .each (function () {
   jquery (this) .animate ({"left":width + "px"}, 1000, function () {
    $(this) .hide ();
   });
  });
 });
};
</script>
<style type="text/css">
body {font:12px "century gothic", tahoma, verdana, arial, sans-serif;margin:0;overflow-x:hidden;}
#container {display:block;width:100%;height:500px;border-top:5px solid #ccc;border-bottom:5px solid #ccc;overflow-x:hidden;position:relative;}
.ui-gs-main {display:block;width:100%;overflow:hidden;position:absolute;top:0;left:0;}
.ui-gs-main ul {list-style:none;margin:0;padding:0;}
.ui-gs-main ul li {display:block;width:100%;padding-top:15px;padding-bottom:15px;text-indent:25px;border-bottom:1px solid #ccc;}
.ui-gs-main ul li:hover {background:#f0f2f5;}
.ui-gs-panel {display:block;width:100%;overflow:hidden;position:absolute;top:0;left:0;}
.ui-gs-panel ul {list-style:none;margin:0;padding:0;}
.ui-gs-panel ul li {display:block;width:100%;padding-top:15px;padding-bottom:15px;text-indent:25px;border-bottom:1px solid #ccc;border-left:1px solid #ccc;background:white;}
.ui-gs-panel ul li:hover {background:#f0f2f5;}
li.ui-active {background:#f0f2f5;}
</style>
<script type="text/javascript">
$(document) .ready (function () {
 $("#container"). grooveshark ();
 $("#backhome"). click (function () {
  $("#container"). backhome ();
 });
});
</script>
 </head>
 <body>
  <div>
   <div>
    <ul>
     <li rel="home">Homepage</li>
     <li rel="over_ons">works</li>
     <li rel="portfolio">link</li>
     <li rel="contact">Contact</li>
    </ul>
   </div>
   <div>
    <ul>
     <li>Latest Update</li>
     <li>Hotspot Ranking</li>
     <li>Current affairs politics</li>
     <li>Like movies</li>
     <li>My Music</li>
     <li>My Favorites</li>
     <li>Procedural Life</li>
     <li>Entertainment World</li>
     <li>Marriage</li>
     <li>Various</li>
    </ul>
   </div>
   <div>
    <ul>
     <li>jquery</li>
     <li>asp</li>
     <li>php</li>
     <li>java</li>
     <li>jsp</li>
     <li>ajax</li>
     <li>asp.net</li>
     <li>vc++</li>
     <li>c#</li>
    </ul>
   </div>
   <div>
    <ul>
     <li>Baidu</li>
     <li>Sina</li>
     <li>Netease</li>
     <li>Tencent</li>
     <li>Sohu</li>
     <li>Tianya</li>
    </ul>
   </div>
   <div>
    <ul>
     <li>Beijing</li>
     <li>Shanghai</li>
     <li>Tianjin</li>
     <li>Chongqing</li>
     <li>Chengdu</li>
     <li>Guangzhou</li>
     <li>Changzhou</li>
     <li>Shenzhen</li>
     <li>Hangzhou</li>
     <li>Wuxi</li>
     <li>Zhengzhou</li>
     <li>Wuhan</li>
    </ul>
   </div>
  </div>
</body>
</html>

javascript

Previous SetInterval and setTimeout timer usage in JavaScript

Next On the usage of strtol () function and strtoul () function in C language

Trends

TutorialFor

Jquery to achieve left and right slide-out secondary menu effect code like a fence

Related articles