Lesson 12 Final Exam Project

Menu Patterns

Horizontal Menu

This menu displays horizontally with links spaced across the row.

HTML

<nav id="horiz-nav">
    <a href="#">Home</a>
    <a href="#">Blog Template</a>
    <a href="#">Planet Table</a>
    <a href="#">HTML Grouping</a>
    <a href="#">Dropdown Nav</a>
    <a href="#">Login Form Component</a>
    <a href="#">Text Elements</a>
</nav>

CSS

#horiz-nav {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    background-color: var(--main-med-dark-color);
}
#horiz-nav a {
    text-decoration: none;
    color: var(--main-light-color);
    padding: .5em 1em;
}
#horiz-nav a:hover, #horiz-nav a:focus {
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}

Example

Home Blog Template Planet Table HTML Grouping Dropdown Nav Login Form Component Text Elements

Vertical Menu

This menu displays vertically with links spaced down the column.

HTML

<nav id="vert-nav">
    <a href="#">Home</a>
    <a href="#">Blog Template</a>
    <a href="#">Planet Table</a>
    <a href="#">HTML Grouping</a>
    <a href="#">Dropdown Nav</a>
    <a href="#">Login Form Component</a>
    <a href="#">Text Elements</a>
</nav>

CSS

#vert-nav {
    display: flex;
    flex-direction: column;
    width: 13rem;
    justify-self: center;
    background-color: var(--main-med-dark-color);
}
#vert-nav a {
    text-decoration: none;
    width: 100%;
    color: var(--main-light-color);
    padding: .5em 1em;
}
#vert-nav a:hover, #vert-nav a:focus {
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}

Example

Home Blog Template Planet Table HTML Grouping Dropdown Nav Login Form Component Text Elements

Mobile Menu

This menu hides behind a hamburger icon and drops down when the icon is clicked. The active page name displays on the menu bar.

HTML

<div id="mobile-nav">
    <a href="#home" class="mobile-active">Logo</a>
    <!-- Navigation links (hidden by default) -->
    <div id="myLinks">
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
    </div>
    <!-- "Hamburger menu" / "Bar icon" to toggle
    the navigation links -->
    <a href="javascript:void(0);" class="icon" 
    onclick="myFunction()">
        <i class="fa fa-bars"></i>
    </a>
</div>

CSS

#mobile-nav {
    overflow: hidden;
    background-color: var(--main-dark-color);
    position: relative;
}  
/* Hide the links inside the navigation menu
    (except for logo/home) */
#mobile-nav #myLinks {
    display: none;
}  
/* Style navigation menu links */
#mobile-nav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
}  
/* Style the hamburger menu */
#mobile-nav a.icon {
    background: var(--main-dark-color);
    display: block;
    position: absolute;
    right: 0;
    top: 0;
}  
/* Add a grey background color on mouse-over */
#mobile-nav a:hover {
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}  
/* Style the active link (or home/logo) */
.mobile-active {
    background-color: var(--main-med-dark-color);
    color: white;
}

JavaScript

/* Toggle between showing and hiding the navigation
    menu links when the user clicks on the hamburger
    menu / bar icon */
function myFunction() {
    var x = document.getElementById("myLinks");
    if (x.style.display === "block") {
    x.style.display = "none";
    } else {
    x.style.display = "block";
    }
}

Example

Logo ☰

News Contact About

Tab Menu

This component utilizes a tab interface to control the display of the content. It includes ARIA roles and attributes. JavaScript is used to change the selected tab and content to display. The code to create the component can be found in the code blocks below.

HTML

<div class="tab-menu" role="tablist"
     aria-owns="tab1 tab2 tab3">
    <ul class="tab-list" tabindex="-1" role="menu">
        <li><button class="tab" id="tab1" role="tab"
         aria-controls="content1" aria-selected="true" 
         onclick="changeTab(event, 'content1')">
         Tab 1</button></li>
        <li><button class="tab" id="tab2" role="tab"
         aria-controls="content2" aria-selected="false" 
         onclick="changeTab(event, 'content2')">
         Tab 2</button></li>
        <li><button class="tab" id="tab3" role="tab"
         aria-controls="content3" aria-selected="false" 
         onclick="changeTab(event, 'content3')">
         Tab 3</button></li>
    </ul>
    <div class="tab-content" tabindex="0" id="content1"
     role="tabpanel"
     aria-labelledby="tab1" style="display: block;">
     <!-- Add tab content here --></div>
    <div class="tab-content" tabindex="0" id="content2"
     role="tabpanel"
     aria-labelledby="tab2" style="display: none;">
     <!-- Add tab content here --></div>
    <div class="tab-content" tabindex="0" id="content3"
     role="tabpanel"
     aria-labelledby="tab3" style="display: none;">
     <!-- Add tab content here --></div>
</div>

CSS

