CSS Menus

We can use CSS to build horizontal and vertical menus. The content of CSS menus is contained within an unsigned list, as shown below:


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
</ul>
</body>
</html>

Each menu item needs to link to somewhere. This is achieved using hyperlinks, as shown below:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<ul>
<li><a href="../home/home.html">Home</a></li>
<li><a href="../about_us/about_us.html">About Us</a></li>
<li><a href="../products/products.html">Products</a></li>
</ul>
</body>
</html>

Each menu should be sourrounded by a <nav> tag, to indicate to brousers that it is being used for navigation, as shown below:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<nav>
<ul>
<li><a href="../home/home.html">Home</a></li>
<li><a href="../about_us/about_us.html">About Us</a></li>
<li><a href="../products/products.html">Products</a></li>
</ul>
</nav>
</body>
</html>

Run the code above.

List the physical changes that need to be made so that the list will look like a menu.

Each menu-list needs to look like a proper menu. The generic menu styles, which will be common to both vertical and horizontal menus, can be placed in a CSS class called menu. There will also need to be two other CSS classes; one each for vertical and horizontal menus.

The CSS menu class will need to:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu ul
{
  list-style : none;  /* Remove the bullet from list items */
  padding    : 0px;   /* Remove default padding from list items */ 
  margin     : 0px;   /* Remove default margin from list items */
}

.menu a
{
  text-decoration  : none; /* remove the underline from a menu */
  color            : #ccc;    
  background-color : #61c6f0;
}

.menu a:hover,
.menu a:active
{
  color            : #0ac;
  background-color : #ddd;
}
</style>
</head>

<body>
<nav class = "menu">
<ul>
<li><a href="../home/home.html">Home</a></li>
<li><a href="../about_us/about_us.html">About Us</a></li>
<li><a href="../products/products.html">Products</a></li>
</ul>
</nav>
</body>
</html>

Run the above code.

List the physical changes that need to be made to improve the way the menu looks.

To make the menu items all the same width, we need to:

set the width of each list item, so that all of the menu items are the same width

align the text inside each list item, so that all list items are centered

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu ul
{
  list-style : none;  /* Remove the bullet from list items */
  padding    : 0px;   /* Remove default padding from list items */ 
  margin     : 0px;   /* Remove default margin from list items */
}

.menu li
{
  width      : 80px;    /* width for each list item. Not absolutely necessary for horizontal menus. */
  text-align : center;  /* Not needed for either menu. */
}

.menu a
{
  text-decoration  : none; /* remove the underline from a menu */
  color            : #ccc;    
  background-color : #61c6f0;
  display          : block;      /* Expand hyperlink to fill container */
}

.menu a:hover,
.menu a:active
{
  color            : #0ac;
  background-color : #ddd;
}
</style>
</head>

<body>
<nav class = "menu">
<ul>
<li><a href="../home/home.html">Home</a></li>
<li><a href="../about_us/about_us.html">About Us</a></li>
<li><a href="../products/products.html">Products</a></li>
</ul>
</nav>
</body>
</html>

Run the above code.

What changes need to be made to the above code to have a horrizontal menu?

In order to distinguish between vertical and horizontal menus, we need two more classes; one each for vertical and horizontal menus.

For the moment, we do not need to add any extra properties to the vertical menu. However, we shall need to add them when we develop drop-down menus.

Each item on a horizontal menu needs to be on the same line. Horrizontal menus will have two CSS classes associated with them (<nav class = "horizontal menu">), as shown below:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu ul
{
  list-style : none;  /* Remove the bullet from list items */
  padding    : 0px;   /* Remove default padding from list items */
  margin     : 0px;   /* Remove default margin from list items */
}

.menu li
{
  width      : 80px;    /* width for each list item. Not absolutely necessary for horizontal menus. */
  text-align : center;  /* Not needed for either menu. */
}

