Home>
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>
Related articles
- Fade in and fade out secondary menu effect code implemented by jQuery
- Swipe down secondary menu effect code based on jQuery
- Red line horizontal secondary menu effect realized by jquery + css
- jQuery implements a secondary menu effect example that slides down
- Jquery implementation of mouseover to display secondary menu effect
- Simple secondary menu effect code implemented by jquery
Trends