Menu Lists

[00:00:00]
>> Okay, so our last kind of list is the menu list. And I am going to open this up in a new tab for you. And so menu lists are designed to be used where you have a series of buttons. And this leads into a discussion about buttons versus links.

[00:00:21]
So let's talk about that first before we get into the styling. So the menu link or the, I'm sorry, the menu element is designed for interactive elements, like the HTML button element. In other words, anytime that clickable things in HTML, there's two of them, there's A, as in Ahref, and there are buttons, as in button, okay?

[00:00:51]
And the difference here is that A, Ahref, when you click that, you go somewhere. You go within the page, you go to another page on the site, you go to a page off site. It's a traveling kind of thing. We're going somewhere with links. When you click a button, HTML button, we are interested in executing something.

[00:01:12]
So generally speaking, there's gonna be some kind of JavaScript associated with those buttons. In whatever way you wanna do it, I'm not suggesting, here, we're trying to suggest that onclick is the way to do a button. I am not a JavaScript person. Don't pay any attention to me in that regard.

[00:01:28]
I actually copied this off of the MDN site as their example. But however it is that you're making these buttons, do their button thing, that is something that would wind up being marked up as specifically as a button. So here's an example of perhaps a button group, where we would be cut, copy, paste.

[00:01:47]
As I said earlier, an email, set of buttons where we had reply, reply all, forward, that kind of thing, that those groups of buttons are a great place to use this menu element. So that is the difference between A and button. And that is what menu is for.

[00:02:06]
I'll mention down here that those of you who are thinking about navigation, navigation is different, right? Navigation is an unordered list of links that goes somewhere else, usually on the same website, but occasionally, you might have one that goes off to social media or whatever else. Those are specifically going somewhere, when you click it, you're traveling to another page.

[00:02:31]
And so that type of navigation will be marked up with an unordered list, not with a menu list. Even though we call this a menu, that is not menu in the HTML definition of the term. Does that help? Sort of draw some bright lines between menu and navigation and buttons and links.

[00:02:52]
Sound good? Okay, so one of the popular things in frameworks like Bootstrap is styling a button group, right, where you have a cool looking little bar that's got all your buttons and it's got all your hover states. So let's go through how we might doing exactly that. And I'm gonna do it here using this menu with the class of group.

[00:03:18]
Let's go through how we can write our own styling for that without having to leverage a framework. Okay, so we'll start with our class of group, which is also the menu, that's the top level list. And, Here we go. We're gonna set this up. So we can say list-style-type: none, right?

[00:03:52]
That's usually the first thing that you're gonna wanna do, turn off the bullets. If you're not using a reset stylesheet, like normalize, etc., you're gonna say margin: 0, padding: 0, because you don't know what browsers are gonna do with that from place to place. Then you can say something like display: flex.

[00:04:16]
Of course, you could do grid with this too, that would be totally fine. But considering we have one row of buttons here, Flexbox is a perfectly reasonable choice for this. So display: flex, flex-flow: row wrap. And then we can justify-content in the center, because that's prettier, right? Okay, so that sort of gets our buttons all together.

[00:04:46]
The bones of the structure that we're looking for in terms of a button group. Then we can add styling to that. So within our menu group, we have a button, and that button probably needs some styling in order to look decent. So let's do that, button-color, oops, background-color:purple.

[00:05:15]
Color: white. So we have good contrast and we can read what's on there. Font-weight: bold, make it a little easier to see. We might juice up the font-size:1.2rem, okay? Those ugly little gray lines that go around those, that's our border. So we can say border: none. Remember a lot of the stuff, the styling was established back in the 90s when we were really into those beveled looking buttons.

[00:05:53]
A lot of that done with borders, so you can just kill that. Padding is 0.5rem, give it a little breathable space. And we can give it a margin, Of 1rem 0. So that'll just give us a little bit of room to get us off the edges of the box that goes around it.

[00:06:17]
Okay, Now, now comes the fun part. We love our rounded corners, don't we? And in a button group like this, we probably wanna round the corners of the outside buttons, don't we? Yeah, [LAUGH] that's exactly what they were just thinking over here. Okay, that's awesome, but we would like some rounded corners, please.

[00:06:46]
Well, you can leverage your old friends, last-child and first-child. And that's a great application here to put those right on these buttons. So let's take a look at that. We can say .group li:first-child button, right? The first list item and the button. Why didn't I just say button:first-child?

[00:07:15]
Why didn't I just say button:first-child? Cuz it is the first-child, right? No, So if I just said button:first-child and we'll set the background color to be blue, all of the buttons are blue. How can they all be first-children? Anybody have an answer to that?
>> Because all the buttons are first children of the list of items.

[00:07:59]
>> All the buttons are first children. They are children of the list item, and they're, in fact, only-child, last-child, or first-child will match those, [LAUGH] okay? So that's what's going on there, that's why you can't necessarily just say button:first-child. You're gonna wanna say li:first-child to select the first list item, as you can see there, and then we want the button.

