Small Snap! Logo Snap! Websites

Work in progress
Snap! C++

Incredible Websites for Incredible People

Snap! Menus

Introduction

(Small Snap! Logo) Snap! comes with a menu system that allows you to create any number of menus and add any number of items in each menu. This being said, you should limit yourself to a reasonable number of items to make it easier for your users to navigate your website (a menu with 100 items is very difficult to navigate unless you are using it as your site.)

We offer several different types of menus, two of which are administration menus.

This documentation will explain the menu system in details. There are a few things to know of when working with menus that we hope we explain well enough here. If you still have any question, feel free to post a comment.

Menus

(please, make sure to check out Menu Items below!)

By default, we offer you the Snap! Toolbar that appears at the top-right corner. This is the Toolbar menu.

Sample of the Administration toolbar menu.

You are welcome to change the content of the bar, just be careful as messing it a bit too much will make it a bit harder for you to find the different features available in your website.

Notice the Menus entry in the Admin tab. That entry takes you to the list of available menus on your system. By default, you have the following menus available:

  • Primary links
  • Secondary links
  • Navigation
  • Toolbar

Rarely will you need more, although you are free to use the Add menu tab to add more. Remember that these menus are not the actual links. Menus contain a large number of links.

Primary links

The primary links are used as the main menu. In general it appears in or around the header of the website, or at the top of the sidebar. In most cases, you want to keep this menu relatively small. At this time, Snap! uses the primary links with the following:

  • Plans
  • Blog
  • Contact

