{"id":76,"date":"2017-04-21T19:13:26","date_gmt":"2017-04-21T19:13:26","guid":{"rendered":"https:\/\/courses.lumenlearning.com\/suny-the-missing-link-an-introduction-to-web-development-and-programming\/chapter\/chapter-11-navigation\/"},"modified":"2019-06-13T16:16:32","modified_gmt":"2019-06-13T16:16:32","slug":"chapter-11-navigation","status":"publish","type":"chapter","link":"https:\/\/courses.lumenlearning.com\/suny-the-missing-link-an-introduction-to-web-development-and-programming\/chapter\/chapter-11-navigation\/","title":{"raw":"Chapter 11: Navigation","rendered":"Chapter 11: Navigation"},"content":{"raw":"
\n

\u00a0A feature found on almost every websites is a navigation system for moving between pages. These are typically menus, where groups of common pages are created to give the site a hierarchical organization. While the approach to visual styling and interaction with menus comes in great variety, most follow a basic principle of using unordered lists of links, and the application of CSS to those lists in order to turn them into the colorful, interactive elements we are accustomed to. While there are drawbacks that we will discuss in Visually Impaired Considerations<\/span><\/a>, alternative approaches can still utilize linked lists to some extent.<\/p>\nSince we created our menu earlier, we already know the contents and structure of our navigation. Our group label, or top-level labels, and the nested <ul>s represent the contents of the list for that menu item.\n\nSome popular approaches to providing a means of navigation are menu bars with drop downs, bread crumbs, and event driven responses. Menu bars are the most frequently utilized element, where hovering or clicking over an item in the menu brings up additional choices related to the main item. Typically referred to as drop down menus, they can be styled to move in any direction. Nesting lists within lists can give us a multi-tier menu that allows us the ability to select from a large number of pages with little effort.\n\nBreadcrumbs are typically depicted as a horizontal delimited list of pages, similar to:\n

  1. Home >> Sports >> Football >> Buffalo Bills >> Patriots >> Golf<\/li>\n<\/ol>\nThe breadcrumb does not follow a hierarchical notation, but acts more like a brief history of where you have been on the site, allowing you to skip back several steps at once without using your browser\u2019s back button. These can be helpful in sites with large amounts of content where the user\u2019s experience may not be particularly linear, as they move between topics or sections, like news or reference sites.\n\nEvent-driven navigation is useful in narrowing the user experience to a fixed set of paths. This method will only make certain links available under certain conditions, restricting the options a user has on a particular page to what they are allowed to do, which may be based on a variety of rules such as if they are logged in, previous links or decisions they have made, or if something in the system needs their attention.\n\nThese approaches can be used by themselves, or in combination to provide your user experience.\n

    Linking<\/h1>\nLinks in HTML can take two forms, both of which are created with the anchor tag (<a>). They can either point to a resource in another location, or to a location within the document. The former are used far more frequently than the latter, however internal links are coming back into popularity with the rise of infinite scrolling.\n

    Absolute, Base, and Relative Path<\/h2>\nThe href attribute of an anchor tag defines the actual location the link will represent. Absolute and relative paths are two reference methods for connecting sites and pages. While both methods can be used when creating links that point to content in our own site, only absolute can be used when pointing to content that is outside of your domain.\n\nAbsolute paths are the entire length of the link required to identify one resource, whether it is a page, image, script, or media file. The URL http:\/\/www.msn.com\/news\/ind<\/span><\/a>ex.htm<\/span> tells us we want to go to the index page in the news folder of the msn.com website. If this was our site, and we wanted to go to the index.htm file in the sports folder, we could write it as http:\/\/www.msn.com\/sports\/ind<\/span><\/a>ex.htm<\/span> (absolute) or ..\/sports\/index.htm (relative). The initial .. instructs the browser that our intention is to go back one layer of depth (i.e. \u201cup\u201d one level in folders) and then into the sports folder, which in this example sits in the same parent folder as our news page.\n\nUsing just an initial \/ without .. tells the server that we want to start at the root folder of the server and navigate from there, meaning we start with the base path.\n\nA base path is everything needed to get us to the index page of the root folder of the site. This is typically http:\/\/www.yoursitename.com, and is the part you find missing in the relative path above. The combination of the base path, and relative path, equals your absolute path.\n

    Target<\/h2>\nWhile the anchor tag supports several attributes, one of the most important of these is \u201ctarget.\u201d This attribute describes where links will be loaded, like a new tab or the same tab\/browser window we are already using. The attribute can take any of the following values to define that location.\n

    Table 2 Anchor Targets<\/a><\/em><\/p>\n\n<\/colgroup>
    \n

    Value<\/strong><\/p>\n<\/th>\n

    		\n

    Description<\/strong><\/p>\n<\/th>\n<\/tr>

    \n

    _blank<\/p>\n<\/td>\n

    		\n

    Opens the linked document in a new window or tab<\/p>\n<\/td>\n<\/tr>

    \n

    _self<\/p>\n<\/td>\n

    		\n

    Opens the linked document in the same frame as it was clicked (this is default)<\/p>\n<\/td>\n<\/tr>

    \n

    _parent<\/p>\n<\/td>\n

    		\n

    Opens the linked document in the parent frame<\/p>\n<\/td>\n<\/tr>

    \n

    _top<\/p>\n<\/td>\n

    		\n

    Opens the linked document in the full body of the window<\/p>\n<\/td>\n<\/tr>

    \n

    framename<\/em><\/p>\n<\/td>\n

    		\n

    Opens the linked document in a named frame<\/p>\n<\/td>\n<\/tr><\/tbody><\/table>

    From php.net manual, creative commons 3.0 Attribution<\/em><\/a><\/p>\n\n

    Within the Page<\/h2>\nWe can add links to a page that move the user around the page itself, which is useful on pages with long content. To do this, we use an anchor tag to define where we want our destination to be. When we create our link, we simply reference the name of our anchor, preceded by a pound sign in place of a traditional URL.\n<\/colgroup>
    \n
    • Some text here.<\/li>\n<\/ul>
      • <a href=\"#ourDestination\">Click here to go further down.<\/a><\/li>\n<\/ul>
        • Some more text.<\/li>\n<\/ul>
          • Even more text!<\/li>\n<\/ul>
            • <a name=\"ourDestination\"><\/li>\n<\/ul>
              • This is where we want to \"jump\" to.<\/li>\n<\/ul><\/td>\n
    		\n

    Some text here.\nClick here to go further down.<\/a>\nSome more text.\nEven more text!\n\nThis is where we want to \u201cjump\u201d to.\n<\/a><\/p><\/td>\n<\/tr><\/tbody><\/table><\/div>","rendered":"

    \n

    \u00a0A feature found on almost every websites is a navigation system for moving between pages. These are typically menus, where groups of common pages are created to give the site a hierarchical organization. While the approach to visual styling and interaction with menus comes in great variety, most follow a basic principle of using unordered lists of links, and the application of CSS to those lists in order to turn them into the colorful, interactive elements we are accustomed to. While there are drawbacks that we will discuss in Visually Impaired Considerations<\/span><\/a>, alternative approaches can still utilize linked lists to some extent.<\/p>\n

    Since we created our menu earlier, we already know the contents and structure of our navigation. Our group label, or top-level labels, and the nested <ul>s represent the contents of the list for that menu item.<\/p>\n

    Some popular approaches to providing a means of navigation are menu bars with drop downs, bread crumbs, and event driven responses. Menu bars are the most frequently utilized element, where hovering or clicking over an item in the menu brings up additional choices related to the main item. Typically referred to as drop down menus, they can be styled to move in any direction. Nesting lists within lists can give us a multi-tier menu that allows us the ability to select from a large number of pages with little effort.<\/p>\n

    Breadcrumbs are typically depicted as a horizontal delimited list of pages, similar to:<\/p>\n

      \n
    1. Home >> Sports >> Football >> Buffalo Bills >> Patriots >> Golf<\/li>\n<\/ol>\n

      The breadcrumb does not follow a hierarchical notation, but acts more like a brief history of where you have been on the site, allowing you to skip back several steps at once without using your browser\u2019s back button. These can be helpful in sites with large amounts of content where the user\u2019s experience may not be particularly linear, as they move between topics or sections, like news or reference sites.<\/p>\n

      Event-driven navigation is useful in narrowing the user experience to a fixed set of paths. This method will only make certain links available under certain conditions, restricting the options a user has on a particular page to what they are allowed to do, which may be based on a variety of rules such as if they are logged in, previous links or decisions they have made, or if something in the system needs their attention.<\/p>\n

      These approaches can be used by themselves, or in combination to provide your user experience.<\/p>\n

      Linking<\/h1>\n

      Links in HTML can take two forms, both of which are created with the anchor tag (<a>). They can either point to a resource in another location, or to a location within the document. The former are used far more frequently than the latter, however internal links are coming back into popularity with the rise of infinite scrolling.<\/p>\n

      Absolute, Base, and Relative Path<\/h2>\n

      The href attribute of an anchor tag defines the actual location the link will represent. Absolute and relative paths are two reference methods for connecting sites and pages. While both methods can be used when creating links that point to content in our own site, only absolute can be used when pointing to content that is outside of your domain.<\/p>\n

      Absolute paths are the entire length of the link required to identify one resource, whether it is a page, image, script, or media file. The URL http:\/\/www.msn.com\/news\/ind<\/span><\/a>ex.htm<\/span> tells us we want to go to the index page in the news folder of the msn.com website. If this was our site, and we wanted to go to the index.htm file in the sports folder, we could write it as http:\/\/www.msn.com\/sports\/ind<\/span><\/a>ex.htm<\/span> (absolute) or ..\/sports\/index.htm (relative). The initial .. instructs the browser that our intention is to go back one layer of depth (i.e. \u201cup\u201d one level in folders) and then into the sports folder, which in this example sits in the same parent folder as our news page.<\/p>\n

      Using just an initial \/ without .. tells the server that we want to start at the root folder of the server and navigate from there, meaning we start with the base path.<\/p>\n

      A base path is everything needed to get us to the index page of the root folder of the site. This is typically http:\/\/www.yoursitename.com, and is the part you find missing in the relative path above. The combination of the base path, and relative path, equals your absolute path.<\/p>\n

      Target<\/h2>\n

      While the anchor tag supports several attributes, one of the most important of these is \u201ctarget.\u201d This attribute describes where links will be loaded, like a new tab or the same tab\/browser window we are already using. The attribute can take any of the following values to define that location.<\/p>\n

      Table 2 Anchor Targets<\/a><\/em><\/p>\n\n\n\n<\/colgroup>\n\n\n\n\n\n\n\n
      \n

      Value<\/strong><\/p>\n<\/th>\n

      		\n

      Description<\/strong><\/p>\n<\/th>\n<\/tr>\n

      \n

      _blank<\/p>\n<\/td>\n

      		\n

      Opens the linked document in a new window or tab<\/p>\n<\/td>\n<\/tr>\n

      \n

      _self<\/p>\n<\/td>\n

      		\n

      Opens the linked document in the same frame as it was clicked (this is default)<\/p>\n<\/td>\n<\/tr>\n

      \n

      _parent<\/p>\n<\/td>\n

      		\n

      Opens the linked document in the parent frame<\/p>\n<\/td>\n<\/tr>\n

      \n

      _top<\/p>\n<\/td>\n

      		\n

      Opens the linked document in the full body of the window<\/p>\n<\/td>\n<\/tr>\n

      \n

      framename<\/em><\/p>\n<\/td>\n

      		\n

      Opens the linked document in a named frame<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

      From php.net manual, creative commons 3.0 Attribution<\/em><\/a><\/p>\n

      Within the Page<\/h2>\n

      We can add links to a page that move the user around the page itself, which is useful on pages with long content. To do this, we use an anchor tag to define where we want our destination to be. When we create our link, we simply reference the name of our anchor, preceded by a pound sign in place of a traditional URL.<\/p>\n\n\n\n<\/colgroup>\n\n\n
      \n
        \n
      • Some text here.<\/li>\n<\/ul>\n
          \n
        • <a href=”#ourDestination”>Click here to go further down.<\/a><\/li>\n<\/ul>\n
            \n
          • Some more text.<\/li>\n<\/ul>\n
              \n
            • Even more text!<\/li>\n<\/ul>\n
                \n
              • <a name=”ourDestination”><\/li>\n<\/ul>\n
                  \n
                • This is where we want to “jump” to.<\/li>\n<\/ul>\n<\/td>\n
      		\n

      Some text here.
      \nClick here to go further down.<\/a>
      \nSome more text.
      \nEven more text!
      \n
      \nThis is where we want to \u201cjump\u201d to.
      \n<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n\t\t\t

      \n\t\t\t

      Candela Citations<\/h3>\n\t\t\t\t\t
      \n\t\t\t\t\t\t
      \n\t\t\t\t\t\t\t
      CC licensed content, Shared previously<\/div>