Viewers: in countries Watching now:
Now that we've carefully styled our menu, it looks exactly the way we want, and it also works really well as long as we're using a mouse. The problem is if you try to navigate this menu using other means, let's say a keyboard. You'll see that although I can navigate the main menu, when I get to the menu items that have drop down items like about the test or level one. I can't access the drop down items and this is a very common problem you'll run into all over the web all of the time. Menus are great as long as you're using a mouse, but they're not very accessible.
So we need to make our menus accessible because we don't know how people are going to access this theme. They may use a mouse, but they may also use a keyboard or a text-to speech browser or something else. Or they may just have trouble using their mouse. because for example, if you try to navigate to the sub-menu here. And you're not careful you might drop the menu before you get to it. So it's actually really annoying to work with if you don't have a very adequate mouse or if you have reduced motor skills. A lot of work has been done on making menus responsive and the best solution I've been able to find is one called Super Fish.
So here I have the folder. That comes from Superfish. It's called Superfish Master. And inside you have lots of files. So the only file we actually need here is under the dist folder and under js and it's called superfish.men.js. Now I'm going to take this file and copy it into my theme. So here I have my WordPress install on the right. Then I'm going to go to WP content > Themes > my simone > JS. And here, I'm going to copy superfishmn.js and paste it into my theme, so that it becomes available to the theme.
So here I'll place it directly above my samone navigation. Because this is also related to navigation. And here you'll see that I set the handle for this enqueue function to my_simone_superfish. I am calling the JS folder and superfish.min.js. This script depends on JQuery. So I've set JQuery as a dependency and I'm going to set the version number to today's date. So that's 2014/04/04. And finally, I'm loading the script in the footer. Now I can save functions on PHP.
And go back to my browser and I have to make sure that the script is loading properly now, so that my on Q function works. So, reload the page and then I will click anywhere and inspect element to open the developer tools. And here I will go to Resources> Frames > Local Hosts. Scripts and see if superfish min .js appears. And it does which means we now have it enqueueed into our site. But now super fish just sits there and does nothing. We need to actively tell it what to do.
So that's the class that we want to target. Now I need to go back to WordPress, and here I have to create a new file. So I'll go to the JS folder. And here, I'll create a new file by right-clicking on the folder. So selecting New, and I want to create a Java script file. So I'm going to call this file superfish settings. And this file is now going to contain the superfish settings. I've already prepared the settings for you, so. You can go back to the code snippets and here you have the superfish-settings.js script.
And I'll copy it and paste it in and then I'll explain to you exactly how this works. In this file we start off by saying this is the jQuery function. We set a variable called SF, which is a super fish variable. And we say that that variable is matching the UL, so the unordered list, with the class nav menu. So that, you'll remember, is the unordered list that wraps the entire menu. Then we say, on this item, so on the variable SF, run superfish. And you set the delay to 200 and the speed to fast.
I'll show you what that means in one second. So I'm going to save this file, now we have the settings for Superfish. But of course, they live in a separate file here. So we need to en queue that file as well. So I'll go back to functions.php, and I'll go back to my code snippets, and copy out the second function here. And paste it in directly below my simone superfish. And here I'll show you something really neat. So here I'm enqueuing a new script called my simone superfish settings. It works the same way, here we have a template directory, and we're calling js superfish settings.
And if I go out of it, it takes a little while before it collapses. So this addresses that issue I was talking about where you accidentally leave the menu. And this is that value that was saying delay. And also how fast it operates. So here you can go back to your settings and if you want the delay to be longer you just increase the number here. And if you want the speed of the fade in and out to be slower, you can just change it from fast to slow. But more importantly, if I now use my keyboard to navigate through my menu. You'll see when we get to a drop down menu, the drop down opens.
And now we can go through each of the menu items. And, when we get to a drop down menu with a submenu, then we can go through those items. So now, we have a fully accessible menu all thanks to Superfish.
There are currently no FAQs about WordPress: Building Themes from Scratch Using Underscores.
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.