1 00:00:02,160 --> 00:00:04,180 This is the current state 2 00:00:04,180 --> 00:00:06,900 of the mobile view of our website. 3 00:00:06,900 --> 00:00:11,650 So the header only consists of the web food logo. 4 00:00:11,650 --> 00:00:15,100 To implement the mobile design, as intended, 5 00:00:15,100 --> 00:00:18,570 we have to follow three crucial steps. 6 00:00:18,570 --> 00:00:23,040 Step one is the creation and implementation 7 00:00:23,040 --> 00:00:25,400 of a clickable hamburger button 8 00:00:25,400 --> 00:00:28,320 or hamburger icon in the mobile view. 9 00:00:28,320 --> 00:00:30,410 It's called hamburger because it consists 10 00:00:30,410 --> 00:00:32,670 of three horizontal lines, 11 00:00:32,670 --> 00:00:35,610 which kind of look like a hamburger with the bun 12 00:00:35,610 --> 00:00:36,750 and then the meat inside. 13 00:00:36,750 --> 00:00:39,860 So this is where this name is coming from. 14 00:00:39,860 --> 00:00:43,650 This is nothing new actually from a conceptual perspective. 15 00:00:43,650 --> 00:00:47,900 We just need a container which will contain three elements. 16 00:00:47,900 --> 00:00:50,710 Spans are the elements we're going to use, 17 00:00:50,710 --> 00:00:55,040 which will be formatted to be of a white background color 18 00:00:55,040 --> 00:00:58,390 to be able to represent this hamburger look. 19 00:00:58,390 --> 00:00:59,470 This is step one. 20 00:00:59,470 --> 00:01:02,420 So this button which should only be visible 21 00:01:02,420 --> 00:01:05,200 in the mobile view of our website. 22 00:01:05,200 --> 00:01:07,700 Step two is a bit more advanced. 23 00:01:07,700 --> 00:01:09,310 Here we have to make sure 24 00:01:09,310 --> 00:01:11,560 that once we click onto this button. 25 00:01:11,560 --> 00:01:13,710 So if we do the first click, 26 00:01:13,710 --> 00:01:17,430 then the so-called side drawer should open. 27 00:01:17,430 --> 00:01:21,980 The side drawer is the highlighted part on the right side. 28 00:01:21,980 --> 00:01:26,390 Now, as you see, the web food logo should also disappear, 29 00:01:26,390 --> 00:01:27,900 but this is something we know already, 30 00:01:27,900 --> 00:01:29,920 so nothing complicated here. 31 00:01:29,920 --> 00:01:33,400 But we have to be able to kind of create this new look 32 00:01:33,400 --> 00:01:35,910 if we click onto this hamburger button. 33 00:01:35,910 --> 00:01:37,550 That's step two. 34 00:01:37,550 --> 00:01:40,380 Step three will then be another click 35 00:01:40,380 --> 00:01:42,310 onto this hamburger button 36 00:01:42,310 --> 00:01:44,890 and with this click, the side drawer, 37 00:01:44,890 --> 00:01:47,430 so these manual with the two navigation items, 38 00:01:47,430 --> 00:01:51,550 should be closed and we should be back at the initial state. 39 00:01:51,550 --> 00:01:53,870 Of course, if we click the button once again, 40 00:01:53,870 --> 00:01:55,610 then the side drawer should open. 41 00:01:55,610 --> 00:01:56,990 If I click it another time, 42 00:01:56,990 --> 00:01:59,380 then it should be closed and so on. 43 00:01:59,380 --> 00:02:03,370 This is what you want to implement in the next lectures. 44 00:02:03,370 --> 00:02:06,210 Now to achieve this, we have two new topics 45 00:02:06,210 --> 00:02:08,039 which we will discover. 46 00:02:08,039 --> 00:02:11,530 The first topic are so-called internal links. 47 00:02:11,530 --> 00:02:14,980 This does not mean links to other pages of our website. 48 00:02:14,980 --> 00:02:16,840 We did this already throughout the course, 49 00:02:16,840 --> 00:02:19,810 but links on the existing website, 50 00:02:19,810 --> 00:02:22,423 on the existing page to be more precise. 51 00:02:23,390 --> 00:02:26,210 Such links, just as links to other pages 52 00:02:26,210 --> 00:02:29,360 of an existing website or links to other websites, 53 00:02:29,360 --> 00:02:32,740 are added to the URL in the browser. 54 00:02:32,740 --> 00:02:36,350 So we can define an ID on our anchor tag, 55 00:02:36,350 --> 00:02:37,750 which is a link in the end, 56 00:02:37,750 --> 00:02:40,790 and this ID will be added to the browser then. 57 00:02:40,790 --> 00:02:41,890 This looks something like this. 58 00:02:41,890 --> 00:02:46,890 We have a hyper reference with the ID added as an attribute. 59 00:02:47,060 --> 00:02:50,050 Now you don't have to understand this fully at this stage. 60 00:02:50,050 --> 00:02:51,890 It's just a theoretical introduction 61 00:02:51,890 --> 00:02:54,630 to what we expect in these next lectures, 62 00:02:54,630 --> 00:02:58,510 because besides being able to create such internal links, 63 00:02:58,510 --> 00:03:00,410 we also have to define what should 64 00:03:00,410 --> 00:03:04,030 be displayed once clicking onto this internal link. 65 00:03:04,030 --> 00:03:06,650 This will also be something that we will discover 66 00:03:06,650 --> 00:03:08,983 with the so-called target selector. 67 00:03:09,850 --> 00:03:13,530 The target selector simply means that certain CSS rules, 68 00:03:13,530 --> 00:03:18,080 which we defined, will be applied if the defined ID 69 00:03:18,080 --> 00:03:20,130 is selected in the URL. 70 00:03:20,130 --> 00:03:24,150 So if we click onto this internal link, then the URL changes 71 00:03:24,150 --> 00:03:26,530 and with that we can change the styling 72 00:03:26,530 --> 00:03:28,933 of specific parts of the website. 73 00:03:29,870 --> 00:03:32,430 This is what the target selector will look like. 74 00:03:32,430 --> 00:03:35,400 So we refer to the ID that we added 75 00:03:35,400 --> 00:03:39,260 in the internal link and add colon target to it. 76 00:03:39,260 --> 00:03:41,480 That's another pseudo selector here, by the way, 77 00:03:41,480 --> 00:03:45,033 just as hover, which we know already throughout this course. 78 00:03:46,080 --> 00:03:48,660 So this probably doesn't make too much sense 79 00:03:48,660 --> 00:03:49,890 at the moment for you. 80 00:03:49,890 --> 00:03:52,340 Therefore we have this three-step process 81 00:03:52,340 --> 00:03:54,070 creating the icon or the button, 82 00:03:54,070 --> 00:03:55,680 which is rather straight forward, 83 00:03:55,680 --> 00:03:58,070 then making sure that once we click the button, 84 00:03:58,070 --> 00:04:00,900 this new manual side drawer is opened. 85 00:04:00,900 --> 00:04:03,950 And once we click it again, it is closed again. 86 00:04:03,950 --> 00:04:07,350 All done by using the concepts of internal links 87 00:04:07,350 --> 00:04:09,460 and of this target selector. 88 00:04:09,460 --> 00:04:11,670 So let's start with the easier part 89 00:04:11,670 --> 00:04:14,423 and that's the creation of the hamburger button.