Video Transcript

Hi, this is Peter from JoomlArt and today we're doing the tutorial video about the exciting new T3 version 3 framework. In this tutorial, we will have 3 parts:

1. First, we're gonna build up the Megamenu
2. Second, we're gonna learn how to style and add icon for Mega Menu.
3. And third, we're gonna do Off-canvas and Sticky menu.

So let's get started.

So first, go to back-end of your site, navigate to: Extensions then Template Manager then select JA Template. In this tutorial, we are gonna use JA Argo Template which is great, a responsive template that just came out on March 2013, ok you guys all set?

Now we're going to the Navigation in the back-end. Go down to Navigation Type, select Megamenu and then we're gonna go configure this. Ok so please scroll down. You see Megamenu Toolbox. First, go to Megamenu Configuration, we go work on Main Menu, then we're going to configure Megamenu sub-menu. So add Submenu: Yes, go to Categories, we're gonna make it about oh 950 pixels. Okay *Now we have a bunch of information here, let's add a couple of columns to spread it out. Ok. So, add or remove the columns by simply plus or minus under add/remove column. Then, select the content for the column by assigning any module, we can use existing modules or we can use new modules.

Ok. Now let's add a video, we can do “Video of the Day” over the third column. That looks pretty good. Remember you can change the width of each column, width goes from 1 to 12 on the settings, we'll use number 4 here, and then, on Video of the day, we’re gonna use number 5 to make it a little bit wider so it fits everything in the screen ok. Great, now remember you can align your Mega Menu to the left, the right, the center or justify, we’re gonna use the left in this example. Ok, it's looking good, so let's go to the top of the page and click Save. Ok we're all saved, says “style successfully saved”, everything worked ok.

Let's preview this, we do this by going to the front-end by clicking View Site. Ok, as you can see, this is our site, gonna go to Category, we'll be over to check out our new Mega Menu.

Ok, the second part of this, we’re gonna move menu items and divide columns. So, we go to Submenu width, make that about 600 pixels. And then go down the K2. So here we have 9 seperate items. We gotta put it in three separate columns so it gets a nice symmetry in it. Really looks good. Well, add a new row in the column. Click that, okay. Now for this module, we’re gonna select Ads in Articles list. Ok, that willt fit perfect. Now remember, you can hide it when collapsed for viewers using phones, tables or anything with a small screen. Now let's go back to the top and save again and see what we have in the front-end. Reload the page, make sure any changes have taken effect. Ok, now go to K2 and you see 9 items are now in 3 columns with our Ads below which is not shown up on a small screen, this is responsive template.

Ok the second part of this, we'll add some styling icon to make menu look better. You can add Extra Class, the styles are already included in the file so go to Extra Class, add nav-categories. Ok, we're gonna use the icon list already included or you can style it by yourself. T3 supports Bootstrap so you can use any icon class that you would like to use in this framework.

To view icon class list, let's go to the homepage of Bootstrap and we’re gonna go to the Base CSS menu and Icons by Glyphicons. Now copy the icon class that you want to add to the icon field of T3. Return to the back-end, category is icon-reorder. Is everyone going okay with that? Great. Now for K2, we’re gonna use the icon-bookmark. That looks good. Reload the site again. Go up, check your menu, see how they look. Everything loaded ok. Everything's working great?

Now, T3 supports off-campus menu in class menu for small screen like iPad and iPhone. You can click to enable or disable this. So now your site appears to be normal but as you can see when you use the menu by moving to the left, the site goes off-canvas to the right, allowing you the space to use the menu. Once you make your selection and you are done with the menu, the menu will move back to the left and the site will be back in the center.

As you can see, our main menu is not following us. It's not sticky. Let's change that. Open your root folder, go to "templates". Okay. Once we entered the "templates", click the template we are using. In this case, it's "JA_Argo". Then "tpls" and finally "blocks". So look for "header.php". Once we open the header, we're gonna insert "T3-mainnav" class, which is already there, and we’re gonna add " navbar-collapse-fixed-top". This is how we make the main menu sticky. Okay. Make sure it's spelled correctly. Save. And let's check our template again. Now, you can see the main menu is sticky and following us while going down page. Well, the site looks great.

Next, we're gonna work on making responsive tablets sticky. Small screens such as iPhone or tablets can also use this interesting feature. To do this, we're gonna to be in the same PHP file "header.php". We're gonna add another class, we're gonna add "navbar-collapse-fixed-top". Make sure you've checked your spelling. Okay, now save.

Please go back to the front-end of your site. Okay, that looks great. Whoa, you guys are all set.

In the next version of T3, we have an exciting new feature: we're gonna add caption in the Mega Menu. This is not currently available but will be soon.

Ok, go in the back-end, go to the Mega Menu configuration, click on "Categories". As you can see, to the right of "Icon" field, there is an "Item caption" field. We can insert any caption that we would like. Okay, see that? Great.

Hopefully you enjoyed this tutorial and hopefully we'll see you again soon! Remember to check out the new T3 version 3 Framework from JoomlArt. Open source is freely available for everyone! Thank you again and look forward to see you soon.