HTML Tutorial Lesson 12. HTML/CSS Menus.

This Page's Contents

Introduction

Simple Vertical CSS Menu using an Ordered List with Links

Introduction

In Tutorial tutorial-08-ordered-list.htm we introduced using an unordered list as a menu and produced a very simple menu as follows

Simple Vertical Menu - Start with an Unordered List

Using an Unordered List & Links that was created in tutorial 08b Unordered List

• Home
• Item 1
• Item 2
• Longer Item 3
• Item 4

Now let's change this Simple Vertical Menu to a Simple Vertical Navbar Menu with button styling

Step 1. Simple Vertical Navbar Menu.

Set up the HTML and add 2 classes

HTML Code for Step 1

<nav class="vertical">
   <ul class="menu-vertical">
    <li><a href="../tutorial-08-html-lists.htm">Home</a></li>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Longer Item 3</a></li>
		<li><a href="#">Item 4</a></li>
  </ul>
</nav>

HTML Code Explanation

• In modern Web Design sections of a page are often wrapped up in a container,  which allows for easier positioning of the section and also allows additional styling.
  • The containers are often div tags.
  • In HTML5 a new purpose built element was created for main navigational links on a page - The nav element - which we will use as a container for the unordered list
    
    <nav>
          unordered list
    </nav>
• Many web pages have 2 main navigational sections, one for the site and the other for the page contents. Therefore 2 nav tags will be needed.
• If we add styles to the nav element then both site & page menus would be styled the same.
• In order to style them differently add a class to both nav elements with a different name for each

On our View Results pages We are using an Internal style sheets, allowing you can view the HTML and the CSS in the same document file.

In our results examples the

• The CSS is in the Head Section
• the HTML is in the Body Section
• These sections are commented for easy finding

Html Add a <nav> tag to produce a Navbar

The <nav> tag defines a set of navigation links and is a new HTML5 element. That should be used for a major set of Navigation Links.

The tag will also allow you to add extra design to the Navbar
Use a div tag if working on an earlier version of HTML.

1. Surround the unordered list with a nav tag.
   1. Place the opening <nav> tag before the <ul> tag
   2. Place the closing </nav> tag after the <ul> tag

Insert Classes

2. Insert class ="vertical" inside the opening <nav> tag
3. Insert class ="menu-vertical" inside the opening <ul> tag

Style Class vertical - The Navbar Container

The CSS styles are all applied to class vertical.

Classes start with a . decimal point

     
.vertical {	
	Your style rules go here
}	

Add a border & Style the border

Full Code

border-width: 4px; border-style: ridge; border-color: #960;

Use this Shorthand Code

border: 4px ridge #960;

The above produces a border

4. With a 4 pixel wide border. Change the width as required. A width of 6px will achieve a far bolder effect & if you wish to experiment with different styles allows you to easily see the different style effect with a border width of 6px
5. With style ridge. The ridge style produces a 2 tone 3D effect. Experiment with other styles: solid, inset, outset, groove or double if required. Note groove reverses the border colour from the ridge style
6. With colour #960. Actually 2 colours one darker & one lighter than the specified colour when you use style ridge inset, outset or groove.   Or use a colour to suit your colour site scheme

Add Rounded Corners

border-radius: 10px;

7. The radius sets the size of the rounded corner. 4px sets a small radius that can just be seen as a rounded corner. Less than 4 would be hard to see. The radius of the border on our headings on this page are to .9375 rem which equates to 15px

Set the width

width: 170px;

8. Sets the width to 170 pixels. If you wish to alter this width. The following may need adjusting:

• Background Colour

background: #FD9;

9. Sets the background to #FD9.  Or use a colour to suit your colour site scheme

Set the margins

Full Code

margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 10px;

Use this shorthand code

margin: 0 0 0 10px;

10. This sets the margin from the top margin to 0 (zero) , then clockwise right & bottom margin to 0 (zero), finally the left margin to 10px. These margins provide space on the outside of the border.  Set your own margins as required.

IMPORTANT Do not add a size unit such as px after a 0 (zero) value.

<style>
  .vertical {	
   border: 4px ridge #960;
	  border-radius: 10px;
	  width: 170px;
	  background: #FD9;
	  margin: 0 0 0 10px;
  }
</style>      

Step 2.  Remove the Circular Disks from the List

Code for Step  2

.menu-vertical li {
	list-style-type: none;
}

CSS Code Explanation

11. Add this code inside the <style> </style> tags after the }
12. This code only effects li elements that have the class menu-vertical

Step 3. Style the <a> elements - links

CSS Code for Step 3

.menu-vertical li a {
	display: block;
	background-color: SaddleBrown;
	color: white;
	padding: 6px 10px;
	text-decoration: none;
	border-radius: 6px;
	border: 4px outset #600;
	width: 110px;
	padding: 6px 10px;
	margin-bottom: 5px;
	margin-left: -22px;
}

Step 4. Add the Link Hover Styles

CSS Code for Step 4

.menu li a:hover {
	background-color: orange;
	color: black;
}