Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
The following three selectors are usful for formatting lists of items, such as menus and tables:
The following examples show how each of the above selectors can be used to animate menus.
The following example displays a vertical menu that uses the "first-of-type" and "last-of-type" selectors to give the menus rounded corners.
Example of Menu With first-of-type and last-of-type (Run Example)
<!doctype html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu a
{
text-decoration:none;
}
.menu ul li span, /* span is used to identify drop-down title */
.menu a
{
display:block; /* Expand hyperlink to fill container*/
background-color:#61c6f0;
color:#ccc;
}
.menu ul li:hover span,
.menu a:hover,
.menu a:active
{
background-color:#ddd;
color:#0ac;
}
.menu ul
{
list-style:none; /* Remove the bullet from list items */
padding:0px; /* Remove default padding from list items */
margin:0px;
}
.menu li
{
width:100px; /* width for each list item. Not absolutely necessary for horizontal menus. */
text-align:center; /* Not needed for either menu. */
}
.menu.horizontal li
{
display:inline-block; /* Force list items onto same line. */
float:left; /* Force list items tight together. */
}
.menu.vertical li
{
display:block; /* Force list items onto seperate lines. */
}
/* Add styles to give menu rounded corners*/
.menu.horizontal li a
{
border-top:thin solid black;
border-bottom:thin solid black;
}
.menu.horizontal li:first-of-type a
{
border-left:thin solid black;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
}
.menu.horizontal li:last-of-type a
{
border-right:thin solid black;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
}
.menu.vertical li a
{
border-left:thin solid black;
border-right:thin solid black;
}
.menu.vertical li:first-of-type a
{
border-top:thin solid black;
border-top-left-radius:20px;
border-top-right-radius:20px;
}
.menu.vertical li:last-of-type a
{
border-bottom:thin solid black;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
</style>
</head>
<body>
<div 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>
</div>
<br>
<br>
<div class="vertical 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>
</div>
</body>
</html>
Example of a menu with nth-of-type(odd) and nth-of-type(even) (Run Example)
<!doctype html>
<html>
<head>
<title>Course notes example code</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.menu a
{
text-decoration:none;
}
.menu ul li span, /* span is used to identify drop-down title */
.menu a
{
display:block; /* Expand hyperlink to fill container*/
background-color:#61c6f0;
color:#ccc;
}
.menu ul li:hover span,
.menu a:hover,
.menu a:active
{
background-color:#ddd;
color:#0ac;
}
.menu ul
{
list-style:none; /* Remove the bullet from list items */
padding:0px; /* Remove default padding from list items */
margin:0px;
}
.menu li
{
width:100px; /* width for each list item. Not absolutely necessary for horizontal menus. */
text-align:center; /* Not needed for either menu. */
}
.menu.horizontal li
{
display:inline-block; /* Force list items onto same line. */
float:left; /* Force list items tight together. */
}
.menu.vertical li
{
display:block; /* Force list items onto seperate lines. */
}
/* Add styles to give menus rounded corners*/
.menu.horizontal li a
{
border-top:thin solid black;
border-bottom:thin solid black;
}
.menu.horizontal li:first-of-type a
{
border-left:thin solid black;
border-top-left-radius:20px;
border-bottom-left-radius:20px;
}
.menu.horizontal li:last-of-type a
{
border-right:thin solid black;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
}
.menu.vertical li a
{
border-left:thin solid black;
border-right:thin solid black;
}
.menu.vertical li
{
margin-top:10px; /* need margin to stop rotated list items overlapping */
}
.menu.vertical li:nth-of-type(odd) a
{
transform:rotate(5deg);
}
.menu.vertical li:nth-of-type(even) a
{
transform:rotate(-5deg);
}
.menu.vertical li:hover span,
.menu.vertical li a:hover,
.menu.vertical li a:active
{
transform:rotate(0deg);
}
</style>
</head>
<body>
<div 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>
</div>
<br>
<br>
<div class="vertical 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>
</div>
</body>
</html>
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.