Adding Active States to the Navigation4:29 with Alena Holligan
We can use conditionals and variables to make further changes to the HTML output on different pages. In this video, we’ll add a new variable and use a conditional to check its value in our main navigation menu.
Update to html
index.php unordered list for our random items should have a class of "items".
If you forget to add the $section variable to a page, you could see an error. This is why we set "$section = null;" on the index page. If you want to make sure you code works without an error even if $section is not defined, you could include the isset function in you if statement as well.
if (isset($section) && $section == "books")
Great job. You've created a header and a footer, 0:00 used variables and conditionals to make the site easier to build and maintain. 0:03 There is one final thing that we want to add to our navigation. 0:07 We'll use conditionals again in our header file and 0:10 get the appropriate link underlined. 0:13 Let's go into WorkSpaces and take a look at header.php. 0:16 I've coded the CSS file to underline links in the navigation with a particular class, 0:20 a class of on. 0:24 Adding the class to our navigation link will make our links underlined, but 0:27 we can't just add this class in plain html or the link would underline on every page. 0:30 Instead, we need to add it with PHP in a conditional. 0:35 We need a variable that tells us what section we're in. 0:39 If we're in the book section, we can add the class to the books link. 0:43 Let's open up catalog.php and create a variable for this. 0:46 Right after this line where we assign page title, a value of full catalog, 0:51 we're going to add $section = null for 0:56 default, because by default, we're not showing any of our specific categories, 1:03 we're just showing the full catalog, so we don't need anything to be underlined. 1:09 Remember to use the single equals sign here when assigning a value. 1:13 We also need to change that variable in our conditional block. 1:17 In our book section let's add a variable here and assign it a value of books. 1:21 And movies, we'll add it again 1:31 with the value of movies and finally in music. 1:37 We'll add section again with a value of music. 1:44 Back in our header.php file, 1:50 we can write a conditional to check the value of the section variable. 1:53 Let me give you a word of caution. 1:57 It can get a little confusing writing PHP code that 1:58 conditionally generates the piece of HTML. 2:01 In a case like this, I would recommend adding the plain HTML that you want first, 2:03 before writing the PHP code. 2:09 So right now, we have on here. 2:12 So we're going to add our PHP code. 2:15 Open our page p block, and we're going to start by just echoing out, space, on, 2:17 in quotes and with a semicolon, and close out our PHP. 2:25 Now we want to add our conditional. 2:32 So, we'll add if, $section, and we 2:34 want to make sure we use our double equal sign because we're doing a comparison, 2:39 equals "books", then we want to echo out are on. 2:44 Now let's copy all of this and paste it into movies 2:55 and change this to movies, paste it here and 3:02 change it to music and finally paste it into suggest and change it to suggest. 3:08 The last one checks if the section variable has a value of suggest. 3:16 Then we wanna mark this link as active. 3:20 Of course we also have to set that variable on the suggest page, 3:23 so let's open suggest and let's assign the variable right after our page title again. 3:25 Section equals suggest. 3:30 Great. 3:35 Now, even though we're not using underlining in our navigation for the index page, 3:36 we need to add the variable there, as well, to prevent errors. 3:40 So open index.php and assign a value of null. 3:43 Index dot page P, $section equals null. 3:47 Great, now let's save all of these pages. 3:53 Now we'll go into our browser and refresh the page. 3:57 And we see that books is underlined. 4:00 We click movies, music and suggest. 4:03 And when we click on back to our homepage nothing is underlined. 4:08 Were making some great progress on our media library. 4:13 We have three different web pages in place. 4:16 And we've learned about variables and conditionals. 4:18 We'll spend some time on the catalog itself in the next set of videos. 4:21 Populating some of the actual data and playing with arrays. 4:25
You need to sign up for Treehouse in order to download course files.Sign up