So many tutorials for creating drop-down menus using HTML/CSS, but none of them this simple. This covers the basics, going one step at a time, of creating a drop-down menu that holds navigation links, like "Page Two of this Web Site".
An HTML (Hyper-Text Markup Language) file is a file designed to be served by web-servers (like Apache or IIS) to web-browsers (like Firefox and Chrome). You can save your HTML file as "index.html" or "menu.html" or something similar, and either serve it to your web-browser by placing it on a web-server, or by just using your web-browser's File / Open File option to open the file.
<!DOCTYPE html>
<html>
<body>
<p>This is valid HTML.</p>
</body>
</html>
Really, a "more valid" HTML file would look like this (adding what is in
<!DOCTYPE html> <html><head> </head> <body> <p>This is valid HTML.</p> </body> </html>
And an even better HTML file would be:
<!DOCTYPE html> <html> <head><meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>A Very Simple Step-by-Step Explanation of Creating a Drop-own Menu via HTML/CSS</title> <link href="/style.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <p>This is valid HTML.</p> </body> </html>
The <meta> and other items in the <head> section aren't strictly necessary, and you don't really need to know at this point what they do, but it makes your HTML file ... better.
There are several ways we could coerce these inline elements to behave like block elements, such as by putting the "a" weblinks into a list structure, or by adding a break tag <br> to the end of "a" links, or by applying CSS rules to the "a" links. One way would be to put them into an unordered list (a list that does not need to be in any particular order, like a typical randomly-arranged grocery list, as opposed to an ordered list, like a recipe, where the order matters). This works, because even though the a href... weblinks are inline elements, they would be in li list items that are block elements. The "Method 1" section here shows how to do this, but I suggest we use "Method 2", which follows in a moment.
I'm not showing the whole file here; just the <body>.
<body>
<p>This is valid HTML.</p>
<nav>
<ul>
<li> <a href="first-page.html">First Page of Web Site</a></li>
<li> <a href="second-page.html">Second Page of Web Site</a></li>
<li> <a href="third-page.html">Third Page of Web Site</a></li>
</ul>
</nav>
</body>
An alternative, and perhaps better, method is to use CSS on the weblink elements. This is the method I'll be using.
CSS (Cascading Style Sheets) rules can go in one of three places within your HTML: in the element itself, in a <style> section within the file's <head> section, or in a separate style sheet, referenced by the <link href="/style.css" rel="stylesheet" type="text/css" media="all"> line in the file's <head> section.
If you were to put the CSS rules in the element itself, the code would look like this:
<body>
<p>This is valid HTML.</p>
<nav>
<a href="first-page.html" style="display:block;" >First Page of Web Site</a>
<a href="second-page.html" style="display:block;" >Second Page of Web Site</a>
<a href="third-page.html" style="display:block;" >Third Page of Web Site</a>
</nav>
</body>
The advantage of this method is that it's "quick and dirty", and doesn't require much planning or thinking ahead. The disadvantage is that you have to touch every element that you want to affect, and worse, if you want to change that setting, you have to hunt down and touch every element that is using that setting.
If you were to put the code in the <head> section, the code would look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Very Simple Explanation of Creating a DropDown Menu via HTML/CSS</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
a {
display: block;
}
</style>
</head>
<body>
<p>This is valid HTML.</p>
<nav>
<a href="first-page.html">First Page of Web Site</a>
<a href="second-page.html">Second Page of Web Site</a>
<a href="third-page.html">Third Page of Web Site</a>
</nav>
</body>
This will cause all "a" elements (i.e. "<a href=...") in the entire file to display as block elements rather than as inline elements.
An even better version would be:
...
<style>
nav a {
display: block;
}
</style>
...
This version won't affect all "a" links, but only those "a" links that are found in the <nav> section.
Putting the CSS rule in the <style> section within the <head> section has the advantage that you only have to put the code in at one place, and if you ever want to change that code, you only have to change it in one place. Putting the CSS rule in an external style sheet (which I didn't go into), also has this advantage.
Either of the two methods above, the second of which ("Method 2- Using CSS", and "In the <head> Section") being what I will use, should result in something like this:
Notice that the links now behave like block items, stacking on top of each other along the left-edge of the window. This is the way <div> items work. To see the outline of the block that makes up this <nav></nav> section, let's use CSS (Cascading Style Sheets) rules to turn on the border for it.
Again, there are three places we could put these CSS rules to create a border around the <nav> section. But like I did above, I'll put the rules in the <style> section in the <head> section.
...
<style>
nav {
border: solid 1px red;
}
nav a {
display: block;
}
</style>
...
The above code should result in something like this:
That red rectangle marks the boundaries of the <nav>...</nav> block. If we add in another block element, another <div>, with similar styling, you can see how it stacks below the previous <nav</> block:
<body>
<p>This is valid HTML.</p>
<nav>
<a href="first-page.html">First Page of Web Site</a>
<a href="second-page.html">Second Page of Web Site</a>
<a href="third-page.html">Third Page of Web Site</a>
</nav>
<div style="border:dashed 2px blue;">
<p>This is another "div".</p>
</div>
</body>
The above code should result in something like this:
As you can see, it's perfectly fine to mix your methods of adding CSS. The <nav> section's CSS is in the <style> section in the <head> section, whereas the CSS for the new <div> we just added is inline with that <div> element.
The CSS rule that is "closest" to the element to which it applies takes precedence. Suppose we had a CSS rule for a border in all three locations, with the inline rule specifying green, the in-file rule specifying red, and the external stylesheet specifying blue. The "closest" rule would be the inline rule, so the border would be green.
These rules specify a border in two cases: a solid red border for all instances of <nav> (of which there should only ever be one instance, but that might not always be the case for one reason or another), and a dashed blue one for just the single instance of <div>, because the CSS rule is inline with that one element.
If we add a second, third, and fourth <div> without inline CSS rules, they won't get the blue border:
<body>
<p>This is valid HTML.</p>
<nav>
<a href="first-page.html">First Page of Web Site</a>
<a href="second-page.html">Second Page of Web Site</a>
<a href="third-page.html">Third Page of Web Site</a>
</nav>
<div style="border:dashed 2px blue;">
<p>This is another "div".</p>
</div>
<div>
<p>This is a second "div".</p>
</div>
<div>
<p>This is a third "div".</p>
</div>
<div>
<p>This is a fourth "div".</p>
</div>
</body>
The above code should result in something like this:
If you want the blue border around all <div>s, you could move the CSS rule out of the inline position, into the file's <head>/<style> section:
...
<style>
nav {
border: solid 1px red;
}
nav a {
display: block;
}
div {
border: dashed 2px blue;
}
</style>
...
<div style="border:dashed 2px blue;">
<p>This is another "div".</p>
</div>
<div>
<p>This is a second "div".</p>
</div>
<div>
<p>This is a third "div".</p>
</div>
<div>
<p>This is a fourth "div".</p>
</div>
...
If you don't want the rule to apply to all <div>s, you can break your <div>s (or any element) up into different kinds, or classes, and just apply the rule to a specific class of <div>. For example, say we want a yellow border around div 1, a blue border around div 2 and 4, and no border around div 3. We can name the red class "yellowbox", the blue class "feelin-blue", and the no-border class "no-border". We assign these class names to the divs as needed, and then create the CSS rules for these classes. Classes in the CSS rules are indicated by a period at the start of their names.
...
<style>
nav {
border: solid 1px red;
}
nav a {
display: block;
}
div.feelin-blue {
border: dashed 2px blue;
}
.yellowbox {
border: solid: 4px yellow;
}
.no-border {
border: none;
}
</style>
...
<div class=yellowbox" >
<p>This is another "div".</p>
</div>
<div class="feelin-blue" >
<p>This is a second "div".</p>
</div>
<div class="no-border" >
<p>This is a third "div".</p>
</div>
<div class="feelin-blue" >
<p>This is a fourth "div".</p>
</div>
...
Strictly speaking, we don't need the "no-border" class, since the default is to not have a border, but having this class ensures that this class/kind of div does not "inherit" a border from some other "parental" HTML/CSS mechanism.
The above code should result in something like this:
This should give you enough understanding of CSS rules to comprehend what we're doing in this tutorial.
We don't need the <div>s we just added, nor the "This is valid HTML" line, nor the colored borders; let's remove those, and get our file back to where it looks like this:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Very Simple Step-by-Step Explanation of Creating a Drop-down Menu via HTML/CSS</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<style>
nav a {
display: block;
}
</style>
</head>
<body>
<nav>
<a href="first-page.html">First Page of Web Site</a>
<a href="second-page.html">Second Page of Web Site</a>
<a href="third-page.html">Third Page of Web Site</a>
</nav>
</body>
The result of this code should be just the links, in block-display format:
There's a lot more that can be done with this, but if you can wrap your head around these basics, the hundreds of other tutorials can take you to those places. This was just so you can get the minimal basics in your head, one step at a time.