.menu a
{
  text-decoration  : none; /* remove the underline from a menu */
  color            : #ccc;    
  background-color : #61c6f0;
  display          : block;      /* Expand hyperlink to fill container */
}

.menu a:hover,
.menu a:active
{
  color            : #0ac;
  background-color : #ddd;
}

.menu.vertical
{
  /* This will only be needed when we develop drop-down menus */
}

.menu.horizontal li
{
  display : inline-block;  /* Force list items onto same line. */
  float   : left;          /* Force list items tight together. */
}
</style>
</head>

<body>
<nav class = "horizontal menu">
<ul>
<li><a href="../home/home.html">Home</a></li>
<li><a href="../about_us/about_us.html">About Us</a></li>
<li><a href="../products/products.html">Products</a></li>
</ul>
</nav>
</body>
</html>

Run the above code.

Change the code so that you get a vertical menu.

Drop Down Menus

In drop-down menus, some menu items might not be links. For example, if we have three products that appear when the mouse hovers over a "Product" menu item, the Product item's only role is as a container. The three products each link to an item, but the Product menu item does not link to anything. We use the <span> tag to identify non-active menu items.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu ul
{
  list-style : none;  /* Remove the bullet from list items */
  padding    : 0px;   /* Remove default padding from list items */
  margin     : 0px;   /* Remove default margin from list items */
}

.menu li
{
  width      : 80px;    /* width for each list item. Not absolutely necessary for horizontal menus. */
  text-align : center;  /* Not needed for either menu. */
}

.menu a,
.menu span
{
  text-decoration  : none;    /* remove the underline from a menu */ 
  color            : #ccc; 
  background-color : #61c6f0;
  display          : block;   /* Expand hyperlink to fill container*/
}

.menu a:hover,
.menu a:active,
.menu span:hover
{
  color            : #0ac;
  background-color : #ddd;
}

.menu span:hover /* make the mouse hoveing over a span be the same as hoving over a hyperlink */
{
  cursor: pointer;
}

.menu.vertical
{
  /* This will only be needed when we develop drop-down menus */
}
 
.menu.horizontal li
{
  display : inline-block;  /* Force list items onto same line. */
  float   : left;          /* Force list items tight together. */
}
</style>
</head>

<body>
<nav class = "horizontal menu">
<ul>
<li><a href="../home/home.html">Home</a></li>
<li><a href="../about_us/about_us.html">About Us</a></li>
<li><span>Products</span></li>
</ul>
</nav>
</body>
</html>

A sub-menu is just another menu. This means it is just another list containing list items. Placing a sub-menu inside a menu is achieved by placing a list inside a list, as shown below:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu ul
{
  list-style : none;  /* Remove the bullet from list items */
  padding    : 0px;   /* Remove default padding from list items */
  margin     : 0px;   /* Remove default margin from list items */
}

.menu li
{
  width      : 80px;    /* width for each list item. Not absolutely necessary for horizontal menus. */
  text-align : center;  /* Not needed for either menu. */
}

.menu a,
.menu span
{
  text-decoration  : none;    /* remove the underline from a menu */ 
  color            : #ccc; 
  background-color : #61c6f0;
  display          : block;   /* Expand hyperlink to fill container*/
}

.menu a:hover,
.menu a:active,
.menu span:hover
{
  color            : #0ac;
  background-color : #ddd;
}

.menu span:hover /* make the mouse hoveing over a span be the same as hoving over a hyperlink */
{
  cursor: pointer;
}
 
.menu.horizontal li
{
  display : inline-block;  /* Force list items onto same line. */
  float   : left;          /* Force list items tight together. */
}
</style>
</head>

<body>
<nav class = "menu">
<ul>
<li><a href="../home/home.html">Home</a></li>
<li><a href="../about_us/about_us.html">About Us</a></li>
<li><span>Products</span>
<ul>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a></li> </ul>
</li> </ul> </nav> </body> </html>

