Jquery implements the vertical navigation that appears on the side.
This is a vertical navigation on the side created by using jquery animation effects and css. The entire pop-up process is smooth and the code is simple. If you are looking for an animated vertical navigation, you can try this.
HTML source code:
Copy codeThe Code is as follows:
<Title> Jquery + CSS vertical navigation on the side </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 {
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: # 2d0000f;
}
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>
</Head>
<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>
</Html>
The Demo code is very simple. You can modify the Demo code as needed.