Videos

If I go look at my theme, here's the footer nav column 1 and footer nav column 2. Let's say for example I wanted to add a new link under FAQ's that linked to the site nav page. Well, from the Admin I can easily do that from this nice visual interface. So I'm going to open up this Navigational Set and it will give me all the navigational items that are contained in it. I can click FAQ's and then click Add Navigational Item. Here I'm going to call it Sitemap and then I'll click here to link it to a page. I know that Sitemap is called SMAP and then I'm going to hit "Add." It will then automatically add the Sitemap link here. Now if I go back to the front of the web site and click "Refresh," you'll see it automatically links to the Sitemap page, which is pretty cool. 

Now say for example I want to easily turn this off without having to delete it. I can come here and click the toggle switch to make it inactive and if I go back to the live site and hit refresh, it's gone. 

Let's take a look at our top nav navigation set. If I open this, here we have all our navigation that we see up here on the top nav. What's nice about this is that it supports a drop down menu right out of the box. Say for example, underneath Category One I wanted to create two sub categories. Navigational Sets supports up to three levels of sub categories. That gives you a lot of flexibility to create really powerful navigation.   Instead of adding a navigation item, I'm going to add a Child or Sub Category. All I have to do is click on Category One, then click on the "Add Child Navigation Item" button. I'm going to call this sub-cat1 and I'm going to link it to a category and now we'll do one more. I'll call it sub-cat2 and link that to a category. You'll notice here as I create sub categories, they'll get indented so you can visually see the hierarchy of the different levels. So over here these two, and these four down here are all the top level categories and these two are sub categories under level one. If I come back to the front end and hit "Refresh" and hover over Category One, you'll see the two sub categories drop down with the link to the correct sub category. This functionality is built in out of the box as part of this base readytheme framework. Now, you'll probably need to style this to match the look and feel of the theme you're creating. 

There's a readytheme style sheet that's used to style the navigation sets. It is located here:

Menu, User Interface, Style Resources which contains all of our style sheets, you'll see there's a readytheme.css. So this file is not editable in the Admin. It can only be changed via ftp. It comes from some default styles that allow that drop down to work. However, you'll probably want to modify it for your own use. 

One last thing I want to show you with navigation sets. Each navigation set is its own template. Instead of clicking this icon here, I can click the "Edit" icon and this will bring up an actual page template that I can control the look and feel for the navigation set. What this gives me access to is the different foreach loops. Like I was saying before, ReadyThemes supports three levels of category navigation. So there's three foreach loops, three arrays that it loops through to display all of those. Here you'll see the first one I have here, this navigation item readytheme navigation items. On a per navigation set basis, you have the ability to control the entire layout.

Now you may have noticed this layout drop down. It has a Horizontal Drop Down, a Horizontal Mega Menu, a Vertical Fly Out and a Single Column Dropdown. Now, all these do are add a class to the unordered list that gets output. So here's our unordered list and you'll see this readytheme layout. This is the class that's going to be determined by what you have selected in this drop down. Now this class determines what styles get applied to this navigation set. So there's some built in styles, some default styles, that support all four of these. However, you'll most likely need to make some adjustments for your particular theme. Say for example I change this to a Horizontal Mega Menu and hit Save. If we come back over to the live site and hit refresh you'll only see some small changes. Instead of the drop down being full width, it's only partial width and if I add a third sub category in here, it will take up this space over here. So these default styles give you a starting point that you can use to build really complex drop down navigation sets as well as mega menus and single column navigation. Navigation sets are a key part of ReadyThemes and provide a ton of great functionality that gives both the developer and the store owner unlimited control over how the navigation looks and what elements are contained within it.