CSS: 2 Column Web Site

A basic navigational menu can be created from a list (ordered or unordered) by making each list item a link and then "stylize" the whole list to make it behave like a menu.

CREATE A LIST OF PARAGRAPHS

First, we will start by creating a simple list of paragraphs.

Create a simple list of paragraphs by typing a list (e.g., Home, Products, etc.) in Design View. In this case between the body element:

CHECK POINT: Save file and preview it in a browser.

Code View

<body>
   <p>Home</p>
   <p>Products</p>
   <p>Services</p>
   <p>Contact Us</p>
<body>

Design View:

CONVERT LIST OF PARAGRAPHS TO AN UNORDERED LIST

Convert list of paragraphs to a simple unordered (bullet) list by selecting all of the paragraphs and click the bullet list button in the Property Panel.

Code View:
```
<ul>
   <li>Home</li>
   <li>Products</li>
   <li>Services</li>
   <li>Contact Us</li>
</ul>
```
NOTE: Notice how the "p" elements were converted to "li" elements and wrapped within a "ul" element.
CHECK POINT: Save file as index.html and preview it in a browser. You should see a simple bullet list:

CONVERT LIST TO A LIST OF LINKS

Next, let's convert the list to a list of links by applying an anchor tag <a> to the text in each of the list item (highlighted in bold).
NOTE: We could have named the first line home.html; however, it is best practice to name the "home page" index.html.

Double-click the word Home to select it and then in the Properties panel type index.html in the Link text field.

Repeat the previous step for the other three links but add products.html, services.html, and contact_us.html in the Link text field.

Code View:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="product.html">Products</a></li>
  <li><a href="services.html">Services</a></li>
  <li><a href="contact_us.html">Contact Us</a></li>
</ul>

CHECK POINT: Save file and preview it in a browser. You should see a list of links.

NOTE: Notice how each word got wrapped within an "a" element with an "href" attribute.

STYLE LINKS

Now, let's address the links themselves by creating a contextual selector (e.g., #nav a) to target the anchor element (<a>):

STYLE HOVER EFFECT

Now, let's enhance our menu by creating a hover effect when the user moves the mouse of a menu item. To create a hover effect, we will apply a hover pseudo-class to the <a> tag inside the nav area

Add the following selector to the style element:

Code View:

/* ---------- STLYLE LINKS HOVER ---------- */
#nav a:hover { background-color: #006;}
</style>

CHECK POINT: Save the file and preview it in a browser. You should see the bullet list looks more like a menu now. To "see" the hover effect, preview in a browser and roll mouse over menu.

NOTE: You can also use a background image for the Active and Hover state as well as change the font color, etc.

OPTIONAL: Add a border to the left by adding the following highlighted rule to the existing selector:

/* ---------- STLYLE LINKS HOVER ---------- */
#nav a:hover { background: #006;
    border-left: 5px solid red; }
</style>

CHECK POINT: Save the file and preview it in a browser. You should see when you roll your mouse over any menu item, a red border appears on the left.
(OPTIONAL) While not a major problem, it would be nice to have a border at the top of the menu as well so that it can be seen if the menu background color is not white. To include this in your menu for now or in the future, we will target the #nav selector and add a top border to it.

Add the following selector below the #nav a selector and temporarily change the border-bottom rule to red.

Code View:
```
/* ---------- STLYLE LINKS ---------- */
#nav a {
text-decoration: none;
color: #FFF; 
padding: 0 15px;
line-height: 2.1; 
border-bottom: 1px solid red;
display:block;
/*text-align:center;*/
}
#nav:first-child {
  border-top: 2px solid red;
}
```
CHECK POINT: Save the file and preview it in a browser. You should that the red border is between each menu item.

Change the color to white instead of red as it was only use so that you could see the border.

/* ---------- STLYLE LINKS ---------- */
#nav a {
text-decoration: none;
color: #FFF; 
padding: 0 15px;
line-height: 2.1; 
border-bottom: 2px solid white;
display:block;
/*text-align:center;*/
}
#nav:first-child {
  border-top: 2px solid white;
}

CHECK POINT: Save the file and preview it in a browser. While not obvious the border is white at the top of the menu.

STYLE ACTIVE LINK

An "active" class can be add to a link to let the user know which page is currently active.

Add the following active class to the style element.

