Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last movie, we made our navigation clickable. That is that we turned each one of the navigation items into a link and we'd click on the link. You could see that the URL would change up at the top. But, we didn't get any kind of user interface feedback in the navigation. Nothing in the navigation gave us an indication of what the currently selected page was. That's what I want us to look at in this movie, how we can go about highlighting the current page. So, the effect that I want is I want to be able to click on large widgets. And then, have some indication that I'm on the large widgets page in the navigation.
This is an important aspect of site navigation, because it orients our users. It allows them to know where they are. It's almost like those big maps that they have at the mall or at the airport. That say you are here, and there's a red dot letting you know where you are. You kind of have to find that dot first, in order to orient yourself and know where you want to go from there. It's kind of the same thing. We want users to know where they're located right now. So then they'll know what other pages are available to click on besides the one that they're on right now. The way that we're going to do that is I have a style in my Style Sheets already called Selected. And all it does is turn an item's font-weight into bold. So, if something has the class selected, then its font-weight is bold. So, let's just add that then to our navigation.
Let's find the spot here in managed content for our navigation. And I could edit a lot of places, but I'm going to put it on the li tag. So, if we're on a subject that's currently selected, we want li to have class equals select it just like that, let's just try this out. I know that we're doing every single subject right now, but let's just bring it up and take a look. And you can see that not only did it make the subjects bold, it made everything that's underneath it bold too. I don't want that, so I actually need to make a little change to my style sheet.
So, I'm going to go into Public.css. In addition to saying that, it's something that's selected. I'm also going to tell UL pages, the thing that's underneath, that it ought to have font weight of normal by default. And that should fix it. That'll tell it by default, be normal weight. Don't pick up the selected style unless you have been told specifically that you are selected. Let's go back and check it out. Reload the page, and sure enough, now just our subject is selected. That's what we were looking for. Okay, so now we've got it working for all of the subjects. So now, every single subject is selected.
But that's not what we want. What we want is just the currently selected subject to have this class. How do we say, if it selected, then add the class. What we do with an if statement, right? So, we need to use PHP to make an if statement that will then add this bit of text to the HTML if the item is selected. The way I'm going to do that is I'm going to take all of this and put the whole thing in PHP to start with. So, I'm just going to put quotes around it all and we'll open PHP tags. I'm also going to echo, semicolon at the end, there we go.
So now, I've brought into PHP. Notice that I've got double quotes opening it, and I'm using double quotes inside of it. So, I need to actually escape those double quotes. Anytime you use double quotes inside, you have to let it know that that's not the ending double quote. That's just a double quote that's inside. So now, the end result is exactly the same as what I had before. All I've done is take what was an HTML and put it into PHP instead. We're actually going to take this and break it up now into three parts. We're going to have the opening li, the closing of the li.
And in between will be this bit that I want to add, conditionally. So, I'm just going to put double quotes here, and I'll end that statement. And let's make a new one here, echo. Drop this down so they're kind of parallel. And then right here, right before that closing HTML bracket, I'm going to add another one. Make sure you've got all your semicolons. So now, li class selected, and then close the li tack. Still, the exact same thing that I had before, all I've done is break it up onto three lines. The output would be absolutely identical to what I had at the start. But, now I'm in a position where I can take this second line and I can put in a conditional.
So, if something is true, then echo class selected. If it's not true, then we'll just get the li tag. We'll have less than li greater than. That's it. So now, we need to write out conditional. So, when do we want to display it? We want to display it when the current subject ID as we're looping through, is equal to the selected subject ID. So, there's our current subject ID. We'll just grab that, and paste it up here. When that's equal to our selected subject ID from up there.
There we go. When those are equal, then market is being class selected. Let's go over and try that out. Save it. Let's reload our page. Now, we got to click on a subject About Widget Corp. Look at that, it stayed bold. Products stayed bold. Services, Today's Widget Trivia. These all stayed bold. Now, it doesn't do it for the pages though, just for the subjects. We have to do the same code. I'm just going to copy this. Let's jump down here to this li. We'll paste it in. But instead of subject ID, we're working with page.
In both cases, but the class is still the same, it's still selected. Now, let's go back and reload our page. Retrofitting stays selected, services, small widgets. Now we have that user interface feedback we're looking for. Our navigation now is responsive to our users, and it feels responsive. The user will feel like they're making a change and they can see that change happen right in front of them. It's a very reassuring feeling. Now that we've solved this problem, I want us to do a little bit more refactoring of the navigation.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101705 Viewers
61 Video lessons · 88460 Viewers
71 Video lessons · 72288 Viewers
56 Video lessons · 104011 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.