Run the above code.

How do you think that sub-menu can be shown/hidden?

To show/hide the sub-menu requires us setting its visibility, as shown below:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu ul
{
  list-style : none;  /* Remove the bullet from list items */
  padding    : 0px;   /* Remove default padding from list items */
  margin     : 0px;   /* Remove default margin from list items */
}

.menu li
{
  width      : 80px;    /* width for each list item. Not absolutely necessary for horizontal menus. */
  text-align : center;  /* Not needed for either menu. */
}

.menu a,
.menu span
{
  text-decoration  : none;    /* remove the underline from a menu */ 
  color            : #ccc; 
  background-color : #61c6f0;
  display          : block;   /* Expand hyperlink to fill container*/
}

.menu a:hover,
.menu a:active,
.menu span:hover
{
  color            : #0ac;
  background-color : #ddd;
}

.menu span:hover /* make the mouse hoveing over a span be the same as hoving over a hyperlink */
{
  cursor: pointer;
}
 
.menu.horizontal li
{
  display : inline-block;  /* Force list items onto same line. */
  float   : left;          /* Force list items tight together. */
}

/* needed for drop-down menus */ 
.menu ul li ul
{
  visibility : hidden;
}

.menu ul li:hover ul
{
  visibility : visible;
}
</style>
</head>

<body>
<nav class = "horizontal menu">
<ul>
<li><a href="../home/home.html">Home</a></li>
<li><a href="../about_us/about_us.html">About Us</a></li>
<li><span>Products</span>
<ul>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a></li> </ul> </li> </ul> </nav> </body> </html>

Run the above code.

What is the problem with this code when it is used with a vertical menu?

Unfortunately, the vertical menu displays its sub-menu below the hovered <span> item. We would prefer to display it to the right of the hovered <span>. To do this, we need to position the sub-menu relative to the original menu, as shown below:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu ul
{
  list-style : none;  /* Remove the bullet from list items */
  padding    : 0px;   /* Remove default padding from list items */
  margin     : 0px;   /* Remove default margin from list items */
}

.menu li
{
  width      : 80px;    /* width for each list item. Not absolutely necessary for horizontal menus. */
  text-align : center;  /* Not needed for either menu. */
}

.menu a,
.menu span
{
  text-decoration  : none;    /* remove the underline from a menu */ 
  color            : #ccc; 
  background-color : #61c6f0;
  display          : block;   /* Expand hyperlink to fill container*/
}

.menu a:hover,
.menu a:active,
.menu span:hover
{
  color            : #0ac;
  background-color : #ddd;
}

.menu span:hover /* make the mouse hoveing over a span be the same as hoving over a hyperlink */
{
  cursor: pointer;
}
 
.menu.horizontal li
{
  display : inline-block;  /* Force list items onto same line. */
  float   : left;          /* Force list items tight together. */
}

/* needed for drop-down menus */ 
.menu ul li ul
{
  visibility : hidden;
  position   : absolute;  
}

.menu ul li:hover ul
{
  visibility : visible;
}

.menu ul li
{
  position : relative; 
}

.menu.vertical ul li ul
{
  left : 80px;  /* Position vertical drop-down menus */
  top  : 0px;
}
</style>
</head>

<body>
<nav class = "horizontal menu">
<ul>
<li><a href="../home/home.html">Home</a></li>
<li><a href="../about_us/about_us.html">About Us</a></li>
<li><span>Products</span>
<ul>
<li><a href="">Product 1</a></li>
<li><a href="">Product 2</a></li>
<li><a href="">Product 3</a></li> </ul> </li> </ul> </nav> </body> </html>

Run the above code.

Write code to place a vertical and a horizontal menu within the structure of a css laid out webpage, as shown here.

Write code to give a menu that contains a list of the departments within the four schools in DkIT. When the user selects a menu item, it should load into an iframe in the current webpage, as shown here.

 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>