jquery implements the code for the navigation area that stretches to the right at the top

jquery implements the code for the navigation area that stretches to the right at the top_jquery

WBOY

Release： 2016-05-16 15:40:51

Original

1178 people have browsed it

The example in this article describes the jquery implementation of the navigation area code that retracts the top to the right. Share it with everyone for your reference. The details are as follows:

This is a menu similar to navigation, but it is more scalable. It can not only be used as a menu, but also as a navigation block effect. The navigation block can contain menus or other functions. This effect is based on jQuery. , click the arrow on the left end of the floating layer with the mouse to collapse and expand this menu.

The screenshot of the running effect is as follows:

The online demo address is as follows:

http://demo.jb51.net/js/2015/jquery-right-hidden-show-nav-style-codes/

The specific code is as follows:

<!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>
<title>鼠标单击控制收缩和展开的窗口</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;}
#box{position:absolute;right:0;top:0;overflow:hidden;}
#arrow{color:#fff;background:#000;width:20px;height:90px;line-height:90px;font-size:12px;font-family:"宋体";text-align:center;font-weight:bold;float:left;}
#col_box{width:400px;height:90px;background:#eee;float:left;}
</style>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 var oMoveBox = $("#col_box"), oArr = $("#arrow"), maxL = 400;
 oArr.click(function(){
  oMoveBox.animate({"width":"-="+maxL},600,function(){
   maxL = -maxL;
   $("#arrow").html(maxL<0 &#63; "<" : ">");
  })
 });
});
</script>
</head>
<body>
<div id="box">
 <div id="arrow">></div>
 <div id="col_box">z<br>z<br>s<br>k<br>y</div>
</div>
</body>
</html>

Copy after login

I hope this article will be helpful to everyone’s jquery programming design.