Join Jen Kramer for an in-depth discussion in this video Configure top bar, the basic navigation bar, part of Learning Foundation 6.
- [Instructor] Finally, let's take a look at some navigation. One of the obvious things that was missing on the couple of webpages that we've been building so far is the navigation bar. And so I have gone ahead and added that for you and as you see here it's an unordered list in all its glory and you can find this file inside of the exercise files for this particular video. Go on ahead and copy index.html from your exercise files into your working folder. Now, if you take a look at navigation here in the Foundation documentation, go over to navigation and you'll notice that a whole bunch of stuff will pop up underneath for navigation.
Because of course navigation is really critical to webpages, there are many different ways that navigation can be formatted. Foundation's philosophy on navigation is that each of these particular patterns is its own independent standalone item, but they can, for the most part, be combined with other patterns. So, for example, we could have dropdowns at some particular break points and we can have drilldowns at other break points in the process.
That is really important to understand about Foundation and its documentation here. The way it's setup it looks like you can only have dropdown menus and then you can only have drilldown menus and it gets very frustrating along the way. They do not necessarily do a very good of showing how these things can be combined so you need to know that you can combine these particular patterns and I'm going to walk you through how do that over the course of this particular chapter. So, first of all, the menu patterns are right here and this is just basic styling of an unordered list.
So, as you can see here, you can add classes to make your menus go horizontal with very little styling at all and no responsiveness. Under menu, there is no responsive options here. You can align your menu items in different ways including centering them or pushing them to the left or the right. You can expand them in your navigation bar. You can make them go vertical. There's a whole bunch of different options here. But what we actually probably want our navigation to look like is an actual navigation bar so over here in the documentation, go to the top bar option and scroll on down the page here and you'll see it starts with a menu, but then to it we add a whole bunch of stuff and we wind up with a bar that actually looks like a bar so this is what we're going to do with our particular page.
If you go on ahead and open up index.html and scroll on down to the vicinity of line 18, here is the navigation for the website and located inside of the bar. What I'm going to do first is just set this up as a menu so under the ul here I'm going to say class of menu. That's all we need to do. If you go on ahead and save it and open this up in the web browser, you'll see that instantly it looks like a navigation menu instead of a series of bulleted list items.
We can easily indicate where we are in the navigation structure just by adding a class so here to my li, I will add a class of is hyphen active to the homepage item because that happens to be where we are in the website structure. If you go on ahead and save that and then refresh the webpage, you'll notice that we have a marker indicating where we are in the navigation structure. So, all of this is just basic stuff that's built in to the fundamental menu pattern inside of Foundation.
Now, to make this look like a bar, we add a couple of additional classes to make that happen. So, what we're going to do here is around the nav tag itself, we're going to add a div and we're going to give it a class of top hyphen bar and we'll end that div just after the nav tag and indent that just a little bit. And then for the nav itself, we're going to indicate where and how this particular top bar navigation should be aligned so we're going to say a class of top hyphen bar hyphen left because I want the navigation to be pushed to the left side here.
Now, if we go on ahead and save that and refresh our webpage, you'll see that we actually do have a top bar, the whole navigation bar here that actually looks like it's probably the main navigation for the website. If we start to shrink this down just by narrowing up the screen here, you'll notice though that the navigation bar is not responsive in any way. The navigation wraps on to a second line as we go. Top bar itself is not inherently a responsive pattern.
All top bar is is a navigation bar that goes horizontally and a little bit of shading behind it. So, in order to start adding responsiveness to it, we're going to have to add some additional code to make that happen.
- Working with the XY Grid system
- Adjusting margins and padding
- Block versus vertical grids
- Overriding CSS
- Including cards and callouts
- Customizing the navigation, including dropdown and drilldown menus