Foundation for Responsive Web Design Tutorial - 7 - Dual Menu Toggle Layout

Foundation for Responsive Web Design Tutorial – 7 – Dual Menu Toggle Layout



alright guys so now that we know the basics of how to create an off canvas menu what I want to do in this video is a couple things first I want to show you how to create some advanced functionality for it and what I'm gonna be doing is showing you guys how to create the left menu like before and also a right menu so you can have dual navigation menus and I'm gonna be making this mini bar at the top so the last one we just had a link and it said toggle menu or toggle button or whatever well 99% of time you have this toolbar at the top with icons so I'm gonna be showing you guys how to add those and it's just gonna look a whole lot better so what we need to keep from the LES Itoro is the basic shell the basic structure of it and I also kept this right here since this exit off canvas it doesn't change and by the way I probably should mention this right here this little keyword that's needed by JavaScript so it can work with a menu and actually have the functionality to display it and hide it so that's what that is probably should mention that in the last video but that's why you need to include it so what we're gonna be doing first is we're going to be creating the Left menu and the right menu and actually before you even do that let's go ahead and create that top menu bar do I want to capitalize everything or not no I don't art so let's go ahead and create this part first so we're gonna have two hamburger icons these little three lines one on the left one on the right and I'll just put the logo the new Boston right in the middle that'll be easy to understand and why is this like highlighting in yellow tweaking meow art so for the top menu bar you just have a navigation in the class is set to tab bar right like that now if you want to add the individual buttons then what you do is you make a new section and for the class for the left one you're gonna write left small now you write small because you don't want it to take up like an equal amount of width as you know the in the middle you just want a little section because it only needs to be the width of the actual button inside so that's our section now inside this is where we actually put that icon the hamburger icon so a the class of this is left off canvas remember it's toggle and the other one is menu icon nope all right there we go now inside here this is where things get a little bit weird and let me make sure I have my dead link so I don't forget we're gonna put a span just like this but we're not going to add any classes and we're not going to add anything to it all we're gonna do is we're gonna make an empty span now you're like uh why would you do that why do you need that well foundation needs an empty span because this is how it says okay I'm gonna put the icon the menu icon those three lines right here so why they made it this way I'm not sure but you have to yell at them not me so that is our left bun right like that and let's refresh and see what we got all right so we have our main tab bar this entire dark thing is a tab bar and this is the left button and as you can see whenever you click it is trying to toggle a menu that doesn't exist yet so we'll create that later on and I might as well keep that nice and tight alright so after that left icon I'm just gonna have the middle section where it says the new boss then so you know I have some branding in my app so section not SEC section there we go boom tomato tomahto now the class for this is a bill and class you can add middle to middle align everything in tab bar section now inside here just add heading one and for the class set equal to title and for your title you don't name yours new Boston but mine will be the new Boston so now we made a title that's going to be displayed in the middle top of our little navigation tab bar up there so the only other thing we needed to do now is you know how we have a button on the left well we're gonna make one on the right so it's gonna be really similar to this so for the section of course it's gonna be right small since you want it to be to float to the right and instead of toggling the left menu whenever we click it we want it to toggle the right menu so we need design two separate menus and that's what we're gonna do so this one toggles the left this one's gonna toggle the right and then we got some branding going on looking good so now let's go ahead and make up our actual menus so for the left menu like before we're gonna have an aside and for the class of this it's just gonna be left off canvas menu now in here I'm just gonna make an unload list and I'll just say canvas list so this is actually probably a better way to make your navigation menu instead of just making you know your default standard under lists it gives you a little bit default styling and I'll show you come some other cool tricks as well so inside here have a list item and you can actually have a label now inside your label um can I have like pages or something so yeah if you have different subsections so for example you might have on your left menu a bunch of links for your profile a bunch of links for your settings whatever you can add a label at the top of each one and it just gives a little indicator of what this subsection of items is for so now let me just add I'll just make one link and then I'll let you guys be creative and do whatever else you want to do alright so the rest is just a regular list item to show you guys what that does so this we don't have enough content or any content at all so that's why it's not displaying but you can see that the label is clearly indicator that hey this is not an actual button that you can click and your buttons up here as big button so when we actually make some content and stick it in there you guys are going to see those menus a little bit more clearly but now what I want to do is I want to make the right menu so changes to write off canvas menu so now whenever we plus press that button on the right it knows hey this is the one I'm supposed to be toggling and off cam is list will just say uh-oh no maybe the menu on the right hand side is your friends list and displays all of your friends which is no one not even in my fake examples do I have any friends oh so sad so sad all right so now all we have to do is you have to make our main content and just go ahead and do this so for the section I'll show you guys some other cool techniques I don't want to overload you guys with too much but this is another thing that you can do so you can have your main section and let me just add some paragraphs with some by the way I use this all the time bacon ipsum it's like lorem ipsum but it gives you like words about bacon and let me just copy this so just making some fake filler content right now so we have three paragraphs stick them in our main section looking good and yeah you know what that is actually it so we already have this taken care of so let's see what's going on right now so this is our web page by default and this is what it would look like on the large screen device now whenever we click this left menu toggles the left menu and now that we have content you can see that this is the label and it's a little bit smaller so the user knows not to click it and these are your individual buttons that would go to a different page or whatever you wanted them to do and of course we can have one on the right as well so pretty cool and just to show you guys that it is responsive smaller devices it would look good so actually for the chat app I'm making like I said I'm gonna have all the rooms right here so you know if a user wants to chat with their family room or their friends or maybe their work they can select the room and then once they're in the room it shows all the people or users that are in there so it's gonna be pretty cool but just wanted to demonstrate that so hopefully you guys enjoyed how to make a more advanced and slightly better looking um toggle menu layout so thank you guys for watching don't forget subscribe see you guys next time

12 thoughts on “Foundation for Responsive Web Design Tutorial – 7 – Dual Menu Toggle Layout”

  1. Mine works but it has a scroll bar on the menu items? it doesn't do just a straight drop down like buckys any help???

  2. My right menu is showing on the left side; is that right?

    <!– Left menu –>
    <aside class="left-off-canvas-menu">
    <ul class="off-canvas-list">
    <li><label >Pages</label></li>
    <li><a href="#">Home</a></li>
    </ul>
    </aside>

    <!– Right menu –>
    <aside class="right-off-canvas-menu">
    <ul class="off-canvas-list">
    <li><label >Friends</label></li>
    <li><a href="#">No one</a></li>
    </ul>
    </aside>

Leave a Reply

Your email address will not be published. Required fields are marked *