How to Set up Quick Navigation with CSS3

Most sites provide some sort of site navigation aid. If you don’t provide this sort of support with your CSS3 programming, the user may get lost and you’ll lose business or at least activity. Site navigation makes information easier to find and use. In addition, you really need it in order for the user to make good use of your site.

The following procedure describes how to add site navigation without programming to a page. It doesn’t do anything fancy, but it does work well with most browsers.

  1. Create a new HTML5 file with your text editor.

  2. Type the following code for the HTML page.

    <!DOCTYPE html>
    <html>
    <head>
     <title>Navigating User Interfaces</title>
     <link rel="stylesheet" href="Navigation.CSS" />
    </head>
    <body>
     <ul id="MainMenu">
     <li>
      <a href="Navigation.HTML">Home</a>
     </li>
     <li>
      <a href="Navigation.HTML">Products</a>
      <ul>
      <li>
      <a href="Navigation.HTML">One</a>
      </li>
      <li>
      <a href="Navigation.HTML">Two</a>
      </li>
      <li>
      <a href="Navigation.HTML">Three</a>
      </li>
      <li>
      <a href="Navigation.HTML">Four</a>
      </li>
      </ul>
     </li>
     <li>
      <a href="Navigation.HTML">Events</a>
      <ul>
      <li>
      <a href="Navigation.HTML">Red</a>
      </li>
      <li>
      <a href="Navigation.HTML">Green</a>
      </li>
      <li>
      <a href="Navigation.HTML">Blue</a>
      </li>
      <li>
      <a href="Navigation.HTML">Orange</a>
      </li>
      </ul>
     </li>
     <li>
      <a href="Navigation.HTML">About</a>
      <ul>
      <li>
      <a href="Navigation.HTML">Contact</a>
      </li>
      <li>
      <a href="Navigation.HTML">Founding</a>
      </li>
      <li>
      <a href="Navigation.HTML">Privacy</a>
      </li>
      </ul>
     </li>
     </ul>
    </body>
    </html>

    The menu system consists of a number of lists. Each unordered list represents another layer of menus. This example has just two layers, but you can easily apply the concepts to any number of layers desired. The overall menu is enclosed with an unordered list element (<ul>) named MainMenu. The name is important because you’ll use it extensively when creating the required styles.

  3. Save the file as Navigation.HTML.

  4. Create a new CSS file with your text editor.

  5. Type the following CSS style information.

    #MainMenu
    {
     margin: 0;
     padding: 0;
    }
    #MainMenu li
    {
     margin: 0;
     padding: 0;
     list-style: none;
     float: left;
    }
    #MainMenu li a
    {
     display: block;
     margin: 0 1px 0 0;
     padding: 4px 10px;
     width: 80px;
     background: Black;
     color: White;
     text-align: center;
    }
    #MainMenu li a:hover
    {
     background: Green;
    }
    #MainMenu li:hover ul
    {
     visibility: visible;
    }
    #MainMenu ul
    {
     position: absolute;
     visibility: hidden;
     margin: 0;
     padding: 0;
     background: Grey;
     border: 1px solid White;
     width: 80px;
    }
    #MainMenu ul a
    {
     position: relative;
     display: block;
     margin: 0;
     padding: 5px 10px;
     width: 80px;
     text-align: left;
     background: LightGrey;
     color: Black;
    }
    #MainMenu ul a:hover
    {
     background: Violet;
    }

    Wow, that’s a lot of code! Styles can become complex as you try to do more with them. That’s why many developers rely heavily on third party libraries and tools. Trying to come up with all that style information on your own is time consuming.

    The kind of menu here is easily made using a tool such as CSS Menu Maker, Menucool.com, or CSS3 Menu. However, it’s important to go through this exercise at least once so you know how things work.

    The styles begin with the MainMenu, an unordered list (<ul>) element. Everything is referenced to this element. The MainMenu consists of a number of list items (<li>), which are set using the #MainMenu li style. You don’t want the list items to actually look like a list — you want them to look like menus — so it’s essential to set the list-style to none.

    Setting float to left will also help give the menu a professional appearance. Within each list item is an anchor (<a>) that points to the location to which the user goes after selecting the menu item. The #MainMenu li a style creates the required appearance, which includes displaying the item as a block.

    When the user hovers the mouse over one of the MainMenu items, the #MainMenu li a:hover style turns the entry green.

    The #MainMenu li:hover ul requires a little explanation. Normally, the secondary menu has its visibility set to hidden, so that you don’t see it. When a user hovers the mouse over a MainMenu list item, you want the submenu displayed. This style performs that task. It creates the appearance of using code without actually using any code.

    The submenus will appear vertically, below the horizontal main menu. In order to do this, the #MainMenu ul style sets the width to 80px, the size required to hold a single menu entry. This setting must match the width setting for the #MainMenu ul a style.

    Notice that this second level of menus has its visibility property set to hidden because you don’t want to see it until the user clicks the associated main menu item. As with the main menu, you want users to know when they have selected a particular item, so the #MainMenu ul a:hover style changes the menu’s background value to Violet.

  6. Save the file as Navigation.CSS.

  7. Load the Navigation example.

    You see the menu (your menu won’t have anything selected initially and will appear as a black bar across the top of the page).

    image0.jpg

    Try selecting various items. The example uses the existing site for each of the links, but if you want, you can try using other links. Clicking a link will take you to the desired location.

    The point of this menu is that you can create quite a few user interface items that look like they’re coded, but really aren’t, using CSS. This CSS-only approach will work with most browsers without having to ask the user to enable JavaScript. Most browsers support the level of CSS required to make this menu system work.

blog comments powered by Disqus
Advertisement

Inside Dummies.com