jquery implémente l'effet de menu coulissant Slide Out Navigation code

jquery implémente l'effet de menu coulissant Slide Out Navigation code_jquery

WBOY

Libérer： 2016-05-16 15:40:17

original

1031 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation jquery du code d'effet du menu coulissant Slide Out Navigation. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Nous introduisons ici l'effet de navigation de Slide Out Navigation implémenté par jquery qui suit la souris pour glisser vers l'extérieur. Une fois la souris déplacée, le menu se déplace rapidement de haut en bas. La nouvelle version du plug-in jQuery est citée. . Le menu peut être utilisé en le modifiant, comme en changeant la couleur d'arrière-plan ou la taille du texte, etc.

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-slide-out-nav-menu-style-codes/

Le code spécifique est le suivant :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Slide Out Navigation</title>
<script type='text/javascript' src='jquery-1.6.2.min.js'></script>
<style type="text/css">
body{ font-family:arial;}
ul#navigation {
 list-style: none outside none;
 margin: 0;
 padding: 0;
 position: fixed;
 right: 10px;
 top: 0;
 width: 721px;
 z-index: 999999;
}
ul#navigation li {
 display: inline;
 float: left;
 width: 103px;
}
ul#navigation li a {
 background-color: #E7F2F9;
 background-position: 50% 10px;
 background-repeat: no-repeat;
 border: 1px solid #BDDCEF;
 border-radius: 0 0 10px 10px;
 display: block;
 float: left;
 height: 25px;
 margin-top: -2px;
 opacity: 0.7;
 padding-top: 80px;
 text-align: center;
 text-decoration: none;
 line-height:25px;
 width: 100px;
 font-size:11px;
 color: #60ACD8;
 letter-spacing: 2px;
 text-shadow: 0 -1px 1px #FFFFFF;
}
ul#navigation li a:hover {
 background-color: #CAE3F2;
}
ul#navigation .home a {
 background: url(images/home.png) no-repeat;
}
ul#navigation .about a {
 background: url(images/id_card.png) no-repeat;
}
ul#navigation .search a {
 background: url(images/search.png) no-repeat;
}
ul#navigation .podcasts a {
 background: url(images/ipod.png) no-repeat;
}
ul#navigation .rssfeed a {
 background: url(images/rss.png) no-repeat;
}
ul#navigation .photos a {
 background: url(images/camera.png) no-repeat;
}
ul#navigation .contact a {
 background: url(images/mail.png) no-repeat;
}
</style>
</head>
<body>
<ul id="navigation">
 <li class="home"><a href="">Home</a></li>
 <li class="about"><a href="">About</a></li>
 <li class="search"><a href="">Search</a></li>
 <li class="photos"><a href="">Photos</a></li>
 <li class="rssfeed"><a href="">Rss Feed</a></li>
 <li class="podcasts"><a href="">Podcasts</a></li>
 <li class="contact"><a href="">Contact</a></li>
</ul>
<script type="text/javascript">
$(function() {
 var d=300;
 $('#navigation a').each(function(){
 $(this).stop().animate({
 'marginTop':'-80px'
 },d+=150);
 });
 $('#navigation > li').hover(
 function () {
 $('a',$(this)).stop().animate({
 'marginTop':'-2px'
 },200);
 },
 function () {
 $('a',$(this)).stop().animate({
 'marginTop':'-80px'
 },200);
 }
 );
 });
</script>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.