Navigation verticale contextuelle latérale créée à l'aide des effets d'animation jquery et css_jquery

Il s'agit d'une navigation verticale contextuelle latérale créée à l'aide d'effets d'animation jquery et de CSS. L'ensemble du processus contextuel est relativement fluide et le code est très simple. Si vous recherchez une navigation verticale avec animation, vous pouvez essayer ceci. Ce qui suit est une capture d'écran de l'effet :



Code source HTML :

Copier le code Code comme suit :

>html, body, ul , li {
marge : 0;
padding : 0;
bordure : 0;
contour : 0; -famille : "Verdana" ,"lucida sans",Sans-serif;
font-size:
}
html, body {
min-height: 100%
color; : #FFFFFF;
background-repeat : répéter-x ;
background-position : top
background-color :
}
ul.side_nav {
width : 200px;
float : gauche;
marge : 0;
padding : 0;
ul.side_nav li {
position : relative
float : gauche ; 🎜>marge : 0 ;
padding : 0 ;
affichage : en ligne ;
}
ul.side_nav li a {
largeur : 165px
border-top : 1px solid #; 3373a9 ;
bordure -bas : 1px solide #003867 ;
remplissage : 10px 10px 25px
affichage : bloc
couleur : #fff ; >arrière-plan : #005094 url ​​(sidenav_arrow.gif) sans répétition 5px 10px ;
position : relative
z-index : 2
}
ul.side_nav li a:hover {
background-color : # 2d353f ;
}
ul.side_nav li div {
affichage : aucun
position : absolue
haut : 2px 
gauche : 0 ; 🎜>largeur : 225 px ;
arrière-plan : url(bubble_top.gif) no-repeat right top;
ul.side_nav li div p {
marge : 7px 0 ; hauteur : 1,3em ;
remplissage : 0 5px 10px 30px ;
couleur : #444 ;
arrière-plan : url(bubble_btm.gif) pas de répétition en bas à droite
}

< ;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
">
< ;script langage="javascript">
$(document).ready(function() {

$("ul.side_nav li").hover(function() {
$( this).find("div").stop()
.animate({ gauche : "210", opacité : 1 }, "rapide")
.css("affichage" , "block")
}, function() {
$(this).find("div").stop()
.animate({ gauche : "0", opacité : 0 }, "rapide")
});

>

Corange.cn

ASP

Apprenez à me connaître.

href="#"> ;Portfolio

Découvrez mon travail en vedette !

🎜>

Blog

Tutoriels, articles et ressources.

< /li>

Contact n'hésitez pas à m'écrire !

;

Actualités, Vidéo et ainsi de suite.

/corps>