From the course: Creating a Responsive Web Design: Advanced Techniques
Unlock this course with a free trial
Join today to access over 22,400 courses taught by industry experts.
Adding JavaScript and jQuery to your project - CSS Tutorial
From the course: Creating a Responsive Web Design: Advanced Techniques
Adding JavaScript and jQuery to your project
- [Voiceover] So now that we have our layout adjusted across all of the different screen sizes, and we have our Mobile Menu showing up on the smallest of sizes, now we're ready to add some additional user interaction and animation with JavaScript. So let's go back to our Project file and the Exercise files. So in the main Project folder, let's create a new folder inside of here called JS for JavaScript. Then let's come over to the Exercise files, let's come into the CH_01 folder, let's find the Design.js file, and let's option drag, or copy and paste this Design.js file into the JS folder that we just created. Now this file is mostly blank, so let's open Design.js up in our Text Editor, we'll see here that I simply just have a JavaScript comment here that just says JavaScript Document. We're going to write our custom JavaScript inside of this file. Now as I mentioned before, we're going to be using jQuery in this course, in order to create the interactions and the animations of the…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
About this lesson46s
-
Relocating the nav element4m 33s
-
Adding a mobile link button4m 43s
-
Removing the header height restrictions2m 2s
-
Restyling the mobile menu2m 22s
-
Adjusting the logo to overlap the menu3m 58s
-
Adding JavaScript and jQuery to your project5m 32s
-
Attaching a click event to the mobile menu button4m 4s
-
Animating the height of the navigation4m 51s
-
Removing the style attribute from the nav element5m 21s
-
Where to go from here25s
-
-
-