Superb jquery-like flash navigation bar effects, jquery navigation bar
FLASH navigation is now basically outdated, but we can use jQuery to achieve flash effect, which is very good.
Demo address: http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html
Copy codeThe Code is as follows:
<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>
Copy codeThe Code is as follows:
$ (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 ..
Copy codeThe Code is as follows:
/* 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;
}
The code is simple and easy to use, including easy modification. Let's do it with your friends.