Vertikale seitliche Popup-Navigation, erstellt mit JQuery-Animationseffekten und CSS_JQuery

Dies ist eine seitliche Popup-Vertikalnavigation, die mit JQuery-Animationseffekten und CSS erstellt wurde. Der gesamte Popup-Prozess ist relativ reibungslos und der Code ist sehr einfach. Wenn Sie nach einer vertikalen Navigation mit Animation suchen, können Sie dies versuchen. Das Folgende ist ein Screenshot des Effekts:



HTML-Quellcode:

Code kopieren Code wie folgt:

>html, body, ul {
margin: 0;
border: 0;
font -Familie: „Verdana“, „Lucida Sans“, Sans-Serif; : #FFFFFF;
Hintergrundwiederholung: Wiederholung-x;
Hintergrundfarbe: #161f2a; 200px;
float: 0;
padding: 0;
ul.side_nav li {
float: left; 🎜>margin: 0;
display: inline;
ul.side_nav li a {
border-top: 1px solid # 3373a9;
Rahmen -unten: 10px 10px 25px;
Farbe: #fff;
background: #005094 url ​​(sidenav_arrow.gif) no-repeat 5px 10px;
z-index: 2;
ul.side_nav li a:hover {
background-color: # 2d353f;}
ul.side_nav li div {
position: absolute; 🎜>width: 225px
background: url(bubble_top.gif) no-repeat right top;
ul.side_nav li div p {
margin: 7px 0; Höhe: 1,3em;
Auffüllung: 0 5px 10px 30px; style>
< ;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
">
< ;script language="javascript">$(document).ready(function() {

$("ul.side_nav li").hover(function() {
$( this).find("div").stop()
.animate({ left: "210", opacity: 1 }, "fast")
.css("display" , "block")
}, function() {
$(this).find("div").stop()
.animate({ left: "0", opacity: 0 }, "schnell")
});

< ;li>
Corange.cn

Lernen Sie mich kennen.

Schauen Sie sich meine vorgestellten Arbeiten an!

🎜>

Blog

Tutorials, Artikel und Ressourcen.

;
< /li>

Kontakt Zögern Sie nicht, mir eine Nachricht zu schreiben!