Build a Flexible CSS Web Navigation Architecture

Build a Flexible CSS Web Navigation Architecture

he core of any Web site is the navigation mechanism, the menu. If Web sites are primarily about organizing and presenting content, a site’s menu provides the means of traversing this information set. In designing a Web navigation system, it is often difficult to balance the competing objectives of simplicity, flexibility, usability, and maintainability. Often very simple designs are not flexible; flexible designs trade off with usable ones; and easily maintainable designs are rarely even considered.

How do I develop a simple menu system for my Web site that is visually compelling, flexible, and easily maintainable?

Leverage Cascading Style Sheets (CSS) to produce a simple, HTML-formatted menu system built upon a flexible and maintainable architecture.

Define the Menu Links

At the core of a flexible CSS menu solution is a structured set of HTML markup for organizing the links. One of the most structured HTML elements available is the list element. For this solution, use an unordered list contained within a div tag (click here to download the index.htm example code). The following div tag serves as the container for the navigation menu:

This is convenient because it enables you to position the menu in a specific location (absolute positioning) or relative to another element on the page (relative positioning) using CSS. Relative positioning is the default, and that is sufficient for now.

The links are organized within an unordered list. As such, each link should appear on its own line and be preceded by a bullet (the default rendering provided by most browsers). This design is very flexible, allowing you to add additional menu items by simply expanding the list with another element.

The current rendering of the menu is very boring and bland (see Figure 1). Next, you will apply some CSS styling to improve the menu’s aesthetics.

Figure 1. Rendering of the Navigation Menu

Format the Menu Text with Style

It’s time to spruce up that drab list of hyperlinks. To do that, you will take away the bullets, arrange the links horizontally across the page, and add some formatting to the menu as a whole.

Bye Bye Bullets

Removing the bullets is as simple as applying a list-style: none attribute to the list elements via CSS:

#navigationBlock ul li {  list-style: none;}

Horizontal List

To orient the list items horizontally, use the display: inline CSS attribute:

#navigationBlock ul li {  list-style: none;  display: inline;}

Style the Menu

To style the menu, you format the text, set padding and margin, and draw a line across the bottom of the menu:

#navigationBlock ul {  border-bottom: 1px solid #9999AA;    font: bold 11px Verdana, Arial, sans-serif;  margin-left: 0px;  padding: 3px 0px;}

By implementing these changes, you now have a much more visually appealing menu (see Figure 2). You could leave the menu as is, or take the instructions in the following section to further enhance the interface.

Figure 2. Rendering of Spruced Up Navigation Menu

Visually Transform the Menu

In this final pass, you will transform the menu from a horizontal list of links to a fully graphical tabbed menu system.

Folder Tab Visual

To give the menu the folder tab appearance, take the following steps:

  1. Draw a box around each list item.
  2. Remove the bottom border of the box, specify a background color.
  3. Remove the line under each link.
  4. Set margin and padding.

Here’s the code:

#navigationBlock ul li a {  background: #eeeeff;    border: 1px solid #9999AA;  border-bottom: none;  margin-left: 1px;  padding: 3px 6px;  text-decoration: none;}

Define Mouseovers

To improve the feel of the menu, define CSS mouseovers to alter the tab’s response to user interaction. Format the links in a typical fashion (visited links appear differently), and use the hover attribute to specify a change to the tab background color and link color:

#navigationBlock ul li a:link {  color: #6666CC;}#navigationBlock ul li a:visited {  color: #999999;}#navigationBlock ul li a:hover, #navigationBlock ul li a:visited:hover {  background: #cccccc;  border-color: #333399;  color: #ffffff;}

Mark the Current Page’s Tab (Static HTML)

The final touch is to set the tab background color to indicate the current page the user is browsing. Accomplish this by setting #navCurrent ID on the element associated with the page in question:

#navigationBlock ul li a#navCurrent {  background: #ffffff; /* set to the same color as the page background */  border-bottom: 1px solid #ffffff; /* set line to same color as tab */}

This will also require a change to the HTML list on each page to indicate the link that should be marked:

  • Home
  • By moving the navCurrent ID to the corresponding link for each page, you make the tab appear correctly on every page (see Figure 3).

    Figure 3. The Tab Appears Correctly on Every Page

    Mark the Current Page’s Tab (Dynamic HTML)

    Setting the tab background color on each page is fine for static menu systems, but it is not practical for dynamic Web sites (JSP, ASP, PHP, etc.) where the menus tend to be stored in single files and included on individual pages as needed. One method for solving this is to specify an ID on the body tag of each page and IDs on every link. Then use CSS to modify the tab background for the corresponding page.

    Associate the body tag ID with its corresponding link ID. Assign an ID to the body tag for a given page as identified here:

    body#home a#navHome,body#products a#navProducts,body#services a#navServices,body#careers a#navCareers,body#about a#navAbout {  background: #ffffff; /* set to the same color as the page background */  border-bottom: 1px solid #ffffff; /* set line to same color as tab */}

    You should then set IDs for the links accordingly. Consider the following example for the home page:


    The body tag ID should change for each page. You could either copy and paste the navigation div on each page, or put it in a separate file and dynamically include it. The end result is visually the same as the static HTML approach (see Figure 3).

    A Simple, Flexible CSS Menu

    Navigation is an essential element for the Web. While a slew of potential navigation architectures are available, few pass the tests of simplicity, maintainability, and flexibility. This solution passes each test and affords a compelling graphical tabbed menu interface. Through the power of CSS, an ordinary list of links can be transformed into a robust, flexible Web navigation architecture.

    Share the Post:
    XDR solutions

    The Benefits of Using XDR Solutions

    Cybercriminals constantly adapt their strategies, developing newer, more powerful, and intelligent ways to attack your network. Since security professionals must innovate as well, more conventional endpoint detection solutions have evolved

    AI is revolutionizing fraud detection

    How AI is Revolutionizing Fraud Detection

    Artificial intelligence – commonly known as AI – means a form of technology with multiple uses. As a result, it has become extremely valuable to a number of businesses across

    AI innovation

    Companies Leading AI Innovation in 2023

    Artificial intelligence (AI) has been transforming industries and revolutionizing business operations. AI’s potential to enhance efficiency and productivity has become crucial to many businesses. As we move into 2023, several

    data fivetran pricing

    Fivetran Pricing Explained

    One of the biggest trends of the 21st century is the massive surge in analytics. Analytics is the process of utilizing data to drive future decision-making. With so much of

    kubernetes logging

    Kubernetes Logging: What You Need to Know

    Kubernetes from Google is one of the most popular open-source and free container management solutions made to make managing and deploying applications easier. It has a solid architecture that makes

    ransomware cyber attack

    Why Is Ransomware Such a Major Threat?

    One of the most significant cyber threats faced by modern organizations is a ransomware attack. Ransomware attacks have grown in both sophistication and frequency over the past few years, forcing

    data dictionary

    Tools You Need to Make a Data Dictionary

    Data dictionaries are crucial for organizations of all sizes that deal with large amounts of data. they are centralized repositories of all the data in organizations, including metadata such as