FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Mobile Menu & Button UI

Hi guys. Welcome to this course, Getting Started with Semantic UI. And in this lesson I want to show you the development for the header. So firstly, in the images directory you'll notice we have the header.jpg, so I've got this nice large background image in here that I'm going to put at the top of the page. Then also I'm going to open up the main.css file. And I'm also going to open up the header.php file. So the first thing we're going to do is take a look at starting up the main body element. So let's go ahead and do that. So, let's get rid of any default margin and padding that's supplied to the page and then let's change the default font family. So I want Helvetica as a primary font. And then we can have a fallback font of Arial. And go ahead and save that, I'm just putting some text right here. And let's take a look at the index page within the browser. Technically, you could look at any page you'd like. And you can see here that the header is being included, and of course, the stars are being applied. So, now that we have this, let's delete out that content right there. And we can take a look at the semantic UI documentation to find the correct menu that I'm looking for. So what I'm going to do is open up the website. Open up the Menu. And underneath the header Collections, we can take a look at the Menu. Now inside of here, I can take a look at all of the different types of menus and I'm looking for a specific type. And I can just scroll on down. You can see you have many options available. But this menu is looking quite nice. So, what I'm going to do is view the example code and we can just copy and paste this out and I'll go through the code with you when we are finished messing around with this menu. But right now, I'm just going to copy out the code and move it on over into sublime text and paste. And if we save that, and take a look at this inside of Safari, so I'm just gonna hit Refresh. You'll notice that the Menu is along the top and you'll notice it's very fluid as well, so it's going to 100% of the parent which is the buddy element in this case, so we'll address that issue in just a second. But also I want a variation of this menu. I don't want it to be the nice white and light menu. I want this to actually be very dark. So let's go ahead and review the documentation again and all I need to do is just scroll on down and take a look at the variations and you'll be able to see here that if I review the example code. This menu has the class of inverted. So it's inverting those colors. So I can simply copy that class out and then we can take a look at sublime text again. And this div and right here, I'm just going to paste in the class inverted and then let's review that in the homepage. Simply hit Refresh and it will create a different variation of that type of menu and now it's nice and dark, so now we need to review the code and change it accordingly. So the first thing I want to do is delete this div. So this div contains all of the content for the right hand side of the menu. So I wanna get rid of that drop down and that input, so I'm just going to delete that out and then we're just left with the three links on the left hand side. Now what I want to do is change these links, obviously I want them to go to their relevant page and I also want to re order them and change the labels and so on and so forth. So first of all, we have the link. So this already has the class of active. And that's because technically we are on the homepage. But however, this menu is gonna be shared across multiple pages. And therefore this is not necessarily going to be the active link. So what I'm going to do is remove that class. Then I'm going to add in the href attribute so that this is actually going to link somewhere. So, and this is gonna link to index.php. And inside it, they can see we have the I tag. Now the I tag is typically used for italic with text but in this case it's the icon tag with the semantic UI. And so we have a class, we have the name of the icon we want to use and then we tell semantic that we want this to be an icon. And there it will put in the relevant icon for us, and then after that we have the label. So now let's take a look at the message link. I'm gonna put in the href, this is going to be the contact link, so contact.php. Mail icon is fine. And we're going to call this contact. Then I'm going to cut out that link and move it down below. I want that to be the last link. Then we have the friends link, so this is going to be the about.php, and then I'm just going to change the label to about, copy this out, paste it below, and then we have the portfolio.php. Again it's gonna have the classic item as an item of the menu and then we have the icon. So I'm just going to delete out user, I don't want the user icon and if I'm unsure about which icon I want to use, then I can review the semantic documentation, open up the side menu, and we can look under the Icon section. And then inside of there, we can scroll down, and then here you can see we have the Archive icon and a whole host of other icons that we could potentially use. But I like the Archive. That looks nice. Now even though it has a capital A right here, you don't want any capitals in your class names. So, let's go ahead and just very quickly say, archive just like so, and then change the label to be Portfolio. So, go ahead and save it and hit Refresh. And there are our links again. And you must make sure that those class names are lower case, otherwise you won't get that icon in there. So, now we have our menu, but we need to adjust this slightly because there's a lot of wasted space. Now, even though I'm going to make this menu smaller. There's still going to be a lot of wasted space. So what I need to do is make my links nice and fluid. That way, I can utilize all of this space available. So, if we take a look at the documentation again and go back on over to the Menu category, you'll be able to see when we scroll down to Variations. And if we just keep going on down and down and down, eventually we will come to the part where it says, Evenly sized items. So you can see here there are three menu items, and they're all using that space that the menu has. And so here we have the class of fluid. So that makes all of our items fluid. But we need to say how many items we want to be on one row. So, in this case, it's three. But in our case, it's four. And then we have item. So all I need to do is simply define those classes on the main parent. So we have fluid, we have four items, and that's it. So go ahead and save that and then just take a look at this inside of the browser. So hit Refresh and there we go. Now we have four menu items stretching all the way across. So now I want to take a look at moving my menu away from the edges, and also I want to sort of bring the menu in a little bit. So let's open up, sublime text. And right here, I'm going to wrap this in a div, and let's give an id of main-head. And I'm just going to cut out and paste it below. And then let's indent this. And then I'm just going to give this an id of menu. So if I save this now, we can take a look at the CSS. So I'm going to target the element with the id of main-head. And we're gonna set the margin to 40 pixels all the way around apart from the bottom, so let's just take that out and then I'm just going to save that. The next thing I need to do is target the [UNKNOWN] the id of menu. And I can set a max width, so if you take a look at it right now you'd be able to see it moves away from the edges, but again it's still a little bit too large. So I want to limit the width to 1024 pixels. So let's open this up. I'm just going to set the max width to 1024 pixels. And to center this up, I need to set the margins, because it will just stay over one side. So, I'm just going to set the margin to zero for the top and the bottom, and auto for the left and the right and that will center everything up nicely for us. And now I want to take a look at putting in my image. So if we take a look at the project directory, you'll see that the index is on the root level of the project. And you have the images directory, and then you have the header.jpg. So even though we're working with the header.php file, we are including it in this file and also these files as well. So we need to actually look at this as a directory structure from here, not from the includes directory. So let's go ahead and put that image in, so I'm just going to go back to the header.php. I want to create an image element. We're going to go into the images directory and then we're going to take a look at the header.jpg. And let's just call this, chairs, that should do the trick. And, then I want to give this an id. We'll call it main image. So now that I've done that, I can then target the image element. So I am gonna say main image. And we're gonna set the width to 100% and the height set to auto that way it will keep the aspect ratio of the image. And so let's go ahead and very quickly preview this. So you can see there that we are scaling the image down, and it's maintaining its aspect ratio. But, however, what I want to do is have this image touching the top. And also, I don't want it to overlay my menu. So how do we do this? Well I'm gonna set the position to absolute and then I'm gonna set the Zed index to negative 1. And the reason being is because if I set it to position absolute and top zero. Let's do that. You'll notice it overlays. Now by defaults, the static and relative positioning comes with the z index of zero. So if we set the z index to negative 1, it will go behind the static and relatively positioned elements. So, I'm just gonna hit Refresh and there you go, it will go behind. So, now that we have this image in here, we need to think about when we scale this browser down, when do we need to create a break point in order for us to go and get the mobile navigation. So I'm gonna stick with this size right here. Let's go ahead and say, inspect element and if you take a look at the image right here which is 100% of the width, it's 624 pixels width. So I'm just going to set the media break point to 630 pixels, that way we know we're safe. And I'm just going to create that media query first of all. So, this media query is going to have a max width of 630 pixels and then what we can do is hide the menu. So let's go ahead and do that. So I'm just gonna set it to display none when the screen resolution is 630 pixels or less. Let's view this in the browser, just going to hide it, and then you can just resize the window. So there we go. Now what I want to do is replace that menu with a button, and that button is then going to open up a sidebar with our menu in. So, first thing's first. Let's take a look at the button and getting that in. So all I need to do is review my code and let's collapse this right now. And below there, we're gonna put our button and let's refer to the documentation. So I'm gonna open up the Menu, then we're gonna take a look at the button element and what I want is sort of an icon/button. There we go. And then what I want to do is copy out this code, so we have the UI labeled icon button. So we have that icon in there plus the label and then we have the i tag again standing for i comma and the semantic UI and we have the pause icon. By the way the class names don't really matter, you can either have icon pause or pause icon, it doesn't really matter. And then we have the label. So I'm just going to copy this one cuz I want the icon to the left-hand side not the right hand side. So, paste this in. Just reformat it. Now also what I want to do is change the color scheme as well. So if we take a look at the variations. So let's take a look at that. And so I like the black button. So you can see here I just need to add in the class of black. So let's go ahead and do that. Just like so. Then we have the icon which I'm going to remove the class pause, cuz I don't want that specific icon. And we want to refer to the documentation again, I'm gonna go with the icon and I'm looking for a specific icon and that is the List Layout. So, let's just type in list layout again, all lower case and there's no hyphens between the space names right there for the icon you just type it as is and then we change the label to Menu. So let's save it and refresh the browser and there's our button, but of course there are going to be issues that we're gonna have to tackle. So thank you for watching me in this lesson and please join me in the next lesson where we'll finish off the header.

Back to the top