{"id":98,"date":"2020-06-02T15:24:07","date_gmt":"2020-06-02T19:24:07","guid":{"rendered":"http:\/\/mcluhan-template.trubox.ca\/?page_id=98"},"modified":"2020-06-02T15:24:07","modified_gmt":"2020-06-02T19:24:07","slug":"creating-a-menu","status":"publish","type":"page","link":"https:\/\/create.twu.ca\/palvisportfolio\/technical-instructions\/creating-a-menu\/","title":{"rendered":"Creating a Menu"},"content":{"rendered":"\n

Menus<\/h2>\n\n\n\n

First let’s go over why menus are important. Menus determine how visitors will interact with your content. They drive navigation and without functional navigation, your ePortfolio is all but useless. Good navigation will allow your visitors to successfully search your site, and they will stay longer as they will be they will be able to find what they are looking for without extraneous scrolling or button clicking. This may sound daunting, but the only thing you need to remember is KEEP IT SIMPLE! <\/p>\n\n\n\n

Visitors will read your menu from left to right so make sure the most important links come first. Also, it looks untidy if titles are lengthy so keep them short. (See Customizing Menu Items<\/a> below) Short, sharp and punchy link names work best to capture your readers attention! <\/p>\n\n\n\n

Most often, menus appear in the header and\/or footer of a website, the default placement of your menu will depend on the theme you have chosen. Commonly the site’s menu will appear near the top of the page as a horizontal bar below the site’s title. On a mobile device, the menu may appear as a hamburger icon (three short horizontal lines) in the top left or right corner of the device. <\/p>\n\n\n\n

Note: Your menu will need to be set each time you change your theme.<\/p>\n\n\n\n

HELP! What if pages are automatically appearing in my menu! <\/em><\/p>\n\n\n\n

Generally this means one of two things:<\/p>\n\n\n\n

  1. You have not defined a custom menu yet, by default WordPress will add any new pages to your menu.<\/li>
  2. You have not unchecked the option to automatically add new pages to your custom menu.<\/li><\/ol>\n\n\n\n
    \n\n\n\n

    Defining a Menu<\/h3>\n\n\n\n
    \n
    \n

    The following steps outline how to define a menu. You must define a menu before you can add items to it:<\/p>\n\n\n\n

    1. Click Appearance <\/strong>then click Menus<\/strong><\/li>
    2. Select create a new menu<\/strong> at the top of the page.<\/li>
    3. Enter a name for the menu in the Menu Name<\/em> box.<\/li>
    4. Click the Create Menu<\/strong> button.<\/li><\/ol>\n<\/div>\n\n\n\n
      \n
      \"\"<\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
      \n\n\n\n

      Adding the menu to your site<\/h3>\n\n\n\n
      \n
      \n

      If your current theme supports custom menus, you will be able to add your new menu to one of the Theme Locations<\/strong>.<\/p>\n\n\n\n

      1. Scroll to the bottom of the menu editor window.<\/li>
      2. In the section titled Theme locations<\/em>, click the check box for the location where you want your menu to appear.<\/li>
      3. Click Save menu<\/strong> once you’ve made your selection.<\/li><\/ol>\n<\/div>\n\n\n\n
        \n
        \"Adding<\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
        \n\n\n\n

        Adding Items to a Menu<\/h3>\n\n\n\n
        \n
        \n

        You can add different link types into your menu. These are split between panes left of the menu you’re currently editing.<\/p>\n\n\n\n

        1. Locate the Add menu items <\/strong>pane. (For these instructions we will be using the Pages pane)<\/li>
        2. Within this pane, select the View All<\/em> link to bring up a list of all the currently published Pages on your site.<\/li>
        3. Select the Pages that you want to add by clicking the checkbox next to each Page’s title.<\/li>
        4. Click the Add to Menu<\/strong> button located at the bottom of this pane to add your selection(s) to the menu that you created in the previous step.<\/li>
        5. Once all the items have been added you can drag and drop them into the order you wish for them to appear.<\/li>
        6. Click the Save Menu<\/strong> button once you’ve added all the menu items you want.<\/li><\/ol>\n<\/div>\n\n\n\n
          \n
          \"\"<\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n

          Customizing Menu Items<\/h4>\n\n\n\n
          \n
          \n
          1. Navigation Label: This is what your visitors will see when they visit your site\/blog, consider using short, sharp and punchy link names.<\/li>
          2. Title Attribute: This field specifies the Alternative (‘Alt’) text for the menu item. This text will be displayed when a user’s mouse hovers over a menu item.<\/li>
          3. Open link in new tab checkbox: opens linked page\/post\/url in a new tab<\/li>
          4. CSS Classes: Optional CSS Classes for this menu item<\/li>
          5. Link Relationship (XFN): Allows for the generation of XFN attributes automatically so you can show how you are related to the authors\/owners of site to which you are linking. See Link Relationship<\/a> for details.<\/li>
          6. Description: Description for this link. The description will be displayed in the menu if the current theme supports it.<\/li>
          7. Move: moves the item within the menu<\/li>
          8. Original: A link to the original item, don’t forget to save your changes before you navigate away from the menu<\/li>
          9. Remove\/Cancel: Remove, removes the item from the menu, it does not delete the page\/post. Cancel, cancels the custom changes you have made to the item<\/li><\/ol>\n<\/div>\n\n\n\n
            \n
            \"Customize<\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
            \n\n\n\n

            Creating Drop-down (Multi-level) Menus<\/h3>\n\n\n\n

            Using drop-down menus keeps your sites navigation simple and clean. We caution on going too deep as it can be frustrating for people who are accessing your site on a mobile device. If possible, keep your menu structure to 2 levels. When planning your menu’s structure, it may be helpful to think of each item as a heading in a report. Imagine creating the table of contents for this report: All the level 1 headings are nearest to the left, level 2 headings are slightly indented to the right, level 3 headings are indented even further to the right. WordPress has a simple drag and drop interface for creating drop-down menus. If you have not ordered your menu items by dragging and dropping into the correct order as indicated in step 5 of Adding Items to a Menu<\/a> you should do so now.<\/p>\n\n\n\n

            To create a drop-down list in your menu you need to position the “child” under its “parent.” The following instructions outline how to create drop-down (multi-level) menus:<\/p>\n\n\n\n

            1. Ensure the menu items are in the correct order.<\/li>
            2. Position you mouse over the “child” menu item.<\/li>
            3. Hold the left mouse button down and drag the item to the right, release the button.<\/li>
            4. Repeat steps 2 and 3 for each child item.<\/li>
            5. Click the Save Menu<\/strong> button.<\/li><\/ol>\n\n\n\n
              \n
              \n
              \"Menu<\/figure><\/div>\n<\/div>\n\n\n\n
              \n
              \"Multi-level<\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n
              \n
              \n

              One final thought, what if you want the “parent” to only be a label, text only? You can have a “parent” menu item be just text, here’s how:<\/p>\n\n\n\n

              1. From your dashboard click Appearance <\/strong>> Menus<\/strong><\/li>
              2. Below the heading Add menu items<\/strong> select Custom Links<\/strong><\/li>
              3. In the URL <\/strong>field replace https:\/\/<\/em> with #<\/strong><\/li>
              4. Add your navigation label in the Link text<\/strong> field<\/li>
              5. Click Add to menu<\/strong><\/li><\/ol>\n<\/div>\n\n\n\n
                \n
                \"Adding<\/figure><\/div>\n<\/div>\n<\/div>\n\n\n\n

                Want more information and instructions regarding your menus in WordPress, check out How to Add Navigation Menu in WordPress (Beginner’s Guide) at: https:\/\/www.wpbeginner.com\/beginners-guide\/how-to-add-navigation-menu-in-wordpress-beginners-guide\/ <\/a><\/p>\n\n\n","protected":false},"excerpt":{"rendered":"

                Menus First let’s go over why menus are important. Menus determine how visitors will interact with your content. They drive navigation and without functional navigation, your ePortfolio is…<\/p>\n","protected":false},"author":2087,"featured_media":0,"parent":351,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","footnotes":""},"class_list":["post-98","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/create.twu.ca\/palvisportfolio\/wp-json\/wp\/v2\/pages\/98","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/create.twu.ca\/palvisportfolio\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/create.twu.ca\/palvisportfolio\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/create.twu.ca\/palvisportfolio\/wp-json\/wp\/v2\/users\/2087"}],"replies":[{"embeddable":true,"href":"https:\/\/create.twu.ca\/palvisportfolio\/wp-json\/wp\/v2\/comments?post=98"}],"version-history":[{"count":0,"href":"https:\/\/create.twu.ca\/palvisportfolio\/wp-json\/wp\/v2\/pages\/98\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/create.twu.ca\/palvisportfolio\/wp-json\/wp\/v2\/pages\/351"}],"wp:attachment":[{"href":"https:\/\/create.twu.ca\/palvisportfolio\/wp-json\/wp\/v2\/media?parent=98"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}