Jquery-a navigation bar effect similar to flash, jquery-navigation bar
Demo address: http://itxiaoming.sinaapp.com/demo05/demo.html
Html code
- <Html>
- <Head>
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
- <Title> demo01 </title>
- <Link rel = "stylesheet" type = "text/css" href = "demo.css">
- <Script type = "text/javascript" src = "jquery. js"> </script>
- <Script type = "text/javascript" src = "demo. js"> </script>
- </Head>
- <Body>
- <Div id = "main">
- <Div class = "menu">
- <Div class = "menu_ B back1"> </div>
- <Span> test </span>
- </Div>
- <Div class = "menu">
- <Div class = "menu_ B back2"> </div>
- <Span> test </span>
- </Div>
- <Div class = "menu">
- <Div class = "menu_ B back3"> </div>
- <Span> test </span>
- </Div>
- <Div class = "menu">
- <Div class = "menu_ B back4"> </div>
- <Span> test </span>
- </Div>
- <Div class = "menu">
- <Div class = "menu_ B back5"> </div>
- <Span> test </span>
- </Div>
- <Div class = "menu">
- <Div class = "menu_ B back6"> </div>
- <Span> test </span>
- </Div>
- </Div>
- </Body>
- </Html>
Js Code
- $ (Document). ready (function (){
- $ (". Menu"). mouseover (function (){
- Var div = $ (this). children (". menu_ B ");
- Var span = $ (this). children ("span ");
- // Hide the font and move 20 Px to the right
- Span. stop (true, false). animate ({opacity: '0', left: '20px '}, 200 );
- // Display the background animation
- Div. stop (true, false ). animate ({width: '100px ', marginLeft:'-50px ', height: '1px', opacity: '1'}, 300 );
- Div. animate ({height: '40px ', marginTop:'-20px ', opacity: '1'}, 300 );
- // Display font, move 20 Px to the left
- Span. animate ({opacity: '1', left: '0p'}, 300 );
- Span.css ({color: '# fff '});
- });
- $ (". Menu"). mouseout (function (){
- Var div = $ (this). children (". menu_ B ");
- Var span = $ (this). children ("span ");
- // Hide the font and move 20 Px to the left
- Span. stop (true, false). animate ({opacity: '0', left: '20px '}, 200 );
- // Display the background animation
- Div. stop (true, false). animate ({height: '1px ', marginTop: '0px', opacity: '1'}, 300 );
- Div. animate ({width: '0px ', marginLeft: '0px', opacity: '1'}, 300 );
- // Display font, move 20 Px to the right
- Span. animate ({opacity: '1', left: '0p'}, 300 );
- Span.css ({color: '#777 '});
- });
- });
I wrote the animation effects based on my preferences. If you like the animation effects, you can change the effects on your own ..
Css code
- /* Demo01 css */
- # Main {
- Background: # EEE;
- Display: inline-block;
- Padding: 10px;
- }
- . Menu {position: relative;
- Width: 100px;
- Height: 40px;
- Margin: 10px auto;
- }
- . Menu_ B {
- Position: absolute;
- Width: 0px;
- Height: 0px;
- Background: red;
- Z-index: 1px;
- Top: 50%;
- Left: 50%;
- }
- . Menu span {
- Position: inherit;
- Display: block;
- Text-align: center;
- Line-height: 40px;
- Z-index: 3px;
- Font-size: 14px;
- Font-family: "Microsoft Yahei ";
- Color: #777;
- Cursor: pointer;
- }
- . Back1 {
- Background: # FF0000;
- }
- . Back2 {
- Background: # 921AFF;
- }
- . Back3 {
- Background: #00 CACA;
- }
- . Back4 {
- Background: #00DB00;
- }
- . Back5 {
- Background: # FF5809;
- }
- . Back6 {
- Background: # E1E100;
- }
High score: a standard imitation flash navigation bar written in js
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-
Strict. dtd ">
<Html xmlns = "www.w3.org/5o/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> navigation bar demonstration </title>
<Style type = "text/css" media = "all">
/* <! [CDATA [*/
Body {margin: 100px 0}
. Clear: after {content: "."; display: block; height: 0; clear: both; visibility: hidden}. clear
{Display: inline-block}. clear {display: block}
Div # nav {height: 70px; background: url (img/nav_bg.png) repeat-x}
Div # nav ul {width: 960px; margin: 0 auto; list-style: none}
Div # nav ul li {float: left; height: 35px; overflow: hidden; padding: 0 2px 0 0; font: bold 12px/35px
Arial; background: url (img/nav_right.png) repeat-y right 0}
Div # nav ul li a {float: left; height: 100%; padding: 0 20px; background: url (img/nav_sub.png) repeat-x;
Color: # fff; text-decoration: none}
Div # nav ul li a. hover {clear: both; background-position: 0-35px}
Div # nav ul li. on a {background-position: 0-35px}
Div # nav ul li. nobg {background: none}
H2 {text-align: center}
/*]> */
</Style>
</Head>
<Body>
<D ...... remaining full text>
Jquery is similar to the Flash effect navigation, but does not respond when you click the link
Open a new window:
<Li onClick = "window. open ('www .baidu.com ')"> <a href = "#"> Home </a> </li>
Original Window jump:
<Li onClick = "window. location. href = 'www .baidu.com '"> <a href = "#"> Plant a tree </a> </li>