/* ---------- ADD ACTIVE LINK ---------- */
.active {background-color: #006; color: white;}
</style>

Add the class the the HOME link:

<li class="active"><a href="index.html">Home</a></li>

CHECK POINT: Save the file and preview it in a browser. You should see the HOME menu is highlighted because of the active class.

(OPTIONAL) ADD STICKY MENU

Below the closing tag (</ul>) type p>Lorem800 and then press the TAB key.
CHECK POINT: Save the file and preview it in a browser. If you scroll the page, you will see that the menu and text both scroll.
Update the #nav selector with the following highlighted rules.
```
/*----- STYLE LIST ------- */
#nav {
   list-style-type: none;
   background-color: #09F;
   width:180px;
   padding:0; margin:0; 
   /*border: 1px solid black;*/
     position: fixed;
     height: 100%;
     overflow: auto;
    }   
```
NOTES: The following rules do the following:
- height: 100%; - makes menu the full height of the page
- position: fixed; - Makes the menu stick to the top of the page even when page is scrolled
- overflow: auto; - Enable scrolling if the menu has too much content
CHECK POINT: Save the file and preview it in a browser. If you scroll the page, only the text scroll and not the menu (it stays fixed to the side)

(OPTIONAL) ADD A SNIPPET

TIMESAVING TIP: Once you have some or all of the CSS rules you need to create a functional menu, you can create a snippet of the CSS code and then reuse the code again in a new web site or new web site file by simply inserting the snippet in the style element or an external style sheet or create a new style sheet altogether: The advantage of this is that once you have code that work you don't have to type it again or figure out how it was done again.

Highlight the rules you want from the CSS code to make a functional menu
Select Window > Snippets (SHIFT+F9) and then click on the New Snippet icon at the bottom of the Snippets panel.
(Optional) Create your own folder if you like (e.g., MySnippets) by clicking on the New Snippet Folder icon at the bottom of the Snippets panel.
Add the following in the Snippets dialog box:
1. Name: Give the snippet a descriptive name (e.g., VerticalMenuUsingCSS).
2. Description: Add a description and any comments on how to use or implement the snippet.
  EXAMPLE:
  - Create a list of links in the sidebar and then convert it to a bullet list and then add anchor links
  - Insert this snippet by adding it the the style element or an external style sheet.
  - Give the ul element an ID name of nav (e.g., <ul id="nav">

Click the Insert Block radio button so that the code can be inserted as a complete code block.
NOTE: You should see the code you highlighted in the Insert Code text field (example below)

/*----- STYLE LIST ------- */
#nav {
   list-style-type: none;
   background-color: #09F;
   width:180px;
   padding:0; margin:0; 
   /*border: 1px solid black;*/
   position: fixed;
   height: 100%;
   overflow: auto;
    }   
/* ---------- STYLE LINKS ---------- */
#nav a {
text-decoration: none;
color: #FFF; 
padding: 0 15px;
line-height: 2.1; 
border-bottom: 1px solid white;
display:block;
/*text-align:center;*/
}
#nav:first-child {
  border-top: 1px solid white;
}
/* ---------- STLYLE LINKS HOVER ---------- */
#nav a:hover { background: #006;
    /*border-left: 5px solid red;*/ }
/* ---------- ADD ACTIVE LINK ---------- */
.active {background-color: #006; color: white;}

Click the OK button to save the code as a snippet.
To insert this snippet into a new or existing *.html file:
1. Create a list of links in the sidebar and then convert it to a bullet list and then add anchor links
2. Insert this snippet by adding it to the style element or an external linked style sheet.
3. Give the <ul> tag an ID name of "nav" (e.g., <ul id="nav">.

BONUS: (OPTIONAL) ADD "YOU ARE HERE" FUNCTIONALITY WITH A DW TEMPLATE

To let the user know what page he or she is currently on, we will write some code the "detect" what page the browser is viewing and highlight the corresponding menu accordingly.

Write ID for each "li" element by updating the unordered list (highlighted in bold) in Code View.

Code View:

<ul id="nav">
  <li id="nav_home"><a href="index.html">Home</a></li>
  <li id="nav_products"><a href="products.html">Products</a></li>
  <li id="nav_services"><a href="services.html">Services</a></li>
  <li id="nav_contact_us"><a href="contact_us.html">Contact Us</a></li>
</ul>

STYLING LIST: A SIMPLE CSS-BASED VERTICAL NAVIGATIONAL MENU

Code View

Design View:

Code View:

Code View:

Code View:

Code View:

Code View:

Code View:

Code View:

Code View:

Code View: