To merge our previous two examples together, we'll need to create a new file and mix our CSS and jQuery code from both the examples together. Of course, we'll need to make a few adjustments to allow them to work together.
Create a new document called
navigation-animation2.html
using the file template and save it under ourjquery-animation
folder.Then, place the following CSS code into a new file called
navigation-animation2.css
, and link it in the HTML document we just created:body, html { margin:0; padding:0; } body {background:#F00;} nav { width:100%; position:fixed; top:0; padding:10px 0; text-align:center; outline:1px solid #FFF; background:#EEE; background-color:rgba(255, 255, 255, 0.5); } nav a { color:#222; margin:0 10px; text-decoration:none; } content {margin-top:50px;} content div { height:400px; margin:10px; padding:10px; outline:1px solid #FFF; background:#EEE; background-color:rgba(255, 255,...