Powered by DitDat

Tutorial: Changing the Menubar

For this tutorial, we assume that you want to edit the menubar of your DitDat web site.

The same menubar normally shows up on all pages of your site. (It's possible to remove it from any page, but we don't recommend that.)

Understanding the Menubar
  1. Go to the home page of your DitDat web site and make sure you're logged in.
  2. Hover your mouse pointer above the menubar.
  3. A yellow "Edit Button" will pop up. It contains a Pencil Icon, a red X, and six small dots.
  4. Click on the Pencil Icon. 
  5. A Dialog will appear on your screen with the title "Edit Tabs Dialog". 
This dialog allows you to change everything about your menubar. You can do any of the following:
  • Add a new menu item
  • Change the name of any menu item in the menubar
  • Change the page that any menu points to
  • Change any menu item into a dropdown menu
  • Change the "permissions" to limit who can see the menu item
  • Delete any menu item
In this tutorial, we'll do all of these things on a test menu. That will let you play around without changing any of your existing pages.

Adding a Test Menu to the Menubar

  1. If the "Edit Tabs Dialog" is not already open, then click the Pencil Icon on your menubar to open it.
  2. Click on the gray "Add New Item" button near the lower right corner of the dialog.
  3. A new row will appear at the bottom of the "Tab Settings" table of the dialog. 
  4. The first column of the new row is labeled "Name" and it is empty.
  5. Edit the "Name" of the new row to be "Test".
  6. Edit the "URL" of the new row to be "/contact".
  7. Change the "View Permissions" of the new row to be "Page Owner".
  8. Click on the "Save" button to close the dialog.
The page should now appear with the new "Test" item in the menubar. If you click on this item, it takes you to your Contact page. 

Changing the Page that a Menu Item Points To
  1. Open the "Edit Tabs Dialog" again.
  2. Change the "URL" column of the "Test" row to be "/". (This means your home page.)
  3. Change the "Menu" column of the "Test" row to be "single descendent". (This will create a submenu that lets you reach all the main parts of your web site.)
  4. Click on the "Save" button to close the dialog.
Now the "Test" item in the menubar is a full menu. If you hover the mouse over "Test", a submenu will appear that shows you a number of options. You can click on any of them to reach various pages on your site.

Making a Cascading Submenu

  1. Open the "Edit Tabs Dialog" again.
  2. Change the "Menu" column of the "Test" row to be "all descendents". (This will create a cascading submenu that lets you reach every page of your web site.)
  3. Click on the "Save" button to close the dialog.
Now the "Test" item in the menubar is a cascading menu in which some of its menu items are ALSO menus. You can now reach any page on your site using this menu.

Changing the Permissions on a Menu Item
  1. Open the "Edit Tabs Dialog" again.
  2. Change the "View Permissions" column of the "Test" row to be "Public". 
  3. Click on the "Save" button to close the dialog.

Now anybody who visits your site can use your "Test" menu. Up till now, it's been only visible to you, because you are the page owner. 

Deleting a Menu Item
  1. Open the "Edit Tabs Dialog" again.
  2. The "Test" row has a red "X" in the far right column. Click on this red "X".
  3. The "Test" row will now vanish.
  4. Click on the "Save" button to close the dialog.
Now the "Test" menu is gone from your menubar. When you delete a row from your menubar, make sure you really mean to do it!

Need More Help?

To keep our prices dirt cheap, DitDat is a self-service tool.

If you need help, look here:

  1. The FAQ Page (Frequently Asked Questions).
  2. Email the other people in your cohort.
  3. The Newbie Forum. 
  4. Ask a question at the next DitDat online seminar.
  5. DitDat Customer Support. (This will cost something! This is how we keep your basic prices low.)