[00:08:26]
And as always, feel free to throw in the background-color or something to make sure you're selecting the right one before you add additional styles to that. So now, what I can say is, now that I know I've got the right one, I could say padding on the left would be 1rem, give you a little bit more space on that side.

[00:08:47]
And then we can say our border-radius will be something like whatever makes you happy, you probably have a variable for this. Hopefully, you have a variable for this, because if you're rounding corners here, you're rounding corners everywhere, and they all have to be the same, that kind of lends itself to a variable.

[00:09:09]
But in any case, we wanna round just the top left and the top bottom, right? So by doing it this way, we have given us a little bit of extra room. We've rounded that, and then of course, as you can imagine, the last one is gonna look very much the same, right?

[00:09:30]
Except what am I gonna change here? Anybody have any ideas?
>> Li:last-child.
>> It's gonna be the last-child now, right? Then what?
>> Invert the border-radius to 0770.
>> Okay, change the border-radius, so it's 0770 because it's the opposite corners that we want rounded. Anything else?
>> You did padding-left, so padding-right.

[00:09:57]
>> Padding-right. There we go. Very pretty, okay? And now, here's the advantage. So when I decide that I wanna put in more buttons here, I don't know. The boss had me add it, [LAUGH] okay? So when you have to add more buttons to your menu, look, they're automatically styled, aren't they?

[00:10:30]
So even if I grab my paste, oops, grab my paste button here, And I want the boss had me style it, that's now my outside button. See how I don't have to mess around with any classes. Very nice, right? Makes your maintenance much, much easier, especially if you have other users who, well, I'm not sure that other users are gonna be adding buttons to your menu bar.

[00:10:56]
But who knows, maybe the UX person has to wind up having to add something or whatever and they're not quite sure exactly what you have going on for the programming. So this becomes very robust styling that just applies. How're you doing so far, okay? Okay, now, just to show you the difference here.

[00:11:23]
I forgot to add a hover state, didn't I? I didn't add a hover state to my buttons. So we can add that, .group button:hover, and that would be background-color: thistle. And I think I had a color there too. Yep, color: purple. So there we go. Now, you have your hover state there on the buttons too.

[00:11:56]
So fantastic. Now, here's the amazing thing. You just turned that into a button group. That's a pretty common pattern that you have for JavaScript based buttons. You can actually use this exact same CSS to apply to your navbar. You just need different selectors. This is one of the interesting things here.

[00:12:20]
So up here at the top, where we start with group, if we said nav ul, it applies all of those styles to our navigation, right? Be sure to look at your HTML if you're lost along the way here. We can then say for our group button, that's analogous to our nav a.

[00:12:46]
There they are. Nav a, yep, and we have a nav a hover down here. So we can hover over those buttons. And we have a, What would be the selector here, For our group li:first-child button? What would be the analog here in the navbar, For that selector? So, I'm gonna write a similar selector.

[00:13:28]
What's it gonna look like? Look something like nav li:first-child a, right? Nav li:last-child. So then the only things that were missing here that you have to worry about with a navigation bar, an actual navigation bar, as opposed to a button group is those underlines. So we could also say, nav a, a couple of two things, text-decoration: none; right?

[00:14:12]
We don't want those unsightly underlines. And then the other very, very important thing is to display: block. Why do we do that? Not only because it fits much nicer in its container, which is a side benefit, but because we wind up with big clickable areas. See how I can just hit the edge of my button there, and I've selected it, okay?

[00:14:38]
Without display: block on that a, a is inline. So therefore, I have to be over the text itself in order for it to be seen. So that is the benefit of adding display block on the A.
>> What's the difference between list-style-type: none and list-style: none?
>> There is no difference between list-style-type of none and list-style: none.

[00:15:04]
Originally, list-style was shorthand for a couple of image properties, I think it's list-style-type and list-style-image and a couple of other things that you could stack up together. Kind of the font property you can stack up inside of the single line of CSS, you can stack up a size and a color and font family and a line height.

[00:15:25]
You can put all that in the font family, list-style used to be that same kind of thing. But list-style-type are pretty interchangeable.
>> Why do we have menu li instead of menu ul or li?
>> Okay, because that's a great question. I'm glad you asked that. That's because menu is the actual type of list.

[00:15:48]
This is a new kind of list, the menu list. And so it's not a wrapper that you put around your ul's, it's like ul, ol, dl, and menu. Those are the analogous elements.
>> Could you please repeat the portion on why not to use the menu with a navigation links?

[00:16:12]
>> Yeah, so menu, semantically speaking, is designed for interactive lists. So in other words, a list it's gonna contain a bunch of things when you click a, we are not going to go somewhere else. Okay, so a link A, the link tag is designed to go somewhere else, whether that's within the page on your site or page off-site.

[00:16:35]
That's what that is all about. So we mark those up with an unordered list and with links. Menu, we use with buttons, and we are going to program those buttons with JavaScript. So that's the difference, we have a list of JavaScript functions or we have a list of basic HTML links.