Let's create our navigation structure and basic animation by performing the following steps:
We'll start by creating a new document based on our template file from the first chapter, naming it
navigation-animation1.html
and saving it in ourjquery-animation
directory.Next, we'll need to add the jQuery UI library after our jQuery library by adding this line:
<script src="js/jquery-ui.min.js"></script>
Then, we will add the following HTML code into our newly created document under the
<body>
tag:<nav> <a href="#">Link1</a> <a href="#">Link2</a> <a href="#">Link3</a> <a href="#">Link4</a> <a href="#">Link5</a> <a href="#">Link6</a> <a href="#">Link7</a> </nav>
Save the following code to a file
navigation-animation1.css
and link it to our HTML document:nav a { display:block; float:left; padding:5px 10px; background:#DDD...