FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Floating Menu

Next up, we’re going to integrate a menu system in the header, for lower resolution devices that cannot display the horizontal menu. First we’ll add a floating menu, and then make sure we can open and close it with the menu button.

2.2 Floating Menu

Hi guys, welcome to this course on Getting Started with Semantic UI. And in this lesson, we're going to finish off the header. So in this lesson, we're gonna take a look at incorporating some of the JavaScript side of the semantic UI. So, in the JS directory, I've created a blank JavaScript file called script. So, now what I must do is take a look at the includes, and the head.php first, and make sure that I include this JavaScript file. So within the head.php file, I'm simply going to copy out one of the script tags and paste it down below. And again, we want to go into the JS directory, and then we want to load the script.js. And I'm loading in this file below jquery and semantic because this script has a dependency on those two scripts. So, now I have opened my header.php file, main.css, and also the script.js file. So, now what I want to do is reflect back to where we last left off and we currently had a bug with our styling because the button is not supposed to be visible on the desktop version of the website. So what I'm going to do is take a look at this CSS and by default I'm going to hide the button. Now in order for me to target this button specifically let's add in an ID attribute to the button and I'll call this m_btn. Standing for mobile button. Then I'm gonna save that, move over into the CSS. I'm gonna say m_btn, and by default, it's going to be displayed as none. So, let's save that now and then I want to preview this in Safari. So it's hidden by default but then I want it to show when the screen resolution goes to 630 pixels or less. So let's copy this out right here and I want to say display as an inline block. So there's a difference between a block level element and an inline block. So for example, if I save this now and hit refresh, you'll notice it keeps a certain size constraint, whereas a block level element is very fluid. And will stretch to the parent containers width unless specified otherwise. So I am just going to say display as in inline block, but then also I want to align in the center. Now again because this is an inline block it's not going to work with the margins. So if I say you know, margin zero auto like I did with the menu and then just hit refresh, you'll notice nothing happens. So what you need to do is take a look at the parent. So the parent is the div of the id main head. And all you need to do is set the text alignment to the center. And then I can simply hit Refresh and you'll notice the button is now centralizing itself within the parent. The next thing to do is to take a look at adding in the sidebar. So first things first. We have the Semantic documentation to go through. So let's take a look at the menu, and underneath Modules we have the Sidebar. Now you can have a sidebar to the left. That's by default. Then you have the top, right, and bottom. I'm gonna stick with the default sidebar, which is to the left. You don't have to say you know this must be the left hand sidebar. You can just say ui sidebar. Note, however, I want to take a look at the variations that are available to me. So as you can see, you can put any content you'd like in there. And also you can have different sizes. And also, you can have a floating sidebar. So I can simply copy out this code right here. So it's a div for the class of UI floating sidebar. And I'm just going to copy it out and then in Sublime Text, we're gonna open up the header.php file and we're gonna paste this above the main head. And let's collapse the main head for now. I'm not interested in it. And the ellipses just means that you can put whatever you like in here, forms and so on and so forth. So, now that I have this, I want to do find out the menu items are being displayed within the floating navigation. So, these menu items. I'm not really interested in this right here. But however, the documentation isn't giving us that information. So what's the best way to find it out? Well, simply right click and say inspect element. Now again this is available for Safari and Google Chrome. Also, you have the developer tools in Internet Explorer that you can inspect the live dom and see how the markup is generating this effect. So, we have the main sidebar, and you can see there's quite a few classes right here that are being applied. But, again, you don't wanna be putting in active, because active means that it's gonna be open. If you get rid of that, it's gonna close. So obviously you wanna keep that in but only on a temporary basis. The JavaScript is gonna deal with that class. Also you can see the sidebar is double up as a menu, but more on that later. So the next thing is to take a look at these anchors. So I'm not interested in that bottom div with the class of item. I'm not interested in that. I'm just interested in these three anchors. So, all I need to do is simply right click and say copy as HTML. It will copy the markup of the particular dom element that I've selected. And then I can go into sublime text and paste that markup in. So, you can see here it's just an anchor and I can put in the href. So, if it's the homepage it's going to be index.php, the class is item. We have an icon, the home icon, that's perfectly fine, and then the label home. So, then I can copy this out and paste it three other times and then change the links and icons and labels to their relative page. So once we've done that, the next thing I want to do is go ahead and refresh the browser. But before I do that, I won't be able to actually see the sidebar. So the way that I'm going to see the sidebar is by manually adding in the class active. So I'm just going to temporarily add this class in, and then delete it later on and let JavaScript manipulate this class. So I'm gonna save this now, and we're gonna head off over into the browser. And then we're simply going to hit refresh. So there you can see that we do have the sidebar. We have that shadow there, but you can see the sidebar by default doesn't have pretty much any styling. You know, you could put whatever you want to in there. But it has no background color, the links aren't being styled. And so on and so forth and that just allows the UI to be very flexible. But in our case we want to make sure that there is some styling involved so what we need to do is again refer back to the documentation provided and all I want to do is open up the menu and scroll on down to the menu section. Then once I'm at that section, I can take a look at, you know, all of these different menu options, and you can have vertical menus just like so, so I can review that code. Right there, and I can see vertical menu. And that's what I'm looking for. I don't really want a horizontal menu, so let's go ahead and copy those two classes, vertical menu. So I'm just gonna copy them out and then we're gonna take a look at sublime text, and we're gonna paste in those two classes. So now, not only is this a floating sidebar, it is also a vertical menu, and inside of here we have our items of the menu. And so now it will start it correctly. So let's save this and go back and hit Refresh in the browser. And there you go. You can see now it has the proper background color in their, text color and so on and so forth. Now white is very nice but however I want it to match the grey color scheme. So I'm just going to set this to inverted. And that way it will invert the colors just like so. Very, very nice. So, now that we've done this I can then remove the class active and then program the menu button up so it toggles open closed the sidebar. So, what I need to do first of all is target be button that we have. So it has the ID of m_btn so I'm just going to collapse that. And then we're going to take a look at the JavaScript. So as you know we're loading in jQuery before we're loading in our script.js file. And the first thing you need to do is make sure that everything's loaded. So the way we do that is we type in the dollar sign and then we put a function within the brackets and end with a semicolon. So now anything in between these two parentheses is going to execute when the DOM has finished loading. The next thing we need to do is target the button. So we can do that very simply by putting in the dollar sign again, the brackets and then in the quotation marks, we can place in the CSS selector, so we can say hash and then the ID m_btm. So now we're targeting that DOM element. And we're going to wait for an event. So I'm gonna say, on. And then the first argument we need to pass in is what event are we looking for. Well, I'm looking for the click event. And then once the button has been clicked, I want to run a function. And that will then run the respective code that's going to open and close the sidebar menu. So at this point, I'd like to refer back to the documentation provided by the semantic UI documentation. So if I open up the menu. Go down and move on into the sidebar, we can then review the usage and then we can take a look at the example code. So you can see here we are targeting the element that is our sidebar, and then we are running the sidebar method. Now we can also pass in a few arguments to this method and we can change its behavior. Now I don't necessarily want to show it and hide it. I want to toggle it because when they click on the button I want it to go into the opposite state so they can open and close it with just one button. So what I'm going to do is take a look at first of all targeting the sidebar. Now I could do it with the classes but however I'm just going to do it with the ID attribute and say m_menu and then go ahead and save that. Then I want to target the element with the ID of m_menu. And then we want to run the sidebar method. And then we want to pass in our arguments, and in our case it's gonna be toggle so that way it's going to toggle the sidebar open and closed. Then, all I'm gonna do is just open up Safari, hit Refresh. And you can see there that all that's happening is it's toggling it open and closed. Now we're also getting the scroll bar at the bottom which I'm not a fan of at all and that's mainly because the image is at 100%, so it's just creating that scroll bar. So let's first of all look at the live dom and see what's happening right here. Well I can see that now virtually it's toggling the class active, but also you have the body element, and you can see that it's adding the class left pushed. And then when I close it, it gets rid of those classes on the body. So when the class, let's say, pushed is being applied to the body, I can target the body, make sure it has that class, and set the overflow to hidden. You don't want to set the overflow to hidden by default because obviously you're gonna need to scroll up and down when we add content to the pages and so forth. But when we have this menu open we don't actually need to scroll the page, cuz all we have is these menu items right here. And you could also set an overflow scroll on the sidebar if you wanted to. So, all I'm going to do is target the body element and then we're not gonna put in a space because then that means we're looking inside of the body element. I'm just going to say dot, so now we're checking the body element has a specific class and that's gonna be pushed. And then I'm gonna set the overflow to hidden. And then we can just preview this real quick, just like so. And now you'll notice that it, just makes sure that we don't get that horizontal scroll bar. Now it does have the scroll bar obviously when it animates off, but that's not a big deal. Overall, it's what I'm looking for. So that we have the overflow set to hidden, what about if we have the browser window that's fairly small and then the user decides to resize the browser window and it goes a little bit larger? So this could be a potential problem of course with the browser being resized. Or if you're on a tablet or smartphone device and you rotated it from portrait to landscape. So what I'm going to do is introduce the code that's automatically going to get read off the sidebar and tell the body element not to add a margin on there at a certain resolution or greater. So, let's go ahead and create that media query. And it's going to have a min width of 631 pixels. And so what that means is that number one, we've set this to one pixel greater than the previous media query. And so that stops there being an anomaly in our styling. Also, this means that now we're using the min-width, so it must be a minimum of 631 pixels or greater for the styles within those two parentheses to be applied. So now let us inspect the DOM. So first of all I'm going to inspect the body element first of all, and when we have the class of pushed at setting the margin left to 275 pixels, so all I'm going to do is copy that selector out. And before I paste it in I'm going to type in HTML, then I'm gonna put a space and paste that selector in. So that way we're playing a game of top trumps, it's gonna overpower the previous selector, so we're gonna target the HTML root level element, then we're gonna look inside of there for the body element with the class of pushed. And then we're going to set the margin left to zero and we want to set that value to important so it holds the same precedent. And on top of that I just want to cut out the CSS selector because that only applies to the mobile navigation and therefore it needs to be inside of this media query. And once we've done that go ahead and save it and then I want to simply open up Safari, hit refresh, then you can scale down the window, open up the sidebar menu, and then just bring it out. And now you can see that there's no margin being applied to the body, so the content is going behind the sidebar. So in the next lesson we'll continue on with the header.

Back to the top