search

Home >Web Front-end >JS Tutorial >jquery implements the code for the navigation area that stretches to the right at the top_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:40:511196browse

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>

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

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Implementing simple style switching effect code based on JS_javascript skillsNext article：Implementing simple style switching effect code based on JS_javascript skills

Related articles

See more