Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,630 --> 00:00:06,800
Now there's one last feature that we need to take a look at before our menu is completely finished.
2
00:00:07,790 --> 00:00:15,670
You notice that we are on the mobile apps page and the mobile apps tab here is marked as selected and
3
00:00:15,670 --> 00:00:22,010
we are on the mobile apps route and the mobile apps content is being rendered and the services tab is
4
00:00:22,010 --> 00:00:23,920
marked as active.
5
00:00:23,930 --> 00:00:31,640
So if we go ahead and now refresh the page you'll see we are actually sent back to the home page for
6
00:00:31,640 --> 00:00:38,510
the active tab while the route in the U.R.L. and the content on the page is still being rendered as
7
00:00:38,510 --> 00:00:46,400
the mobile apps page if we hover over the services tab you'll also see that the mobile app development
8
00:00:46,460 --> 00:00:54,230
menu item is also not selected because the active value is set to zero for the Home tab.
9
00:00:54,230 --> 00:01:02,660
So that means we need to come up here and where we added the EU's effect a function to fix the styling
10
00:01:02,660 --> 00:01:05,660
of the active tab when the page refreshes.
11
00:01:05,750 --> 00:01:10,160
We need to go ahead and add our individual services pages.
12
00:01:10,160 --> 00:01:19,940
So the custom software mobile apps and Web site routes to this fix is getting quite verbose though as
13
00:01:19,940 --> 00:01:21,090
you can see here.
14
00:01:21,140 --> 00:01:28,000
And so I actually want to refactor this a little bit into a javascript switch statement.
15
00:01:28,070 --> 00:01:36,410
I'll move this over and here we're going to just switch over the window dot location dot path name and
16
00:01:36,440 --> 00:01:40,750
open loops open that up.
17
00:01:40,840 --> 00:01:50,200
Now we can set a case for each route that may appear starting with the slash route and then we will
18
00:01:50,230 --> 00:02:00,600
open that with a colon and inside here is where we can check if the value is not set to 0.
19
00:02:00,610 --> 00:02:05,860
So this is the check that we were doing here to make sure that we're not already set to the correct
20
00:02:05,860 --> 00:02:10,180
page which will help prevent unnecessary re rendering.
21
00:02:10,180 --> 00:02:18,770
And so if the correct page is not already set let's go ahead and set the value to the correct page we
22
00:02:18,770 --> 00:02:25,750
can go ahead and actually copy all of this and we'll go ahead and paste that underneath.
23
00:02:25,760 --> 00:02:32,280
And just one underneath here and then we can fix can ignore those for a second.
24
00:02:32,360 --> 00:02:38,840
We can fix the spacing there with a shift tab to move it backwards and it's complaining here that we
25
00:02:38,840 --> 00:02:41,010
don't have a default case.
26
00:02:41,090 --> 00:02:48,500
And so let's real quick add underneath this a default and we'll just make this break the only way you
27
00:02:48,500 --> 00:02:53,840
would fall to this case is if you're trying to access a page that doesn't exist any way in which case
28
00:02:53,840 --> 00:02:56,900
we don't really need to worry about setting an active tab.
29
00:02:56,900 --> 00:03:04,190
But let's go and change this case here now to slash services and of course that means the value of one
30
00:03:04,400 --> 00:03:08,840
needs to be checked as well as setting the value to one if it isn't already.
31
00:03:09,140 --> 00:03:15,230
And we'll go ahead and repeat this process for all of the rest of the routes and then include the new
32
00:03:15,230 --> 00:03:17,460
routes that we have not already.
33
00:03:17,480 --> 00:03:19,450
So let's actually just do that.
34
00:03:19,460 --> 00:03:26,480
Here underneath the services with custom software and we're going to make sure that we're still checking
35
00:03:26,480 --> 00:03:35,180
for one because we want the active tab set to services but then inside of the services menu we want
36
00:03:35,240 --> 00:03:40,790
the correct custom software menu item to be marked as selected.
37
00:03:40,790 --> 00:03:49,340
So here we also want to go ahead and set our selected index also to one.
38
00:03:49,550 --> 00:03:57,200
This is because on our menu the custom software development is in the second position which if you're
39
00:03:57,200 --> 00:04:01,710
counting from 0 is 0 and 1 the first position.
40
00:04:01,730 --> 00:04:09,470
Now this also is showing us that we need to set the 0 with a position for services if that's selected.
41
00:04:09,470 --> 00:04:18,920
So what's come up here and also set the set selected index to 0 this time for the first option in the
42
00:04:18,920 --> 00:04:28,310
menu which is these services menu item will continue and come down and set a case for these slash mobile
43
00:04:28,310 --> 00:04:38,840
apps page and set that equal to again check if the value is on these services page so set to 1 and then
44
00:04:38,840 --> 00:04:48,200
if it is not we will set our value to 1 and then we'll set these selected index to 2 which will then
45
00:04:48,200 --> 00:04:55,610
mark the mobile apps page as selected in the menu again will come down below and we'll create another
46
00:04:55,610 --> 00:05:06,780
case for the slash Web sites page and we'll open this up check if we are on the services tab open this
47
00:05:06,820 --> 00:05:15,340
and if we are not let's set us to these services tab and then let's set these selected index for our
48
00:05:15,340 --> 00:05:17,770
menu to 3.
49
00:05:17,860 --> 00:05:26,680
Now this should appropriately handle setting the active menu items anytime we refresh along with setting
50
00:05:26,680 --> 00:05:34,940
the correct active tab for whichever page we're on so let's continue for the rest of the regular pages
51
00:05:35,270 --> 00:05:47,210
with a case for Slash slash revolution and this we'll be checking for it if the value wipes value is
52
00:05:47,210 --> 00:05:57,520
not already set to 2 Well then we want to go ahead and set the value to to that's all we'll do there
53
00:05:57,940 --> 00:06:06,580
and then we'll come down below and we will case for these slash about and it looks actually I think
54
00:06:06,580 --> 00:06:08,230
that this is in the wrong place.
55
00:06:08,230 --> 00:06:08,520
Yeah.
56
00:06:08,530 --> 00:06:15,520
Make sure that you are getting underneath all of the correct brackets and then set another case for
57
00:06:15,520 --> 00:06:18,670
Slash about to this time.
58
00:06:18,700 --> 00:06:26,770
Check if we are on if we are not already not already on the third page.
59
00:06:26,770 --> 00:06:30,940
Well then of course we're going to set the value to the third page.
60
00:06:30,940 --> 00:06:32,770
Do the same thing again.
61
00:06:32,800 --> 00:06:37,020
Case for Slash contact.
62
00:06:37,030 --> 00:06:37,700
Open it up.
63
00:06:38,620 --> 00:06:50,050
And if the value is not equal to our fourth tab size only put an array there.
64
00:06:50,050 --> 00:06:51,150
Make it an object.
65
00:06:51,160 --> 00:06:54,580
Then we're going to set the value to the fourth tab.
66
00:06:54,580 --> 00:07:02,410
And one last time you finally made it through the case for the slash estimate page which we will then
67
00:07:02,470 --> 00:07:05,590
set our value to five.
68
00:07:05,610 --> 00:07:11,700
Well make sure we're getting the if statement if our value is not already set to five.
69
00:07:11,730 --> 00:07:21,020
Well then then we're going to set the value to five five okay.
70
00:07:21,050 --> 00:07:23,780
Now you're all probably yelling at me to get rid of these.
71
00:07:23,840 --> 00:07:25,280
Yes lint errors.
72
00:07:25,310 --> 00:07:28,760
It's telling me we need our break statements in here.
73
00:07:28,760 --> 00:07:35,300
And so if we do not put in a break statement then our code could possibly run multiple of these cases
74
00:07:35,540 --> 00:07:43,470
which we definitely do not want to do so outside of our if statements will add a break which will kick
75
00:07:43,470 --> 00:07:44,880
us out of the switch.
76
00:07:44,910 --> 00:07:54,160
If we do not need to do anything and let's make sure we get our case up here with a break and then here
77
00:07:54,430 --> 00:08:01,690
with the brink mobile apps needs a break websites can take a break
78
00:08:10,680 --> 00:08:20,710
break Mr. brick then break ups break down here.
79
00:08:24,690 --> 00:08:29,640
We'll break right here and still not liking the sand.
80
00:08:29,640 --> 00:08:30,680
I think I missed something.
81
00:08:31,260 --> 00:08:35,520
I think I need a break inside of here as well.
82
00:08:36,980 --> 00:08:38,390
No no.
83
00:08:38,420 --> 00:08:47,990
Oh I think the here I need the break statement inside of this parentheses and then get rid of that.
84
00:08:47,990 --> 00:08:48,750
There we go.
85
00:08:48,890 --> 00:08:49,300
OK.
86
00:08:49,310 --> 00:09:01,310
So make sure here that you're putting these brake statements within yeah within that brackets up here.
87
00:09:01,910 --> 00:09:05,390
So just make sure you're getting these in the right places.
88
00:09:05,390 --> 00:09:08,050
Hopefully I did not confuse you too much.
89
00:09:08,240 --> 00:09:10,230
And there it looks like.
90
00:09:10,280 --> 00:09:14,820
I think we're good Oh I see why I did something weird.
91
00:09:14,830 --> 00:09:19,780
I don't know why I added these extra brackets here after the colon.
92
00:09:19,780 --> 00:09:21,000
You don't need those.
93
00:09:21,040 --> 00:09:26,520
So make sure to get rid of those and that's why it was being so weird with us.
94
00:09:26,680 --> 00:09:29,260
Got those here on these last couple ones.
95
00:09:29,260 --> 00:09:33,560
It looks like so yeah get rid of those rid of those.
96
00:09:33,580 --> 00:09:37,590
I knew that I'd missed something up and there now looks like we're good.
97
00:09:37,600 --> 00:09:45,550
So you just need the case the path a colon and then underneath that the if statement open that up and
98
00:09:45,550 --> 00:09:52,830
then outside of the if statement a break let's go ahead and save this now and the page will refresh.
99
00:09:52,840 --> 00:09:58,050
And so we see the services tab is correctly being set again.
100
00:09:58,150 --> 00:10:04,100
And if we hover over it the mobile app development page is already selected.
101
00:10:04,120 --> 00:10:07,860
So if we come over to home we go over and we hover.
102
00:10:07,870 --> 00:10:10,330
So nothing is selected.
103
00:10:10,490 --> 00:10:16,640
Go to Web site development Web site development is set in the U.R.L. and on the page.
104
00:10:16,660 --> 00:10:20,860
And if we hover over services we see that it is selected.
105
00:10:20,860 --> 00:10:27,760
So let's go ahead now and refresh the page and you see we still have these services tab being marked
106
00:10:27,760 --> 00:10:28,470
active.
107
00:10:28,540 --> 00:10:30,320
We're still on the right path.
108
00:10:30,370 --> 00:10:32,130
We're still rendering the right content.
109
00:10:32,440 --> 00:10:37,880
And if we hover over the menu we're still marking the Web site page as being selected.
110
00:10:37,900 --> 00:10:44,950
So I think that that is all of the functionality and probably then some that we needed for our menu
111
00:10:45,160 --> 00:10:50,860
to really create a dynamic and versatile component.
112
00:10:50,960 --> 00:10:55,600
I'm really happy with the way that this looks and the functionality behind it.
113
00:10:55,730 --> 00:11:03,170
And I think it just adds a nice little touch of interactivity to an otherwise more static experience.
114
00:11:03,170 --> 00:11:05,760
So hopefully you really like that too.
115
00:11:05,780 --> 00:11:09,020
Hopefully that wasn't too confusing to set up.
116
00:11:09,110 --> 00:11:14,870
And if you need to just go through and really read over your code again and look at how the values are
117
00:11:14,870 --> 00:11:22,880
being passed and remember that it's really just managing indexes of whether or not we are on the first
118
00:11:22,880 --> 00:11:30,080
second third or fourth menu item or the first second third fourth or fifth tab and it's all just about
119
00:11:30,080 --> 00:11:37,360
making sure that these values are set correctly at the correct times so we really have done a great
120
00:11:37,360 --> 00:11:43,570
job getting this up I think it looks great and now we need to start addressing a problem there.
121
00:11:43,570 --> 00:11:48,730
I'm sure you're eager to take a look at which is responsive design.
122
00:11:48,730 --> 00:11:55,840
And right now I haven't done it yet but if you resize our browser and you start coming down well pretty
123
00:11:55,840 --> 00:12:01,930
quickly you see our design kind of starts falling apart and it really does not look anything at all
124
00:12:01,960 --> 00:12:09,630
like a production application is supposed to so to take a look at how we can start fixing this and making
125
00:12:09,630 --> 00:12:17,280
sure that the page starts resizing correctly and giving us a correct header for smaller screen sizes.
126
00:12:17,610 --> 00:12:21,330
Let's take a look at responsive design in the next video.
13782
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Akan
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bemba
Bengali
Bihari
Bosnian
Breton
Bulgarian
Cambodian
Catalan
Cebuano
Cherokee
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Faroese
Finnish
Galician
Georgian
German
Greek
Guarani
Haitian Creole
Hausa
Hawaiian
Hebrew
Hmong
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Kinyarwanda
Kirundi
Kongo
Korean
Krio (Sierra Leone)
Kurdish
Kyrgyz
Laothian
Latin
Latvian
Lithuanian
Luganda
Luo
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mauritian Creole
Moldavian
Mongolian
Myanmar (Burmese)
Montenegrin
Nepali
Norwegian
Pashto
Polish
Portuguese (Brazil)
Portuguese (Portugal)
Quechua
Romanian
Romansh
Russian
Samoan
Scots Gaelic
Serbian
Sesotho
Setswana
Seychellois Creole
Shona
Sindhi
Sinhalese
Slovak
Slovenian
Somali
Spanish
Swedish
Tajik
Thai
Tigrinya
Tonga
Turkish
Turkmen
Ukrainian
Uzbek
Vietnamese
Welsh
Wolof