This is a use of jquery animation effects and CSS to create a side edge pop-up vertical navigation, the entire pop-up process is smoother, and the code is very simple, if you are looking for a driven vertical navigation, then you can try this. Here is a screenshot of the effect:
<title>jquery+css Side Popup Vertical navigation </title>
<style type= "Text/css" >
HTML, Body, UL, Li {
margin:0;
padding:0;
border:0;
outline:0;
Vertical-align:baseline;
font-family: "Verdana", "Lucida sans", sans-serif;
font-size:12px;
}
HTML, Body {
min-height:100%;
Color: #FFFFFF;
Background-repeat:repeat-x;
Background-position:top;
Background-color: #161f2a;
}
Ul.side_nav {
width:200px;
Float:left;
margin:0;
padding:0;
}
Ul.side_nav Li {
position:relative;
Float:left;
margin:0;
padding:0;
Display:inline;
}
Ul.side_nav Li a {
width:165px;
border-top:1px solid #3373a9;
border-bottom:1px solid #003867;
padding:10px 10px 10px 25px;
Display:block;
Color: #fff;
Text-decoration:none;
Background: #005094 URL (sidenav_arrow.gif) no-repeat 5px 10px;
position:relative;
Z-index:2;
}
Ul.side_nav Li A:hover {
Background-color: #2d353f;
}
Ul.side_nav Li Div {
Display:none;
Position:absolute;
top:2px;
left:0;
width:225px;
Background:url (bubble_top.gif) no-repeat right top;
}
Ul.side_nav Li Div p {
MARGIN:7PX 0;
Line-height:1.3em;
padding:0 5px 10px 30px;
Color: #444;
Background:url (bubble_btm.gif) no-repeat right bottom;
}
</style>
<script type= "Text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
"></script>
<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}, "Fast")
});
});
</script>
<body>
<ul class= "Side_nav" >
<li>
<a href= "www.corange.cn" >Corange.cn</a>
<div><p>go home!<br/>asp</p></div>
</li>
<li>
<a href= "#" >about me</a>
<div><p>get to know Me.</p></div>
</li>
<li>
<a href= "#" >Portfolio</a>
<div><p>get to check out my featured work!</p></div>
</li>
<li>
<a href= "#" >Blog</a>
<div><p>tutorials, articles and resources.</p></div>
</li>
<li>
<a href= "#" >Contact</a>
<div><p>don ' t hesitate to drop me a line!</p></div>
</li>
<li>
<a href= "#" >Rss</a>
<div><p>news, video and so on.</p></div>
</li>
</ul>
</body>