.tab-menu {
    width: 80%;
    margin: 1rem auto;
}
.tab-list {
    list-style: none;
    display: flex;
    flex-direction: row;
}
li > button {
    padding: 1rem;
    margin-bottom: -.15rem;
    background-color: var(--main-med-light-color);
    border: solid thin;
    border-top: solid thick var(--main-dark-color);
    border-radius: .5rem .5rem 0 0;
    text-transform: uppercase;
}
li > button[aria-selected=true] {
    border-color: var(--main-dark-color);
    border-bottom: solid thin var(--main-light-color);
}
li > button[aria-selected=false] {
    background-color: var(--main-light-color);
    border-color: var(--main-med-color);
    border-bottom: solid thin var(--main-dark-color);
}
li > button:hover {
    border-color: var(--main-med-dark-color);
    background-image: linear-gradient(to top,
     var(--main-dark-color), var(--main-med-dark-color));
     color: var(--main-light-color);
}
.tab-content {
    border: solid thin var(--main-dark-color);
    position: relative;
    top: 1px;
    z-index: -1;
    background-color: var(--main-light-color);
    padding: 1rem;
    border-radius: 0 .5rem .5rem .5rem;
}

JavaScript

function changeTab(evt, tabContentName) {
    // declare needed variables
    var i, tabContent, tabs;
    
    // set all tab contents to not display at all
    tabContent = document.getElementsByClassName
     ("tab-content");
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].setAttribute("style",
         "display: none;");
    }
    
    // set all tabs to not be selected
    tabs = document.getElementsByClassName("tab");
    for (i = 0; i < tabs.length; i++) {
        tabs[i].ariaSelected = "false"; 
    }
    
    // set the tab to be selected and the content
     to display
    document.getElementById(tabContentName)
     .setAttribute("style", "display: block;");
    evt.currentTarget.ariaSelected = "true";
}

Example

Refer to the format of this page.

Breadcrumb Menu

The menu provides links back to each previous page the user navigated through, and shows the user's current location on a website.

HTML

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">Pictures</a></li>
    <li><a href="#">Summer 15</a></li>
    <li>Italy</li>
</ul>

CSS

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: var(--main-med-color);
}  
    ul.breadcrumb li {
    display: inline;
    font-size: 18px;
}  
    ul.breadcrumb li+li:before {
    padding: 8px;
    color: var(--main-dark-color);
    content: "/\00a0";
}  
    ul.breadcrumb li a {
    color: var(--main-light-color);
    text-decoration: none;
}  
    ul.breadcrumb li a:hover {
    color: var(--main-dark-color);
    text-decoration: underline;
}

Example

Home
Pictures
Summer 15
Italy

Sub-Menu

Lists can be used to create a multi-level navigation menu where the various levels of the list appear based upon the link states of the list items.

HTML

<nav class="dropdown-nav">
    <ul>
        <li class="dropdown"><button>Fruits</button>
            <ul>
                <li><a href="#">Pomes</a></li>
                <li><a href="#">Drupes</a></li>
                <li><a href="#">Berries</a></li>
                <li><a href="#">Melons</a></li>
                <li><a href="#">Citrus</a></li>
                <li><a href="#">Tropical</a></li>
            </ul>
        </li>
        <li class="dropdown"><button>Vegetables</button>
            <ul>
                <li><a href="#">Brassica</a></li>
                <li><a href="#">Fruit Vegetables</a></li>
                <li><a href="#">Gourds</a></li>
                <li><a href="#">Greens</a></li>
                <li><a href="#">Fungus</a></li>
                <li><a href="#">Root</a></li>
                <li><a href="#">Pod</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

.ex-dropdown-nav {
    background-color: var(--main-dark-color);
    width: 85%;
    padding: 0;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 350px;
    font-family: var(--body-font);
}
.ex-dropdown-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ex-dropdown {
    display: inline-block;
}

.ex-dropdown button {
    border: none;
    background-color: var(--main-dark-color);
    color: var(--main-light-color);
    padding: 16px;
    font-size: 16px;
}

.ex-dropdown:hover button {
    background-color: var(--main-med-color);
    color: var(--main-dark-color);
}

.ex-dropdown ul {
    display: none;
    background-color: var(--main-med-dark-color);
    min-width: 150px;
}

.ex-dropdown:hover ul {
    display: block;
    position: absolute;
}

.ex-dropdown a {
    display: block;
    text-decoration: none;
    padding: 16px;
    color: var(--main-light-color);
    font-size: 16px;
}

.ex-dropdown a:hover {
    background-color: var(--main-med-light-color);
    color: var(--main-dark-color);
}

Example

- Pomes
- Drupes
- Berries
- Melons
- Citrus
- Tropical
- Brassica
- Fruit Vegetables
- Gourds
- Greens
- Fungus
- Root
- Pod