As you can see, it is very small. Too large a menu will scare off your users (unless you are writing a very technical document in which case you're probably doing what you are supposed to do.)

Secondary links

This menu is used to complement the primary links. It is often used for things such as your Sitemap, terms & conditions, a link to your log in screen1, etc.

Snap! has a secondary menu at the bottom of the page. It includes things that we deem important for our users, but not as important for our website than those things shown in the Primary menu.

Navigation

On Snap!, the navigation menu is hidden by default. The navigation is dynamically defined with all the features available to you. The problem is that it is really large and scary. Therefore, by default we hide it. Instead, we offer you the Toolbar menu which is also dynamically modified, but is much small and really only shows you the most important things that you will have to work with.

Toolbar

The Snap! Toolbar is created from the items found in the Toolbar menu. The items of the Toolbar menu can be assigned an icon as you can see in the toolbar picture.

At this time, the toolbar only supports 2 levels. We are planning to support a 3rd level at some point.

Buttons

A top level item without any sub-items is taken as a button. The light icon is an example. It points to the Snap! Document (i.e. this very book!) You may replace that one or create your own links to other website or a page you use often on your website (i.e. your comments moderation queue.) At this level, the icon is expected to be 16x16 pixels. It will be resized by the browser if too large or too small. Note that the title is used as the image title only. It will not otherwise be shown.

Tabs

A top-level item with sub-items becomes a tab like the Content and the Admin tabs. The name should be kept short so it fits in the tab area. There are no provisions to have more space for the tabs. If too wide, it will go over the buttons on the right and then wrap. The icon for a tab has the same characteristics as the button icons.

Again, the only difference between a button and a tab is that a tab has sub-items. So when you create a new tab it first will be shown as a button until you create the first sub-item under that tab.

Icons

The 1st level sub-items are the icons visible under each tab. These are links that take you to a page or another. The default toolbar includes what we know most people use all the time. However, you are very welcome to change those links, icons, add new links and remove existing links. These sub-items make use of a 32x32 pixels icon.

Drop down

At this time, adding a 2nd level of sub-items will prevent you from clicking on the 1st level sub-item but it won't show the 2nd level. Therefore, do you use them yet. These items will be shown in a drop down under the item when you hover your mouse over that 1st level sub-item.

Your Own Menu

Form "Add menu"You may create your own Snap! menu. For this, click the Admin tab and then the Menus icon. On that screen, near the top, you will see a tab named Add menu (see sample on right.)

A menu includes two names: the system name (called Menu name) and a title. The system name must be letters (a-z), digits (0-9) and dashes:

my-own-snap-menu

The restrictions are there for technical reasons (i.e. this name can be used as the CSS class name of that menu.) It is customary to use all lowercase characters for the system name. Capital letters area also accepted.

The title can be pretty much anything you want. Again, it is suggested that you use a short name. The title is shown at the top of the menu by default. It is possible to hide it when you show the menu block on the screen.

A menu definition also includes a description. This is just for administrative purposes. Enter anything that makes sense to you as the description of the menu. It remains private to the administrators. The description appears in the Menus screen and may appear while you hover your Snap! Toolbar.

Click on Save to create the menu in your website.

At that point, you have a new, but it will not yet appear anywhere. A menu is a block that you need to place on the screen in order to see it2. But before you do so, you probably want to insert items in that menu (See below.) A menu without items remains hidden.

Simplemenu

As I mentioned, you have two administration menus available to you: Snap! Toolbar and Simplemenu. We think that the Snap! Toolbar is easier and more practical to use so we offer it by default. However, by turning on the Simplemenu feature and turning off the Snap! Toolbar, you can switch to the Simplemenu administration menu.

There are a few differences:

  • Simplemenu is shown at the top-right of your screen and you cannot move it anywhere else
  • Simplemenu shows the complete Navigation menu (which means many more links!)
  • Simplemenu is less appealing, although it shows you all the Navigation menu items using drop-down menus
  • Simplemenu cannot be hidden like the toolbar, although it doesn't cover any content
  • Simplemenu grows each time you add new features, the toolbar only grows to show you important features

Yet, many people (like me) prefer Simplemenu to the Toolbar.

To switch between the Snap! Toolbar and Simplemenu, go to your Made to Order Software Account and click on My Websites. There select your site and change the options (i.e. unselect the Snap! Toolbar) then Save. Within 5 minutes, the Snap! Toolbar will be gone and in its place you will see the Simplemenu at the top of the screen.

List of menu items as shown when editing a menu.Menu Items

Click on the picture to see it full scale.

Now is time to talk about the menu items. Items are what fills the menu with content. Without them, the menu is considered empty and it is not shown.

In a website, menu items are actually links that send you to another page on your website, someone else's website, or even a document such as a PDF file or a JPEG image. The link can really be anything you want and include parameters (after the ? character) and an anchor (after the # character).

To add items to a menu, click on the menu name after you went to the Menus page (i.e. click on the Admin tab, then Menus.) That shows you a list of the existing items (Click on Navigation3 or Toolbar to see their existing items. )

When you created a new menu, or look at the Primary or Secondary menu the first time, it is empty. That means you don't see any items. To add new items, click on the Add item tab at the top of the list.

Once items were added, you can organize them from the list:

  • Order them using the cross (+),
  • Disable them by clicking on the checkbox (no checkmark means disabled or hidden,) and
  • Auto-expand the sub-menu.

The ordering feature is used whenever you add a new item and you want it in a specific location in the menu4.

The disable feature is particularly useful for the Navigation menu because you cannot delete those items (since they are created by software.) So to hide those menus, disable them.

The auto-expand feature is very rarely used. It will show the item and its sub-items which are otherwise hidden by default until the item is clicked on.

The example shown here shows an example of Snap! Toolbar. As you can see, there is a Content menu at the top with different entries such as Primary and Secondary (to create pages that will automatically be added to those menus.) The items that appear under the Content tab are defined with an indentation in the menu list. That represents sub-items. Similarly, you can create sub-sub-items, sub-sub-sub-items, etc. up to 9 levels.

9 levels of indentation is plenty for a menu, although in case of the Snap! Toolbar, the example shows you the current limit of the toolbar: 2 levels (top-level and sub-items.)

Adding a Menu Item

Form to edit a Menu Item.There are several different ways to add a menu item. It depends on the context you're in. Many pages are created and given a URL by software. For instance, My Account is found under /user and my bio at /users/alexis-wilke. For those pages, you have to use the Add item tab.

First click on the Admin tab of your Snap! Toolbar. Then click on the Menus icon to go to the list of menus. In that list, pick the menu where you can to add a new link (for instance, a link to go to your Contact page.)

On that page, you see a tab at the top that says Add item. Click on it to get to the menu item form (see picture on right, click to enlarge.)

The first entry in a menu item is the path. A local path is the URL without any http:// or domain name. In this example, we have a link going to the contact page. A path to another website will include the full URL (with the http://www.example.com/index.html). With your Snap! Website, paths are always created in lowercase. There are only very few exceptions, so if you have a doubt, try with lowercase first. It is more than likely to work first time.

The second entry is also mandatory and is called the menu title. This is the text that actually appears in the menu. The title can be anything you want, however, it cannot include any HTML tags.

The description of the menu is used as the title of the link. When no description is offered, the menu title is used instead. It is a good idea to enter a description since it helps people understand better what this menu entry is about (especially blind people who don't have other visual clues.)

Then you recognize the Enabled and Expanded flags as shown in the list. These are exactly the same flags and they have the same functions here: a disabled menu item is hidden, a menu that has sub-items and is marked as expanded always shows all of its sub-items.

The Parent menu (item) indicates the menu or menu item where this item appears. This drop down will show you all the possibilities offered including other menus. In other words, using this drop down, you may move an item from one menu to another (i.e. say you first placed an item in your Secondary Menu and released that it was actually very important to your users. At that point you'd want to move the item to your Primary Menu. Edit the Secondary Menu, cilck on the edit link of the item you want to move, in the drop down, select Primary Menu as the parent, then click Save. Voilà! The item was moved from one menu to the other.)

We discuss the menu weight below.

The menu attributes are part of an additional feature and that feature is documented separately.

Placing a Page in a Menu

Fortunately, whenever you create a new page, you may select in which menu it shall be added without having to go to the menu area each time (which would take a lot of time!)

Whenever you create or edit a page, notice near the top there is a line with the words Menu settings in blue like this:

Menu Settings found on each Page

Click on it to open the menu form. That shows you a set of boxes that you can fill with the menu information for that page. This includes the menu title, parent menu or menu item, and the weight.

In most cases, you just have to enter a menu title and you'll be good to go.

If you use the Primary or Secondary buttons found on your Snap! Toolbar, then you do not need to use the Menu settings since the system will automatically add such pages to the Primary or Secondary menu.

Limits of the Page Menu settings

Note that the Menu settings do not give you a way to enter the menu description or position the menu item without a wild guess (using the weight.)

If you want to enter that information (and you really should for your Primary menu,) take the time to go to your Menus, and edit each item that is not yet fully defined.

The Weight of a Menu Item

Each menu item includes a weight. This is used to sort the items in a user defined order. By default, menu items will be sorted in alphabetical order, but when you add items such as Log In, Log Out, Contact, Help, you often want to place them toward the end of the menu. Similarly, you most certainly want the Home menu item first. To do so, you can tweak the weight of each item to define the order (i.e. their position.)

Each weight defines a group and the items within that group are sorted alphabetically. By default, all the items are placed in group zero (0).  The weight goes from -50 to +50. The items with the smallest weight (i.e. -50) go first (i.e. on the left or on the top.) And the items with the largest weight (i.e. +50) go last.

Note that in some circumstances you may want to avoid using the sort feature of the menu and instead move a few items where you want them to be using the weight within the menu item edit form. For instance, you could set your Home menu item to weight -10 to make sure it always appears first and your Contact menu item would receive a weight of +10 to appear last.

Using the list feature, you can use the cross (+) icon to move items where you want them to be. This is very practical, however, it has the side effect of defining all the weights of all the items in that menu. Now the first item has a weight of -50, the second -49, the third -48, etc. up to the last item in your menu. This often means new items with a weight of 0 will appear at the end of your menu (unless you already more than 50 items in that menu?!)

It is advised that you create all the items in your menu, then position them exactly the way you want them to be. It will generally take you a lot less time to do it in this order.

Snap! SEO e-Book Index:
  • 1. To create a Log in link, use user/login as the path. The link will be hidden whenever you are logged in. If you'd rather have a My account link, use the user path (without the /login).
  • 2. The primary and secondary menus are often automatically handled by the theme that you choose to use. This makes it a lot easier as you do not have to wonder where to place those blocks. The other menus give you full flexibility which means that you've got to place them in one of the available areas.
  • 3. Although, we recommend that you do not change the Navigation menu, it is possible to do so.
  • 4. Note that by default menus are sorted alphabetically. Once ordered in the list, you lose that capability altogether. Afterward, you'll always have to maintain the order yourself by editing the menu list of items. Unfortunately, there isn't an easy way to otherwise organize the order of all the items. Although you may want to read the paragraph about the menu weight.