L'exemple de cet article décrit l'implémentation jquery de l'indicatif de zone de navigation qui rétracte le haut vers la droite. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un menu similaire à la navigation, mais il est plus évolutif. Il peut non seulement être utilisé comme menu, mais également comme effet de bloc de navigation. Le bloc de navigation peut contenir des menus ou d'autres fonctions. jQuery. , cliquez sur la flèche à l’extrémité gauche du calque flottant avec la souris pour réduire et développer ce menu.
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/jquery-right-hidden-show-nav-style-codes/
Le code spécifique est le suivant :
<!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 ? "<" : ">");
})
});
});
</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>J'espère que cet article sera utile à la conception de la programmation jquery de chacun.
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
Qu'est-ce qui est mis en évidence dans jquery
Quelles données le cache Redis stocke-t-il généralement ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
