We create menus using the unordered list tags <ul></ul> and the list item tags <li></li>.
Let’s start with some raw html and see what it looks like.
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<h1>Menu</h1>
<ul>
<li><a href="http://www.google.com" target="_blank">Google</a></li>
<li><a href="http://www.bing.com" target="_blank">Bing</a></li>
<li><a href="http://www.yahoo.com" target="_blank">Yahoo</a></li>
<li><a href="http://www.youtube.com" target="_blank">Youtube</a></li>
</ul>
</body>
</html>
Horrible really. So let’s do some styling!
A common blank style sheet for unordered lists would be as follows.
style.css
/* style the unordered list */
ul {
}
/* style the list items in the unordered list */
ul li {
}
/* style the text inside the link inside the
list item, withing the unordered list */
ul li a{
}
The blank style sheet above is very standard. It allows us to style the unordered list, the list items within the unordered list, and the text within the links that are within the list items, within the unordered list.
index.html
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="browser-reset.css">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<!-- nav tags are used for menus -->
<nav>
<ul>
<li><a href="http://www.google.com" target="_blank">Google</a></li>
<li><a href="http://www.bing.com" target="_blank">Bing</a></li>
<li><a href="http://www.yahoo.com" target="_blank">Yahoo</a></li>
<li><a href="http://www.youtube.com" target="_blank">Youtube</a></li>
</ul>
</nav>
</body>
</html>
style.css
body {
background-color: #422FFF;
}
/* style the nav tags */
nav {
width: 100%;
height: 50px;
background-color: #FFE02C;
}
/* style the unordered list */
ul {
/* move the unordered list to the
right 100 pixels */
margin-left: 100px;
}
/* style the list items in the unordered list */
ul li {
/* links are side by side */
display: inline-block;
/* removes none clickable gap between text */
float: left;
/* vertically centers the list in the nav box */
line-height: 50px;
/* no padding top and bottom
but 25 px padding left and right */
padding: 0 25px;
}
/* style the text inside the link inside the
list item, within the unordered list */
ul li a{
font-size: 25px;
font-family: Tahoma;
color: #4F45B2;
/* removes the underline from links */
text-decoration: none;
/* makes area clickable above and below
text link area */
display: block;
}
ul li a:hover{
color: black;
}