In a previous course, Craig Campbell taught us how to design effective navigation elements. Now he takes us through building the designs and developing them into navigation bars.
1.Welcome
1.1Course Overview03:24
1.1
Course Overview
03:24
2.Project 1: Simple Navigation Menu
2.1Coding the HTML (Simple Navigation Menu)10:40
2.1
Coding the HTML (Simple Navigation Menu)
10:40
2.2Normalizing Browser Styles02:56
2.2
Normalizing Browser Styles
02:56
2.3CSS For the Content Layout06:51
2.3
CSS For the Content Layout
06:51
2.4Styling the Nav Text (Simple Navigation Menu)09:38
2.4
Styling the Nav Text (Simple Navigation Menu)
09:38
2.5Button Layout08:04
2.5
Button Layout
08:04
2.6Menu Background and Borders08:39
2.6
Menu Background and Borders
08:39
2.7Expanding Link Boundaries07:59
2.7
Expanding Link Boundaries
07:59
2.8Hover States (Simple Navigation Menu)02:49
2.8
Hover States (Simple Navigation Menu)
02:49
2.9Marking Up the Drop Downs05:01
2.9
Marking Up the Drop Downs
05:01
3.Project 2: Image-based Navigation
3.1Styling the Drop Down Menus (Image-based Navigation)07:58
3.1
Styling the Drop Down Menus (Image-based Navigation)
07:58
3.2Making the Drop Downs Work08:17
3.2
Making the Drop Downs Work
08:17
3.3Slicing Up the Images12:36
3.3
Slicing Up the Images
12:36
3.4Coding the HTML (Image-based Navigation)07:19
3.4
Coding the HTML (Image-based Navigation)
07:19
3.5Styling the Content Layout03:09
3.5
Styling the Content Layout
03:09
3.6Styling the Nav Text (Image-based Navigation)04:34
3.6
Styling the Nav Text (Image-based Navigation)
04:34
3.7Button Backgrounds07:19
3.7
Button Backgrounds
07:19
3.8Social Media Buttons08:16
3.8
Social Media Buttons
08:16
3.9Finishing the Header06:43
3.9
Finishing the Header
06:43
3.10Hover States (Image-based Navigation)07:44
3.10
Hover States (Image-based Navigation)
07:44
3.11Designing the Drop Down Menus07:54
3.11
Designing the Drop Down Menus
07:54
3.12Functional Drop Down Menus04:17
3.12
Functional Drop Down Menus
04:17
4.Project 3: Vertical Navigation With Jquery
4.1Preparing the Images10:43
4.1
Preparing the Images
10:43
4.2Coding the Navigation05:22
4.2
Coding the Navigation
05:22
4.3Laying Out the Page04:00
4.3
Laying Out the Page
04:00
4.4Styling the Drop Down Text03:44
4.4
Styling the Drop Down Text
03:44
4.5Swapping Text for Images10:56
4.5
Swapping Text for Images
10:56
4.6Hover States (Vertical Navigation With Jquery)06:32
4.6
Hover States (Vertical Navigation With Jquery)
06:32
4.7Styling the Drop Down Menus (Vertical Navigation With Jquery)06:57
4.7
Styling the Drop Down Menus (Vertical Navigation With Jquery)
06:57
4.8Inserting jQuery05:43
4.8
Inserting jQuery
05:43
4.9Animated Drop Downs with jQuery09:21
4.9
Animated Drop Downs with jQuery
09:21
5.Finishing Up
5.1Final Thoughts01:34
5.1
Final Thoughts
01:34
